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.

generic avatar
Justin Kistner | October 30, 2008

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.

generic avatar
Matratze | November 24, 2008

I think that widescreen monitors is one reason for the new (old) fluid design trend.

generic avatar
Jo | November 25, 2008

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.

generic avatar
Vibrationsplatte | December 01, 2008

Is the green colour that what you name fluid-width design?

generic avatar
Suchmaschinenoptimierung | December 02, 2008

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!!!

generic avatar
Rezepte für Diabetiker | December 03, 2008

You understood it right. Site size depends on the resolution of your users grafic card.

generic avatar
Types micro | December 04, 2008

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 :)

generic avatar
Melanie | January 02, 2009

very good,

generic avatar
Martin Schmitt | January 02, 2009

Very worthful information.

generic avatar
Wandschablone Stencils Wandtattoos | January 04, 2009

very goood

Leave Your Thoughts:
Comment with Open ID:
Or, enter your information below: