Even though most of the Web today has gone to using liquid layouts (also known as “responsive design”), the fixed width “ice” layout style is still quite popular. Today, I’ll demonstrate both layout styles, as well as give advice on which style is best for your website.

Liquid Layout/Responsive Design

Click for Liquid Layout Interactive Example in New Window

Pro: Expands and contracts to fit browser width

Whatever size your user’s screen is, whether it’s a smartphone, tablet, or laptop/desktop, the liquid layout style will stretch or compress to fit it. You don’t end up with acres of space to either side of the layout, and you don’t end up having to scroll side to side to see all the content on a tiny screen.

Con: Distributes content unevenly and haphazardly

If your reader has a really wide screen, they’ll be jerking your head back and forth to read the long, extended one line of content going clear across the layout. You also might have large blocks of white space between layout elements, giving the design a chaotic look.

Ice Layout

Click for Ice Layout Interactive Example in New Window

Pro: Allows for perfectly-spaced designs

No need to worry about whether your content will be interrupted by huge blocks of uncontrollable white space! Ice layouts give you the ability to perfectly control where things will be placed, whether it’s images, lists, forms, content boxes, or anything else.

Con: Requires side-scrolling or zooming for smaller screens

If your user is viewing your site with a tablet, for instance, and you’ve created a beautiful desktop design, an ice layout will require a lot of zooming in and out to read the content. It’s annoying and time-consuming, and most users simply won’t bother.

Which Kind Should I Use?

Summary

Though liquid layouts seem to have won the day for now, you can most certainly still use ice layouts in this age of responsive design. You just have to know when to use fixed-width and when to use a variable-width style!