MAX-WIDTH and flexible layout with short lines

1. Why long lines are bad most of the time
2. Flexible layout with short lines
3. MAX-WIDTH and EM at work
4. Length of a short line
5. JavaScript for IE
6. Short lines and two columns

We all know good old-fashioned flexible web design with long lines, almost "wall-to-wall" except for a couple of pixels for left and right margin. We still find long lines on the web today: the specifications of W3C and the articles of Jakob Nielsen are just a few of the better examples.

Flexible layout with long lines is undoubtedly the most versatile and usable page layout ever invented. If flexible layout with long lines is made with a relative font-size (EM, percent), it adapts to any resolution of the screen, any width of the browser window and to the font-size chosen by the user in the browser.

Traditional flexible layout with long lines is even great for scanning. With high resolution and a maximized window, you see much more of the page at a time, but the lines are too long to read. When you want to read you just reduce the width of the window or use ZOOM in the browser to make the font-size bigger, or you combine resizing and zoom.

1.  Why long lines are bad most of the time

Unfortunately most users don't know the virtues of flexible layout with long lines. They don't reduce the width of the window to facilitate easy reading and they don't have the ability to enlarge the font-size in the browser without having to think about it. They just don't do it. That is why classical flexible layout with long lines is not even considered an option by most web designers.

Long lines are a catastrophe for most users. Long lines look bad in a maximized browser window with high resolution. Long lines scare the majority of ordinary users away.

Today we almost never see flexible layout with long lines on home pages or for pages at first level of navigation. Flexible layout with long lines is still used at some sites for documentation, rapports, specifications, and for longer articles. For such use, flexible layout with long lines is often the right choice, second to none.

2.  Flexible layout with short lines

The good news is that the MAX-WIDTH property of CSS now gives us a new option: "flexible layout with short lines". That is: reading-friendly lines. This design is a sensible trade-off for most users: it adapts itself to resolution, width of windows and to the user's choice of font-size. It does not facilitate scanning like flexible layout with long lines, but the short lines look great, and the user does not have to reduce the width of the window or to use ZOOM to get fewer characters per line.

It is important to understand that it has always been possible to make layout with short lines using let us say 50% for the WIDTH attribute in HTML or for the WIDTH property in CSS. But such layout is only partial flexible. It has a major problem. If the user makes the font-size bigger, the lines are not getting longer in order to get the same count of characters per line. The text can only be made a little bigger by the user. The lines become too short too fast. We need MAX-WIDTH and the EM unit if the lines of the pages are going to adapt to more extreme choices of font-size.

A browser like Opera has a fantastic page ZOOM, making everything on a page bigger or smaller even images as needed. If such functionality becomes the order of the day in all browsers, also in Internet Explorer, flexible web design would also be possible without MAX-WIDTH and the EM unit.

Take a look at pixel-fanatic Jeffrey Zeldman's website, www.zeldman.com. We cannot make Zeldman's tiny letters bigger in IE for Windows. IE demands relative units like EM or percent. Even Mozilla, having a text ZOOM accepting also pixels, does a poor job for Zeldman. But page Zoom in Opera saves Zeldman's neck. When the text gets bigger, the lines get longer. Read his book, Designing with web standards, 2003, anyway. It is the most important new book about web design.

3.  MAX-WIDTH and EM at work

The MAX-WIDTH property in CSS is working like this: The line has a constant length as long as the browser window is wider than MAX-WIDTH. As soon as the window gets smaller, the width of the web page becomes flexible. Test this using PX as unit. MAX-WIDTH does not make sense using % as unit!

Except for your first test, the unit to use for MAX-WIDTH is the EM unit, the most important unit in web design. Most browsers use 12pt=16px=1em as default font-size. If we want short lines, let us say 500px wide, we just have to set MAX-WIDTH to 31em (496px) or 32em (512px). If needed, different MAX-WIDTHs can be used on the same page. Each DIV and other block level elements can have it's own MAX-WIDTH.

Browsers like Mozilla and Opera support the MAX-WIDTH property. Microsoft's Internet Explorer does not support MAX-WIDTH yet but this is not a big problem. It is easy to make a JavaScript for MSIE that simulates all the great virtues of MAX-WIDTH. Why not use this JavaScript today? We will need it anyway to accommodate old versions of MSIE the GREAT DAY a new version of IE has implemented MAX-WIDTH.

4.  Length of a short line

The most important thing is to avoid lines longer than what we are used to in print, 60-70 characters per line. The width of columns in many newspapers are only half that size, and they are great for reading also on the screen. But we should remember that the shorter the lines, the more often we need to scrool, which is bad for reading. The shorter the lines, the longer the page. The longer the page, the more difficult it is to get an overview. Short lines are in many cases bad for scanning if it means more scrolling. Too short lines can also make the page look empty or could be considered an uneconomical use of real estate.

For one column layout the best compromize will often be to make the lines longer than what we would use for two or three column layout. My rule of thumb is 500 px for short lines. 30em (480px) is perfect in many cases.

All my one column articles at www.SmackTheMouse.com (International edition) and www.klapmusen.dk (Danish edition) now use flexible layout with short lines. I use MAX-WIDTH (42em, 672px at default font-size) for the browsers supporting it. The pages degrade gracefully in other browsers. They get flexible layout with long lines. A JavaScript is used to simulate MAX-WIDTH for MSIE.

5.  JavaScript for IE

In the external style sheet we use the MAX-WIDTH property as if all browsers supported it. Let us use 32em (512px) as example. This value will be used by browsers like Opera and Mozilla. Internet Explorer does not understand what MAX-WIDTH is all about and just ignores the property.

In all DIV's having classes using MAX-WIDTH, we need something the JavaScript can detect in order to make a substitute for Internet Explorer. The best solution would be simply to detect the use of the MAX-WIDTH property in the external style sheet for a certain class used in an element. But to the best of my knowledge, it is not possible in any workable way at the moment. With W3C DOM we can use the stylesheet collection, but we run into too many problems. The rules are only available using index-number, and there are several other problems.

The only sensible solution I can think of is to use the ID attribute. I use ID's like this: <div id="ie32">. I only make use of the first four characters in the JavaScript. When or if needed, I can add anything to the above ID like: "ie32a", "ie32_theRealValueOfTheID", etc. It is some extra work, but it is easy to add letters to make IDs unique or to give them more meaningful values when needed.

The following JavaScript is a copy of the one used at this web site. Word wrapping could break the code. It depends on viewing condtions: resolution, width of window, font-size. Download the original JavaScript if you need it. The script handles all uses of MAX-WIDTH on all pages.