Note: This blog entry predates responsive design. All modern websites should be built using responsive design principles.
While working on a recent web project at work, I wondered if I should go for a fixed-width layout or stick with my preference for fluid layouts. Fixed-width layouts are certainly easier to manage, but they just feel so… rigid. With the boom in larger monitors, I also wondered if fluid sites start presenting a problem due to being too wide. I decided to check around the web to see what others are doing.
The search
In my (very quick and unscientific) research, I visited 150 popular sites, including news sites, shopping sites, software company sites, and the personal sites of well-regarded web designers and developers. I purposely avoided blogs that use canned themes.
When visiting the site, I determined the page’s width by reducing the browser window’s width until the horizontal scrollbar appeared. In some cases, I didn’t use the front page of the site, as these are sometimes standalone pages that use a completely different layout than the site’s actual content.
The results
Of the 150 sites I visited, only thirteen used fluid layouts — a whopping 8.6%.
A number of those thirteen sites weren’t completely fluid, as they either break at smaller sizes or have fixed-width sidebars, but I included them in the list since they aren’t using a fixed-width wrapper.
I was genuinely surprised about the number of fixed-width sites; a sizable chunk of these sites belong to (or were designed by) well-known web design gurus. I had assumed a number of them would use some sort of min-width/max-width CSS trickery, but I was wrong — only a very few sites (less than 3.5%) used this approach.
I was also surprised to see that the vast majority of the fixed-width sites were between 900 and 1000 pixels wide, a size that was unthinkable a mere 5 years ago.
Observations
- Most of the fixed-width sites fell between 900 and 1000 pixels wide, and were usually centered in the browser
- 20 sites were 800 pixels wide or less
- 14 sites were between 800 and 900 pixels wide
- 100 sites were between 900 and 1050 pixels wide
- 3 sites were over 1050 pixels wide
- the widest site was time.com at over 1100 pixels, although the layout uses a fixed-width wrapper wider than the content itself (the content was closer to 1000 pixels).
Sites visited
I picked sites somewhat randomly, using a combination of Alexa.com rankings, sites I frequent, sites my co-workers like to visit (hello, www.bebe.com), sites belonging to famous companies (McDonalds, Target, etc.) and sites belonging to well-known web designers and developers. I know I left out a number of good sites, but this was a very quick-and-dirty project.
Fluid layouts
- allinthehead.com (Drew McClellan)
- clearleft.com
- craigslist.org
- danwebb.net
- dean.edwards.name
- drupal.org (partially broken due to floating elements overlaying other elements)
- gmail.com
- htmldog.com (Patrick Griffiths)
- joeclark.org
- meyerweb.com (Eric Meyer)
- molly.com (Molly Holzschlag)
- people.opera.com/howcome (HÃ¥kon Wium Lie)
- wikipedia.org
Fixed-width layouts
- 24ways.org
- 37signals.com
- 456bereastreet.com (Roger Johansson)
- about.com
- adactio.com (Jeremy Keith)
- adobe.com
- alexa.com
- alistapart.com
- amazon.com
- americanexpress.com
- andybudd.com
- anthropologie.com
- aol.com
- apartmenttherapy.com
- apple.com
- authenticjobs.com
- bankofamerica.com
- barackobama.com
- barnesandnoble.com
- bbc.co.uk
- bebe.com
- bestbuy.com
- blogger.com
- borders.com
- boxofchocolates.ca (Derek Featherstone)
- burgerking.com
- cameronmoll.com
- cartoonnetwork.com
- cbs.com
- chase.com
- clagnut.com (Richard Rutter)
- cnet.com
- cnn.com
- comcast.com
- comcast.net
- crateandbarrel.com
- danbenjamin.com
- dean.edwards.name
- dell.com
- deviantart.com
- dictionary.com
- digg.com
- directv.com
- dojotoolkit.com
- dustindiaz.com
- ebay.com
- espn.com (MLB page)
- facebook.com
- fastcompany.com
- fedex.com
- flickr.com
- fox.com
- friendster.com
- gamespot.com
- go.com
- guardian.co.uk
- guitarhero.com
- happycog.com
- haveamint.com
- hicksdesign.co.uk
- home.live.com
- hulu.com
- iht.com
- ikea.com
- imdb.org
- jasonsantamaria.com
- jeffcroft.com
- jetblue.com
- jquery.com
- kaiserpermanente.com
- latimes.com
- linkedin.com
- livejournal.com
- m-w.com
- macys.com
- markboulton.com
- mcdonalds.com
- mediatemple.net
- mezzoblue.com (Dave Shea)
- microsoft.com
- mootools.net
- mozilla.com
- msn.com
- myspace.com
- nbc.com
- neopets.com
- netflix.com
- newegg.com
- nfl.com
- ning.com
- nintendo.com
- npr.org
- nytimes.com
- opera.com
- oreilly.com
- paypal.com
- pbs.org
- quirksmode.com (Peter-Paul Koch)
- reuters.com
- rockband.com
- rollingstone.com
- secondlife.com
- sfgate.com
- shauninman.com
- si.com (MLB page)
- simonwillison.net
- simplebits.com (Dan Cederholm)
- sitepoint.com
- skype.com
- snook.ca (Jonathan Snook)
- sony.com
- stuffandnonsense.co.uk (Andy Clarke)
- target.com
- techcrunch.com
- theonion.com
- time.com
- tivo.com
- twitter.com
- typepad.com
- ups.com
- urbanoutfitters.com
- usaa.com
- usps.com
- veerle.duoh.com (Veerle Pieters)
- virgin.com
- wait-til-i.com (Christian Heilmann)
- wamu.com
- washingtonpost.com
- weather.com
- wellsfargo.com
- whitehouse.gov
- williamssonoma.com
- wordpress.com
- yahoo.com
- yelp.com
- youtube.com
- zeldman.com (Jeffrey Zeldman)
Quite an interesting sample of sites. What did you decide for the project in the end – fluid or fixed?
We’re in the process of trying to convince management of the benefits of fluid layouts for e-learning modules, rather than the traditional fixed window.
One thing that would be very interesting to know is whether the boom in large monitors necessarily corresponds to larger browser windows. My personal preference on a large monitor (anything over 19 inches IMHO) is to have the browser window sized sensibly, so that i’ve more space on the screen for other applications as well as the browser – IM, Email, etc.
I wonder if any web analytics packages could the visible window size of the users browser, as well as detecting the native screen resolution? It would probably be more relevant than screen res as it would take into account varying sizes of chrome from users having multiple toolbars installed. Any patterns of window size as the screen res gets larger could be very useful.
I used to like totally liquid layout. But now I have a 1920 wide screen and some dumb designers still think I need to view their text-heavy sites in full screen mode. No I effin don’t.
Ultimately I prefer a fixed-width site that looks roughly similar in width to a little less than half my screen width. This matches your findings and matches this site 🙂
I think the reason is pretty simple. We cannot scan wide lines of text as easily as narrow ones.
The exception to my page-width preferences are sites that are design-based – images, video etc. rather than text based.
@tom i’ll probably go with a 1000px fixed-width, but try and work in an alternate stylesheet for mobile devices. ultimately, the fixed-width approach makes the site easier to design and maintain. for instance, you always know what image dimensions will work, and it’s less confusing for others who may need to collaborate with me on the site.
@steve i hear ya. my monitor at work is 24″, and i *never* maximize the browser. i have to manually size it so sites remain usable. i usually make my browser about 1/2 the monitor’s width.
I’m not sure it’s a realy good idea to adopt a fluid layout. I know there is an issue concerning the respect of the user how visit the page, but there is an issue to in reading. I’m most a teacher (actually e-learning dev) than web developer, but I know some reader can have difficulties with long lines of text… if it’s not with the text they read, it’s with the motivation to read it…
Nice research Philip. Thanks
The thing is with fluid layouts, forgetting about web standards etc is that aesthetically, they look vastly inferior. Looking at the 13 above, none of them inspire me, if I were a paying customer I wouldn’t accept any. I’ve been working with fluid layouts for over 5 years and fact remains that fixed width just look better. Now take that alone, is it not a very good reason in this endless debate to sway towards fixed, thinking of our end users who at the end of the day, are fickle and want pleasing?!