Fixed vs. flexible design is one of the main arguments of the modern web design era. Much of the argument derives from the fact that IE (Internet Explorer) did not support the min- and max-width properties until version 7. As of this date version 6 and lower are still in such high usage that you cannot count on these properties to work. So the question “fixed vs. flexible” is asked at many a new design meeting.
What is fixed design? Fixed design is essentially defining a width on a page – no matter the size of the browser window. You can find fixed designs at sites like Helium, CNN and Yahoo. A typical fixed layout has containers, text, images and most other elements defined in pixels.
The main benefit to designers in using fixed layouts is that they have total control over the design. Unlike traditional media outlets – like newspapers and magazines – the web can be viewed through a large variety of devices from cell phones to PDAs to computer screens to widescreen HDTVs. With traditional media you always know how your page is going to appear. With the web, the same page viewed on a cellphone and a computer can appear vastly different – or even 2 computers with different screen resolutions. Fixed layouts give a designer more control over how their content is viewed. Finally, because you are defining the layout of the page you have more freedom with background images – if you notice the examples above all but CNN make extensive use of background images for design.
There are 2 main faults of fixed designs. One is that users with large screens and resolutions viewing sites with small widths have lots of wasted space. This is a bad user experience because you are dictating to the user how they should experience your site. The second is that if a user is using a smaller screen or resolution some of your design might flow outside the window – causing the dreaded horizontal scrollbar. This also creates a bad user experience.
What is fluid design? Fluid design essentially allows the user to decide the how the page looks based upon the size of their browser window and display settings – the page “flows” (hence fluid) to fill the entire available space. Fluid designs can be found at sites like Google, Wikipedia and Reddit. A typical fluid layout has containers, text, images and most other elements defined in ems or percentages.
The main benefit to designs using fluid layouts is that they can use all of the space available to them. The philosophy is that you can’t predict the user’s setup so you want to make your design as adaptive as possible in order to increase the user experience. A fluid layout puts the control of the design in the user’s hands.
There are 2 main faults with fluid design. One is that if someone has a very large/small screen or resolution your site can appear “wonky” – extremely long/short lines of text and distorted containers. The second is that fluid design makes it extremely hard to use background images because of container distortion. They require vast amounts of testing in order to function properly – if at all. In the examples above none of the sites use background images extensively – which severely limits your design creativity.
The main benefit of hybrid/elastic is that it gets some of the benefits of both fixed and fluid – users and designers split control over the design. It’s main fault is that like any hybrid it doesn’t do either of those things as well as the original.
So which is better?
If you haven’t figured it out by now, there is no right or wrong answer. The correct choice depends on the purpose of your site and your design preferences. The sad fact is that any choice you make is going to alienate some user. The old saying is that “You can please some of the people all of the time and all of the people some of the time, but you can’t please all of the people all of the time.”
Typically if you have a site with shorter blocks of text and/or you are more Web 2.0 you lean towards a fluid design – utilizing large font sizes to lower the impact of some of it’s faults. If you have a site with long blocks of text – like a news or article/blog based site – then you lean towards a fixed width design.
Random Tidbit: Speaking of design what about Time.com’s 50 coolest websites?
January 28, 2007 at 10:39 am
I will soon, hopefully, be undergoing a new project for a relative of a very close friend of mine. In doing so – since the potential clients are not well versed on the Internet, web 2.0 and the cutting edge – I decided to find a series of templates that would outline several different ideas and concepts. It also gave me the idea for this post. Basically the following list outlines 10 well done templates(or in the case of Zen Garden entries, simply designs) that you, potentially even as an experienced designer, should look to for inspiration, ideas and thievery. Enjoy.
10. Nautica01 – a simple, clean design. Smaller width but one of the things I like most about this is the left navigation and the rollovers they do using CSS.
9. The Holy Grail – basically just a wire-frame but a design I’ve stolen heavily from. Not only clean and compliant – but SEO friendly as well since your content comes first in the markup.
8. Deep Thought – a Zen Garden design. A good example of disjointed design in that the containers don’t line up. A good concept not utilized enough in web design.
7. Pret-a-porter – another Zen Garden design. The only example of a horizontal design. This looks and works awesome in complaint browsers and degrades well in IE. Horizontal design is not used much in web design – but when done right it can be very powerful.
6. Ballade – a final Zen Garden design. The way they make the graphics – the steps, bridge, etc – flow from container to container – simply brilliant. A side mention for Zunflower since we’re talking about graphics – the shading gives the containers depth, making it a very powerful visual design.
5. Plain 1.0 – a Six Shooter Media design. I actually modified this for one of my first home page designs and learned a lot from the skills of this designer. Very talented.
4. Andreas01 – an Andreas Viklund design. Now hosts his templates on OpenDesigns.org, but since I didn’t see this one on there it’s from OSWD. Simple, clean, elegant – great dropdowns and rollovers, excellent use of a header graphic, nice use of background graphic to give depth and could easily be adapted with the holy grail techniques to shoot the SEO up. So, by combining concepts from the two, you’d have an standards compliant, search engine optimized and graphically beautiful site.
3. Andreas09 – another Andreas Viklund. If you’ve looked through the WordPress themes, you might recognize this one. Not only does it change from a 2 column to 3 but it’s also preloaded with 6 color schemes – my personal favorite being black.
2. Plain 2.0 – another Six Shooter Media design. An update/revision on 1.0. Bolder graphics, excellent graphics use on the containers, excellent rollovers on the side navigation, and good font and font color choices. Some web 2.0 flavor and methods as well as a bonus in a skip to content accessibility link.
1. Thin Green Line – a final Six Shooter design. This and Plain 2.0 could switch everyday depending on what mood I’m in with this currently being my favorite of his templates. Overall, it’s not as nice a design as 2.0 but the top navigation with the animated gifs has just got me hooked right now. As with the other 2 Six Shooter designs this could use some holy grail combination to push the content first and improve the SEO. I would love to see what he could come up with just stealing the navigation from this and replacing only that part of the design on 2.0. I just might have to try that in the future.
For more free templates, check out my del.icio.us.
Random Tidbit: Found this awhile back. Apparently web2.0 is catching on since even some religious sites have used methods from it. Very interesting.