Resizing: Fixed, Fluid, or Responsive Layouts

Back when we were looking at layout blocks done with pencil and paper, I explained that the outer rectangle we were designing within was the containing block. In print design, the containing block is a physical object like a business card or a billboard. On the Web, our container is the browser window. Should the design fill the browser window, or should it have a set width? This decision is one that has plagued web designers for hundreds, if not thousands of years—all the way back to the days when we used tables and spacer.gif files to lay out web page content. Okay, maybe not thousands of years ago, but this is a long-standing debate nonetheless.

Fixed Width

If you’ve started your layout with the 960 Grid System that I talked about earlier, chances are you’re working toward a fixed-width layout. These designs are wrapped with a div that’s given a pixel-based width (say, 960 pixels), and centered within the body tag using margin: 0 auto;. If the browser window is wider than 960 pixels, you’ll see the body element’s background to the left and right of the container; and if it’s narrower, you’ll have a horizontal scrollbar. Fixed-width layouts are easier to design for—and maintain—because you’re essentially building exactly what you design in Photoshop or your design program of choice. The graphic below shows a similar layout structure as fixed and as fluid in the same width of browser space:

Fixed layouts

Fluid layouts

Fluid Width

A fluid or liquid layout is designed with percentage-based widths, so that the container stretches when you resize the browser window. These take more thought to plan, as you have to foresee problems that might occur at every possible width. Sometimes pixel-width columns are mixed with percentage-based columns in a fluid layout, but the idea is to show the user as much horizontal content as will fit on their screen. Typically, fluid layouts take advantage of the min-width and max-width properties of CSS, ensuring the container doesn’t become ridiculously narrow or wide.

One reason some designers reject fluid layouts is because they think it impedes them using a grid to create their designs. There are several resources available for designing fluid layouts on a grid, including a fluid adaptation of the 960 Grid System. Ultimately, though, the decision to use one type of layout over the other should really be determined by the target audience, and the accessibility goals of each individual website. The pros and cons of each layout type are fairly well-defined, as the table below outlines:

  Pros Cons
Fixed width
  • gives designer more control over how an image floated within the content will look

  • allows for planned whitespace

  • improves readability with narrower text blocks

  • can appear dwarfed in large browser windows

  • takes control away from the user

Liquid width
  • adapts to most screen resolutions and devices

  • reduces user scrolling

  • challenging to read when text is spanning a wide distance

  • harder to execute successfully

  • limits or imposes on whitespace

With these pros and cons in mind, I’ve designed more fixed-width layouts than liquid. I like having control over how the content will display, and working with the background space. On the flip side, I sometimes enjoy the challenges that liquid layouts bring to the table. But, regardless of personal preferences, it’s important to put the needs of your client first. If you’re deciding on the width of a fixed-width layout, you have to think about the audience for which you’re designing, and create a layout that meets the needs of those users.

An Alternative: Responsive Layouts

It’s been said that for every rule, there’s an exception. That’s usually true in the web world, and designers have come up with many variants and hybrids of fixed-width and fluid-width layout structures. I’ve seen articles recently that list up to ten different layout types. For the purpose of this chapter, however, most of those could be categorized as either fixed or fluid. On A List Apart article, though, introduced a novel layout type that I think we’ll be seeing a lot more of. The article was titled “Responsive Web Design” and it was written by Ethan Marcotte.

Rather than repeat the entire article here, I highly recommend that you check it out. If I had to name this layout technique myself, I would call it the Omnipotent Mercury Morphing Methodology, but that’s probably why I didn’t come up with it. The idea is that as the mobile market makes browser window widths more and more inconsistent, the need for our layouts to be fluid and adapt to different widths is increasingly vital. The technique takes advantage of some fancy fluid scaling and CSS3 media queries to completely change the layout as it hits certain width thresholds. The graphic below shows screenshots of Ethan’s example at three different browser widths.

A layout that adapts to mobile, desktop, and JumboTron

Ethan’s responsive web design (or Omnipotent Mercury Morphing Methodology) is a great solution to a problem we’ve yet to discuss: screen resolutions, which we’ll look at next.

The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book (the second edition of which is out now). This is the eleventh part of the first chapter.

If instead color is more your thing be sure to check out the existing digitization of the color chapter here on Design Festival.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.tyssendesign.com.au John Faulds

    challenging to read when text is spanning a wide distance

    Not if you’ve set a max-width on the layout to prevent line lengths getting too long.

    • http://twitter.com/patricksamphire Patrick Samphire

      There’s always going to be an optimal line length for a particular design. The moment you make it fluid, even with max and min limits, you’re going to diverge from that. IMO, that makes any significant fluidity problematic. Which is why a responsive design, with very limited fluidity, gives the best of both worlds.

    • http://pulse.yahoo.com/_OK5DAACDTIDQWAS5PYVHACSRWE Barbra Barr

      I ČĂŃŤ βĔĹĨĔVĔ ŤĤĨŚ!! МĔ ĂŃĎ МŶ ŚĨŚŤĔŔ ĴÚŚŤ ĞŐŤ ŤŴŐ Ĩ-РĂĎŚ ŦŐŔ $42.77 ĔĂČĤ ĂŃĎ Ă $50 ĂМĂŹŐŃ ČĂŔĎ ŦŐŔ $9. ŤĤĔ ŚŤŐŔĔŚ ŴĂŃŤ ŤŐ ĶĔĔР ŤĤĨŚ Ă ŚĔČŔĔŤ ĂŃĎ ŤĤĔŶ ĎŐŃŤ ŤĔĹĹ ŶŐÚ.
      ĞŐ ĤĔŔĔ, www.tinyurl.com/3qa436v

  • UberMedia Design

    Very good post, there are interesting things to read, greetings to all designers http://www.ubermedia.com.ar

  • Fencster

    Love it. Great article

  • Anjum Mudassar

    nice description related to fluid layouts has been provided
    superb website design

  • http://www.modred.co.uk Scott

    I usually design websites as fixed layouts but I’ve been looking at fluid layouts for a new design – and this page answered a lot of questions. Thanks!

  • http://www.printingray.com/sticker-printing.html custom stickers

    I love it quite definitely. I
    read it so properly and I will recommend to my best mate that’s just in search
    of it and I am sure it helps them considerably.

  • Ranjit Sachin

    nice article

  • http://facebook.com/sherylideas Candy

    This is an awesome article!! I feel like I learned soo much!

  • http://titansturf.in Neeraj

    This is an amazing article.Loved it.
    Would be using this for a long time to come.

  • Pingback: Jared Hilliers » 2011, the year of the tablet?

  • http://www.u2commerce.com Sara

    Hi Jason, great views. Thanks.
    I am presently working an a layout which I call the “The Binary”. I am taking the responsive layout to the next level. This, I beleive, is the way to go.
    So far, no caveats have been revealed. After all The web is binary!