Redesign Chronicles: Layout Behavior

I will kick off this recurring series with an overview of the basic layout options we have at our disposal. It’s nothing especially earth-shattering, but it’s an important issue to think through properly and just because it seem so basic few do. You might already have heard it a thousand times, that “the web isn’t print”, until your ears fell off. But it’s so true when it comes to layout. In print you can easily sketch up a few layout solution to pick from, based on the page size, proportion and content, and call it a day. The web is something completely different as a medium: the user has complete control over the browser viewport size and font size.

Y’see, I always assumed that the prevalence of fixed-width sites was the result of an informed decision. I imagined that designers weighed up the pros and cons of fixed and liquid design and then, after careful consideration, chose to build a site with a fixed width layout.

Now I’m beginning to think that this scenario is wishful thinking. Could it be that most designers are simply making the decision based on what everybody else is doing?

Well, Jeremy, my plan is at least in this redesign chronicle to reason myself into an informed decision. So let’s take a look at the board…

Percent (fluid/liquid)

By defining widths of elements in percents the layout will resize when the user resize the browser viewport (the layout is what we call “viewport dependent”). The advantage is that it is possible to have the layout fill as much as possible of the browser viewport no matter what at resolution the users screen is or the size of the browser window itself.

Percent (fluid/liquid) layout.

  1. #wrap {
  2. margin: 0 auto;
  3. width: 70%;
  4. }
  5. #lipsum1 {
  6. float: left;
  7. width: 61.8%;
  8. }
  9. #lipsum2 {
  10. float: right;
  11. width: 36.2%;
  12. }

This kind of design give lots of control to the user too decide how he or she want to experience the site.

Liquid design is an example of the advantages of the Internet over any other medium.

The usual argument against percent based layouts is the issue of very wide screens and that lines become to long. Something I think Roger summed up pretty neatly:

A common argument against fluid layouts is that lines can become so long that readability is decreased. Yeah, well that depends on how wide you make your browser window, doesn’t it? I just don’t get why some people are so hell-bent on letting their browser window fill the entire screen. I think that “maximise me”-button thing in every Windows app is to blame for that. It’s just a little bit too convenient. Would you still push it if you had a 30″ Apple Cinema Display with a resolution of 2560 by 1600 pixels? Really? Of course not. You’d probably be using that monitor with a Mac, and extremely few Mac users have the maximise bug.

Demo: Percent

Pixel (fixed-width)

In a fixed width layout all elements have their width defined in pixels. The layout become “viewport independant” and will not be resized, instead a horizontal scrollbar will appear when the layout become to wide for the viewport. The “advantage” is pixel perfection for layouts that need to match up several elements of raster graphics (JPEG or PNG images), with the disadvantage of being “optimized” for a certain resolution (say 800 pixels or 1024 pixels width).

Pixel (fixed-width) layout.

  1. #wrap {
  2. margin: 0 auto;
  3. width: 760px;
  4. }
  5. #lipsum1 {
  6. float: left;
  7. width: 500px;
  8. }
  9. #lipsum2
  10. float: right;
  11. width: 250px;
  12. }

Demo: Pixel

EM (elastic)

An alternative to fixed-width design is a so called elastic design using EMs instead of pixels:

A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size.

In the elastic design all elements have their width defined in EMs, the layout is still “viewport independant” and will not be resized when the viewport size changes just like fixed-width layout, but, the layout will resize proportional when the user changes font size.

EM (elastic) layout.

  1. #wrap {
  2. margin: 0 auto;
  3. width: 70em;
  4. }
  5. #lipsum1 {
  6. float: left;
  7. width: 42em;
  8. }
  9. #lipsum2
  10. float: right;
  11. width: 26em;
  12. }

Demo: EM (elastic)

EM/Percent I

If we can improve the pixel-based fixed-width layout to become a zoomable EM-based elastic layout, wouldn’t it be nice to also combine the advantages of percent-based liquid layout and the EM-based?

As you may already know, after playing around with the percent demo, only the text get resized when changing the font size, not the layout proportions in relation to the text. The solution to this problem is kinda obvious when you first see the code (at least I had a “Why didn’t I think of that!?” reaction at the time).

  1. #wrap {
  2. margin: 0 auto;
  3. max-width: 70em;
  4. }
  5. #lipsum1 {
  6. float: left;
  7. width: 61.8%;
  8. }
  9. #lipsum2
  10. float: right;
  11. width: 36.2%;
  12. }

