fixed-width vs fluid-width websites
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."
Comentários