Why I Design Fixed-Width Websites
February 17, 2009 by chicgeek
Filed under Design Stuff
It has to be said. The role of a website designer is intrinsically that of an employee. Every design is heavily influenced by others’ opinions, whether these opinions belong to a specific client or to the general public. Essentially, it is for the whim of others that a designer works. Despite this, every good web master (or mistress) skillfully imposes their own personal style on their work. Designers develop individual preferences and predilections based on their experiences both as a coder and a viewer. It is through considerations of both of these roles, consumer and creator, that a final design is determined.
A fixed-width design (top) and a fluid-width design (bottom)
A designer makes many decisions when creating a website: navigation, colour palette, font, and use of graphics, to name a few. But none of these choices have as great an impact as that which determines the overall layout. That is, whether a website will use a fixed-width or fluid-width (“liquid”) design.
To begin with, let’s look at the trends of some of the major sites on the internet today. I would dare to say that the majority of sites produced recently, both professional and amateur, use fixed-width designs. These sites include the micro-blogging service Twitter, photo sharing site Flickr, and social networking giant Facebook. Each of these sites chooses a different standard width within which to present their content; Facebook uses a hefty 964 pixel girth, Twitter opts for a slim 763 pixels, while Flickr’s width lies somewhere in between.
Meanwhile in the fluid realm, sites such as the Wikipedia encyclopaedia, Amazon marketplace, and a-tool-for-everything Google flaunt full-page designs. In general, whether in article, catalogue, or list form, these sites have much more content than their fixed-width counterparts, with text or graphics covering every inch of available real estate. Despite being the default display (see W3C’s archive of the world’s first website), fluid-width websites are becoming a less common choice for major sites.
What influences the choice between fixed- and fluid-width layouts? Let’s consider the role of the creator (coder) and consumer (viewer).
Ultimately, a coder has no control over the resolution and browser type that a visitor uses, and thus must do his or her best to present a webpage that will show well over many display possibilities. A designer must aim for some degree of global compatibility. From a coder’s perspective, it is more difficult to produce a good fluid-width site than any fixed-width site. Hundreds, if not thousands, of coders have fallen by the wayside trying to code a perfect fluid-width sites with all the extras. (If this sounds like you, find salvation with Alistapart’s Holy Grail.) An additional challenge lies in developing a fluid webpage that remains usable and visually pleasing at any width or resolution. Meanwhile, fixed-width sites are far more predictable. For the most part, a well-coded fixed-width site is consistent across many browsers and resolutions, allowing the coder to delegate the content to be presented “just-so”.
A viewer’s perspective of fixed- and fluid-width designs depends almost entirely on the size of their display. There is no question that a fluid layout easily makes better use of any visible real estate – there is no concern over the blank spaces. More control is granted to the viewer, who can skew a fluid site to their own preference by changing the size of their browser window. However, this can result in content that is squished or stretched, making the text more difficult to read. Using fixed-width designs ensures that the content always remains as the coder intended it to be viewed – one would hope in easily-read columns. A fixed-width design is not without its visual flaws, though. Many viewers find that blank margins seen in higher resolutions are a waste of space and prove to be a distraction. In left-aligned fixed-width sites, this margin is exaggerated on widescreen displays.
What is my preference? If the title didn’t give you a clear indication, then perhaps my somewhat-biased profile of fluid- and fixed-width gave you a clue. I think the likes of Twitter, Flickr, and Facebook have it right. These days I almost exclusively design with a centered fixed-width design, unless a client requests otherwise. Being a control freak, I love having the complete jurisdiction over the final look of a site: providing easily-consumable columns of text in set widths, creating custom headers and graphics to fit perfectly together on any platform, and knowing that my viewers can see the site just as it was mean to be seen. Even as a site viewer, I prefer being able to scope the contents of a page in one glance instead of having to scan my eyes from one side to the other. As for filling up my restricted real estate, I abide to the policy “less is more”. For the sites I design, I prefer pagination over scrolling and opt to allow the reader a bit of elbow room using generous margins and line spacing. But in general, the sites I design aren’t content-heavy anyway.
So what am I saying? I’m saying it’s up to you and what you are designing for. Wikipedia and Amazon have mountains and mountains of content to present, and – as far as I’m concerned – they have done well to utilise a fluid-width design in which to contain it all. The strategic use of columns on Wikipedia’s main page helps break up potentially long lines of text. Amazon uses all horizontal and vertical space for its catalogue in an elastic tabular set up. Google, however, sacrifices some style in favour of branding. With perhaps millions of pages under their umbrella, the amount of content on each page varies from very little to vast quantities. Taking this into consideration, I can’t help but think “it’ll do”, but still leaves me wanting more.
Wikipedia and Amazon use a divide-and-conquer approach to fluid-width design.
But I hear those of you fluid-width fans out there – “there must be something better!” Sure there is. With some fancy coding an a little patience you can achieve a design that will fill any standard screen, though is immune to any extreme squishing or stretching imposed upon it. Take a look at Chris Coyier’s “The Perfect Fluid Width Layout”. He uses the word “accommodates” no less than three times in that article, and that’s possibly a good thing, but the adjustable width and changeable text still lacks the possibility for control that I prefer in my designs. Sure it’s labelled “perfect”, but to me it’s still just a fluid layout.
As a coder, I embrace my inner control freak. As a viewer, I enjoy not having to carriage return my head after every line. A well-coded picture-perfect fixed design is far more appealing to me than being granted the chance to resize my window or eliminate side margins. That being said, options are there for a reason. There are occasions for either choice, but as a coder you must be willing to accept or even embrace the shortcomings of your decision. Just remember, while ultimately your designs are created for the consumption of others, with this decision you can put your stamp on any design.
Stumble It!
Andrew! on Tue, 17th Feb 2009 3:45 am
Yey! <3 Laura! :3
I completely agree with you on this. I have designed a couple of websites using both fixed and fluid, and I enjoy fixed a lot more. Partially cause I like how much cleaner fixed sites can look, and partially because I’m a print designer, so my web design skills blow.
As to the blank margins causing distractions on fixed pages, I don’t find it distracting it all. I think that they make the website look clean and simple when done right, as well helping to frame the information that you want to be seen (on center-fixed ones at least).
But, it does depend on the client and the content, like you said.
When I do get around to designing a website for myself (ha), it will definitely be center-fixed.
Kate Nickerson on Tue, 17th Feb 2009 9:52 am
I definitely agree with everything you have said in this article. You have convinced me to make a center-fixed layout when I go to make my online portfolio. For most websites, less is more, and a simple layout is preferable and I think fixed width accommodates that very nicely! Thanks!
Greg on Tue, 17th Feb 2009 10:03 am
I tend to agree with you text should never be fluid and I love how amazon uses the extra space for more columns of products.
In my mind, adding, not stretching, more content is the only way fluid layouts work. Yet, you still have to be careful that you don’t get content overload.
My 2 cents.
Rob on Tue, 17th Feb 2009 12:51 pm
Unfortunately fixed width designs degrade horribly on limited-resolution devices, such as mobile phones.
There’s a clear assumption in your post that people will always have screen resolutions equal to or greater than the design width. I think this is invalid.
Cheers,
Rob
Greg on Tue, 17th Feb 2009 1:56 pm
@Rob
I agree that you should be thinking about mobile browsers when developing a site, but I think it would be incredibly difficult to support all the possible sizes with one layout fixed or fluid. And would at least require separate stylesheets, if not an entirely different document structure.
Jack McDaniel on Tue, 17th Feb 2009 3:42 pm
The primary reason I use fixed width designs is that there is a great deal of research that says we read lines of text best when they are of a limited width. Wikipedia is a good example. I find I have to narrow my browser to get a good read.
Rob on Tue, 17th Feb 2009 4:15 pm
@Jack
At least the fluid design gives you (the user) the choice. A fixed width design removes the user’s choice and vests it with the designer.
Can a designer claim always to know what’s best for the user, or indeed anticipate what device the user will be using to view the page?
Just tried wikipedia on my phone, and it doesn’t render satisfactorily on the small screen! Clearly the worst of both worlds
Cheers,
Rob
Keith on Tue, 17th Feb 2009 7:57 pm
I definitely agree. Fluid designs are rarely as pleasing on the eye and are much more trouble to build. Mobile devices are a more interesting predicament (and I admit, I’m swayed by my iPhone’s excellent browser to pay less attention to the issue than I should). I generally choose to favor a better full-browser layout that simply degrades well.
Tristan on Tue, 17th Feb 2009 8:32 pm
There is nothing center aligned about this site, regardless of the width of my browser there is a solid 2 inches of grey to the left.
Personally, as both a coder and a viewer there is nothing more annoying than requiring me to use substantially more real estate than is required.
That means if I want to view the cruft on the right end i have to dedicate 3/4 of my screen to the browser. 1/4 of my screen is grey. That is a waste.
If i open facebook, twitter, flickr or many other sites the margin will collapse on each side as it should.
The simple fact is that you prefer a flawed fixed width system “because it is easier than learning how to do it right”
Trey Brister on Tue, 17th Feb 2009 8:36 pm
What about em based elastic layout.
That is the best of both worlds.
It is neither fixed or fluid.
If you size the body at 62.5% then specify every other measurement in ems. Just drop a decimal point one place from pixels. Example 1000px = 100em or 6px = .6em
Easy conversion, zoomable, keeps proportion with text resize why not elastic?
RawThinkTank on Wed, 18th Feb 2009 4:52 am
Just because loosers cant do it, they all agree with each other, thats a shame.
instead talk about tools that make it possible,
No but wait, u all are not programmers for sure.
chicgeek on Wed, 18th Feb 2009 6:41 am
@Kate – I entirely agree. Though I know I can be prone to a too-minimal style, I almost always believe that simplification is the key to improvement.
@Rob – I didn’t consider mobile devices in this article – my focus was on laptop or desktop users. As Greg said, dedicated stylesheets are a must if you’re designing for mobile phones. In that case, I would agree with you and opt for fluid width – so much style can be lost in that medium anyway.
Also, there are some very good sites with dedicated mobile designs, even though Wikipedia isn’t one of them. The aim is to discover our own personal best possible system of design, not looking at what is out there. I’d rather strip the user of the choice on standard screens and… well, it’s all up there in the article anyway.
@Jack – Exactly! It’s why newspapers are easy to scan – the column method goes far. And to tell the truth, on webpages you would rather have someone merely scan through content than not read it at all.
@Tristan – First, I didn’t design this site, and I’m not sure exactly why you are saying. Second, every designer is entitled to their own choice. I feel I made good arguments for both fluid- and fixed-width and made my decision from there. It’s refreshing to have a differing opinion. Though I assure you, I have designed “correct” fluid sites in my day, too. It is through my experiences with both that I made my choice.
@Trey – If it is elastic, it’s still fluid (or liquid, or proportional, or whatever you call this rose), even if you use side margins. You’re entirely right: a fluid site doesn’t have to entirely fill the width of a screen and can even use text resize. But other issues still exist, including control over varying displays.
Tim on Wed, 18th Feb 2009 12:38 pm
In the day of widescreen monitors, handheld clients, and constantly changing viewports — your view is just outright wrong. Fixed-width designs are the realm of the lazy and “artistes” who are more interested in eye candy than actually having a readable site.
Workpost Foreman on Wed, 18th Feb 2009 1:13 pm
I like the best of both worlds, fluid or elastic layouts with fixed (or at least limited) width content inside. Like the previous posters have said, Amazon does it well, utilizing the entire page in a way that is not annoying..
Julien on Wed, 18th Feb 2009 1:37 pm
The same question was asked on StackOverflow this week: http://stackoverflow.com/questions/547000/why-would-you-choose-a-fixed-width-design
PJ on Wed, 18th Feb 2009 2:34 pm
Fixed width websites suck. They all look like crap on my 30″ monitor, wasting tons of whitespace for no good reason. Even on my 24″ monitor, I don’t appreciate having to scroll down 3x in a fixed width website to read what would fit in one fluid-layout screen. If you want to do fixed width, why not just go all the way and publish your entire site as a PDF or as pages that are really just one big image?
Also, don’t write off mobiles as a one-off special case; the point is that you as a web designer have zero control over the browser’s size or the screen size, so you need to make a site that’s workable in all of them. This month mobile phones are the ‘different, special’ platform, but next month it’s going to be netbooks, and next year it may be projectors or HUDs or what have you. To say nothing of the needs of visually impaired users and people who use text browsers like lynx or w3m.
Yes, it’s more difficult. That’s what they pay you for.
john on Wed, 18th Feb 2009 4:42 pm
The problem with fixed width is that the world doesn’t use the same width you use. Different people have different sized fonts and screens. Other people have mentioned mobile devices, so I’ll mention those of us who are old or myopic enough to near larger fonts. I hit Ctrl-+ a few times in Firefox on most sites, which reduces some fixed width sites 3-5 words per line, which is far too few to read.
Anton Jenkins on Thu, 19th Feb 2009 10:38 am
I have to say I agree wholeheartedly with you on the merits of fixed width versus fluid. However, if you’d asked me 12+ years ago (not that I was doing web development back then!) I may have swung more towards fluid because back then screen resolutions were much lower and if you had precious screen real estate you wanted to take advantage of it.
These days I think most people are viewing with screen widths of at least 1024 pixels which is ample space for a nice, readable design with plenty of room to let it breath. And as has already been pointed out – we don’t want lines of text stretching on forever!
As for mobile devices – if you are expecting a lot of mobile traffic then design a mobile version of the site. If it’s that important then surely it warrants the investment in time and it means you don’t have to compromise your main design. Win win.
real programmer on Thu, 19th Feb 2009 1:12 pm
Real programmers create fluid sites.
Wannabes (artistic types) create fixed width sites.
PXLated on Sat, 21st Feb 2009 3:57 am
I think if you are a “control freak” (most ex print designers are) you’ll always be locked into a fixed width even though it’s not ideal, in fact it’s boring as hell. The biggest inhibitor (for those that want to set their designs free) has been the lack of support for max/min widths. As soon as IE6 dies, that will go away. Learn to use percentage widths and you can also control text width to a certain degree, or a combination fixed/percentage.
I have to agree with some others here, always using a fixed width is the lazy designers layout of choice.
Wyatt on Sun, 22nd Feb 2009 8:58 am
“The Web is designed as a universal space. Its universality is its most important facet. I spend many hours giving talks just to emphasize this point. The success of the Web stems from its universality as do most of the architectural constraints.
The Web must operate independently of the hardware, software or network used to access it, of the perceived quality or appropriateness of the information on it, and of the culture, and language, and physical capabilities of those who access it.”*
Tim Berners-Lee, who you may know as “the man who invented the web,” said this in 2004. He’s still talking about it. Making a web page with any width that isn’t entirely dependent on the size of the screen is, by definition, breaking this very fundamental rule.
And so I will say:
The size of EVERY element on a webpage, without fail, should be dictated by the size of the text the user sees. Increasing text size should adjust the width and height of the elements they’re part of and, if necessary, create line breaks that expand the element’s area vertically.
Notice how differently https://fsi.informatik.uni-erlangen.de/dw/ and http://www.cnn.com/ behave after you’ve incremented the text size upward a few times. At no point does the former ever become completely unusable, and no actual content ever obstructs by covering any other content. CNN, by contrast, doesn’t just become hideous (the way zMogo does when you increase the text size)– it actually becomes completely unusable because too many things interfere with one another.
*Link: http://www.w3.org/DesignIssues/TLD
PXLated on Sun, 22nd Feb 2009 6:25 pm
Boy Wyatt – You hit on one of my big pet peeves. Sooooo many sites, fixed or flex, break on text enlargement. Everything should stay within it’s containing box (extreme enlargement will break all however). I’m amazed at how many so-called web developers blow their code on this.
I have a MacBookPro-17 with the high-res option so am constantly enlarging text. 25-30% of the sites I visit break. It’s like they’ve never tested this, never considered accessibility, have no quality control checks.
gareth hunt on Mon, 2nd Mar 2009 2:24 am
Is it just me or has the trend for misleading article titles really taken off in the last few months? There is a reason why there aren’t long-standing arguments over whether a site “should” be fixed, fluid, liquid, scaling, elastic, fantastic, whatever. It’s because you use what is appropriate for the job, for the content, and so one week you might make a liquid site and the next a fixed site. I just don’t get the point of this article other than basically repeating what is pretty obvious.
The real issue is people who make fixed width sites but declare far too many vertical dimensions in pixels and end up with a site that completely breaks with the slightest bit of text resizing.
David Lewis on Wed, 4th Mar 2009 6:58 am
Just like a designer “the sites I design aren’t content-heavy anyway.” so if you’re making a useless pretty site that does nothing – go fixed width. If you’re making a proper website with content (e.g. wikipedia ) go fluid.
Tom on Fri, 16th Oct 2009 10:44 am
The way it SHOULD be looked at is really that it depends on what the site is and how much content you have. What is the point of having a fluid site if you do not have the content to utilize it? I would rather see a centered fixed width with a really creative use of the sides. On the flip side what good is a 600px wide website that scrolls forever simply because you cannot create a fluid site?
I cannot stand when people resort to name calling because someone has a different opinion than their own. Like life itself, there is no definite right or wrong answer. Everything has its place and usage.
Bill on Fri, 16th Oct 2009 7:29 pm
I hate sites that aren’t fixed width. They annoy the crap outta me…