The layout essentially become a two-in-one: When the viewport width is greater than the layouts maximum width it’s a regular EM-based elastic layout, and when the viewport is smaller it will adapt and become a percent-based liquid layout. The best of both worlds, that also solve the “maximise bug” previously lamented by Roger.

Demo: EM/Percent I

EM/Percent II (telescoping)

So where to go from here? Is it possible to improve the basic layout solution even more? Yes, by taking advantage of max-width on more than one element.

EM/Percent II (telescoping) layout.

  1. #wrap {
  2. margin: 0 auto;
  3. max-width: 80em;
  4. }
  5. #lipsum1 {
  6. float: left;
  7. width: 61.8%;
  8. max-width: 42em;
  9. }
  10. #lipsum2
  11. float: right;
  12. width: 36.2%;
  13. max-width: 26em;
  14. }

It is possible to create something I like to call a telescoping layout by defining a maximum width not just for the wrapper also for the two columns. And by having the maximum width of the wrapper being larger than the sum of the maximum width for the columns a flexible gutter is created. This gutter will only appear and expand when the columns have already reached their maximums, making it possible for the layout to fill an even larger viewport. Whitespace is important, you know.

Demo: EM/Percent II (telescoping)

EM/Percent III (adaptive)

If telescoping is as far as we can take the layout with CSS there’s still room for enhancement via JavaScript. Note that I call it an enhancement: it’s no replacement for CSS and you still need a solid layout before you can begin to enhance it.

The enhancement in question is Cameron Adams’ Resolution Dependent Layout, a script that let you switch stylesheet depending on the size of the viewport. An idea also expressed in a recent A List Apart article “Switchy McLayout”. However, one common complaint is that it will mean more work that no client is willing to pay for. Personally, I find the complaint moot if such switching schemes are used correctly and planned ahead. The point of the resolution dependent stylesheets is not to replace the non-enhanced CSS — just add to it. My personal approach is therefore somewhat less radical than the Switchy McLayout example.

So what can we do with it? First of all there’s the issue of extreme cases, like a very narrow or very wide viewport. In the later case, if your page content is suitable, you may want to lay it out in a more horizontal manner. For example a financial page, with lots of graphs, tables, tickets and boxes with information, can benefit from a wide layout that minimize any vertical scrolling. While the opposite is true for narrow viewports, benefitingfrom a rearranged vertically oriented layout is needed and dropping columns all together. And for resolutions in between these extreme cases the changes we do can be bit more subtler, for example changing the lead (a.k.a. line-height) when lines of text start to get a little bit to long.

Another argument against this practice is that you shouldn’t rearrange the design because that will only confuse the users. I believe that’s usually a non-issue since it assume that all users will constantly fiddle with the browser viewport size. The point of this enhancement is to primarily make a design suitable for very narrow or wide screens, and I believe that anyone with a default 320 pixel wide viewport will not resize it to 1280 pixels simply because that’s the screen resolution of the device. Most people stick to their default, either being forced to it (mobile, PDA, TV) or by choice (Mac-users decide on a convenient windows size and Windows-user press the maximize button), that they rarely change. If they change it, it’s usually because the layout wouldn’t adapt to it.

EM/Percent III (adaptive) layout.

The layout is made up by several CSS-files: The basic stylesheet used by everyone (the adaptive.css in the demo) and a set of resolution dependent stylesheets. As a starting point for development they are divided according to the following table inspired by Marc’s article:

Resolutions
Max width Name Stylesheet
< 320 PDA adaptive-pda.css
640 TV adaptive-tv.css
800 OldCRT adaptive-oldcrt.css
1024 CommonTFT adaptive-commontft.css
1280 Wide adaptive-wide.css
> 1280 SuperWide adaptive-superwide.css

Note that when the stylesheets get switched the styling of the page isn’t reset, the rules in the new stylesheet are simply added to the page! Because of that, to minimize confusion and make development simpler, the first thing I do in each resolutions dependant stylesheet is to import the basic stylesheet, and just modifying whats need modification.

Demo: EM/Percent III (adaptive)

Conclusion

We are no longer just designing layouts, fixated on a grid, we are now designing layout behavior. At least I thinks that’s exciting!

This entry was posted in Redesign Chronicles, Tutorials and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.