Due to different screen resolutions, the user experience browsing a website might be different. Is it better to layout the website with a fixed width? (and if so should there be different static widths for standard resolutions?) Or should a website always be laid out in variable width?
Answer
I don't think there's an easy answer here, because, ultimately, it depends on what you're building and who you're building it for. Both fixed width sites and variable width sites have their advantages and disadvantages.
One thing I should point out here, I will not be talking about mobile experiences for fixed / fluid sites, because mobile sites are best when the design is specific for mobile devices, not a port of a desktop site to a mobile platform.
Fixed Width - Advantages
A fixed width site is a more consistent experience and is faster to develop than a variable width site. It also allows for the designer to have more control over the presentation because you can set hard values for widths, line lengths, typography sizes, etc. It's also ultimately easier to maintain than a variable-width site.
Fixed Width - Disadvantages
On the other hand, fixed width designs begin to fail when edge cases appear. Right now, it's very common for people to design sites for a 1024px width resolution monitor, but there are still people out there with lower resolution machines. Right now, I'm working on an application that was designed using a 960px grid; I took a look at the analytics today and noticed 3% of the users were on 800 x 600 monitors, and about 5% total were at resolutions below 1024 x 768. Those users are probably getting a pretty bad experience because the site is fixed width.
Fluid Width - Advantages
Fluid width allows the design the expand based on the user's settings; the design adapts to them, which is a good thing. This allows the site to maintain proportional negative space, so the site never feels too cluttered or too open (unless it was specifically designed that way).
Fluid Width - Disadvantages
Unfortunately, fluid width designs aren't impervious to edge cases either. When widths get too skinny or too wide bad things can happen, especially with text. Line lengths that are too short or too long are essentially unreadable. Additionally, many forms of media, such as images or Flash objects, are difficult to scale in fluid-width designs; IE requires javascript to resize the images, otherwise they get pixelated.
Responsive Web Design
A few people have shown examples, but not referred to this technique by name yet. Ethan Marcotte recently coined the term to describe fluid layouts that can change completely based on a user's screen resolution (see details here). This is a hybrid of fixed width and fluid width - it allows you to set minimums and maximums so that the media or line lengths don't get out of control, and it also allows for the design to adjust to the user's settings. Of course, this technique also has its own advantages and disadvantages. While provided a layout specifically picked for a user's settings, this type of site is difficult to develop. Not all browsers support the media queries required to do this. Plus, you are essentially developing multiple layouts, extending the amount of time it takes to build and maintain.
I believe it's impossible to just lay out a blanket "Always use this" or "Never use this"; I would say that you should always evaluate your needs before making a decision. I feel for the majority of cases that a fixed width layout will serve your purposes, but that a fluid or responsive layout can provide a much better user experience, just at the cost of extra difficulty.
No comments:
Post a Comment