October 29, 2008
Are fluid-width designs making a comeback?
Back in ye olde web design days when everyone was using tables for their websites it was pretty common to see a website that stretched with the browser window. Then we got all semantic and moved to mostly fixed-width designs.
Despite the current trend of fixed-width websites, I have started seeing quite a bit more fluid-width sites popping up on the internet. What’s more? I like it. Here’s why.
FLUID VS. FIXED
Before we get into my reasons, I want to clarify what I mean by fixed-width and fluid-width.
A fixed-width website has a specific width in pixels. All the content fits into a container of this measure. The container may or may not be visible. This is the most common type of layout being used right now.
On the other hand, a fluid-width website uses a percentage measure rather than a pixel measure to specify widths. This means that as you resize the browser window, the design will resize with it.
USE THE RIGHT TOOL FOR THE RIGHT JOB
There is a place for fluid-width, and it’s not on every site. In fact, on most sites I would recommend a fixed-width design, especially those that have lots of content to read such as blogs and online publications.
The exception here is for web apps. Web apps have very different needs from those of a blog or company website. Web apps are true interfaces, and just like any application it should maximize the space available.
PRACTICAL EXAMPLES
You may have been using web applications for a while and didn’t realize that it’s using a fluid-width design. Here’s just a few examples I found:
Google's Reader Application
37signals' Basecamp Application
Apple's MobileMe Application
I think MobileMe in particular is a great example of how desktop apps are starting to crossover onto the web. As you use the web version of Mail, or Address Book it feels like a true application, and I think much of that is because it’s designed as a fluid-width interface.
I hope this has opened your eyes to this trend, and what’s possible with fluid-layouts. I really hope to see more web applications adopting this technique in the future. I know i’ll be advocating for the use of fluid-width layouts with my own clients where appropriate in the future.
Great round up and insights here, Josh. I’d love to know more about how to make a fluid design with some minimum width limits.
I think that widescreen monitors is one reason for the new (old) fluid design trend.
Fluid width maybe great for web apps but as you said, it gets pretty tough when there is a lot of text to read. Take wikipedia as an example. I often have to resize my browser window when reading articles.
Is the green colour that what you name fluid-width design?
Did I understand it right? The size of my site could depend on the resolution of the monitor / graphic card of my site visitors??? If yes, that’s great!!!
You understood it right. Site size depends on the resolution of your users grafic card.
Yeah, i have also been using fluid-width for a couple of my sites. The screen resolution is still different among internet users, so its not really a comeback for me :)
very good,
Very worthful information.
very goood