Max-width and flexible design

MAX-WIDTH and flexible design

Today it is possible to make flexible one column design with user-friendly short lines. All it takes is to use the CSS property MAX-WIDTH and the EM unit.

It means that we can now use flexible one column with user-friendly short lines for web pages where good old flexible one column wall-to-wall design is out of the question. Most web designers and users in most situations consider long lines a catastrophe. Long lines look ugly, and scare the majority of ordinary users away.

Flexible wall-to-wall web design is undoubtedly the most versatile and usable page layout ever invented. If used with a relative font-size flexible wall-to-wall adapt itself to any resolution, any width of window and to the font-size chosen by the user in the browser.

Traditional flexible wall-to-wall is even great for scanning. You see much more at a time, and when you want to read you just reduce the width of the window or make the font-size bigger in the browser.

Unfortunately most users don't know the virtues of flexible one columns wall-to-wall design. They don't reduce 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 one column wall-to-wall is not even considered as an option by most web designers in most situations.
 
Today we almost never see traditional one column wall-to-wall design for home pages or for pages at first level of navigation. But the design is still used at some sites for documentation, rapports, specifications, and for longer articles. For such use, traditional one column flexible wall-to-wall design is often the right choice, second to none.
 
The good news is that we now have a new option: "flexible one column 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 wall-to-wall, but the short lines look great, and the user does not have to reduce the width of the window to facilitate friendly reading.

It is important to understand that it has always been easy to make short lines using something less than 100% for the width attribute in HTML or for the width property in CSS. But such design has a major problem. If the user wants to make the font-size bigger, the lines should get longer in order to get the same count of characters per line. This problem can only be solved by using max-width and the em unit.

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 the 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 together with max-width is the EM unit, the most import 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, or even max-width and wall-to-wall.
 
Browsers like Mozilla and Opera support the MAX-WIDTH property. MSIE does not support max-width yet but that is not a problem. It is easy to make a JavaScript for MSIE that simulates all the great virtues of max-width. This JavaScript is necessary anyway to accommodate old versions of MSIE the GREAT DAY a new version of IE has implemented max-width.

All my articles at www.SmackTheMouse.com (five in English and 45 in Danish) now use "flexible one column 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 one column wall-to-wall. A JavaScript is used to simulate max-width for MSIE.

Try this article, if you want to test: "Don’t force new windows on users", http://www.smackthemouse.com/artikel.aspx?xml=20030831

I would like to know, if some of you are using "flexible one column short lines" (max-width/em) already, or if you find the option interesting for accessibility. I plan to write a more detailed article about the subject, explaining the use of the JavaScript, etc.

Best regards,
Jesper Tverskov
www.SmackTheMouse.com

Received on Friday, 19 September 2003 06:57:46 UTC