Arguments for flexible webpage layouts
Added on Thursday 12 Jun 2003
Some notes: why are flexible web page layouts a good idea?
1. The web is not print.
From Evolt.org article 'Liquid design for the web'.
"One of the greatest advantages of the web is something that your average dedicated print designer or software developer can't get their arms around. The idea that it's a fluid medium, that information can be experienced in as many ways as there are users...."
"..On the web, all that goes out the window. Users could be running anything from a text-to-speech browser to the latest version of Internet Explorer with JavaScript disabled. Their systems can be anything from the newest version of BeOS to an old Amiga. And monitors can range from old 14-inch bricks running 16 colors at 640x480 to the latest flat panel running at 32-bit and 1,600x2,000 pixels. Ultimately, the user has control, and no matter how much the designer or developer wants to wrest that control, it just can't be done." http://www.evolt.org/article/Liquid_Design_for_the_Web/20/15177/
From 'The Web Style Guide' 2nd Edition
"The Web is a flexible medium designed to accommodate different types of users and a variety of display devices. Unlike a printed document, which is "fixed" in its medium, the look of a Web page depends on such elements as the display size, resolution, and color settings, the height and width of the browser window, software preferences such as link and background color settings, and available fonts. Indeed, there is no way to have complete control over the design of a Web page. The best approach, then, is to embrace the medium and design flexible pages that are legible and accessible to all users. " http://www.webstyleguide.com/page/layout.html
From the same book/website:
"It is possible to create flexible layout tables that resize gracefully without sacrificing the integrity of your design, but if you are turning to layout tables for precision you will need to use fixed-width layout tables." http://www.webstyleguide.com/page/fixed-flex.html
From the article 'Accessible Web Design - Liquid Design - A Step Forward To Making Web Sites Accessible'
"For web designers the monitor screen does not have fixed width or height because these variables change, at times in unpredictable ways. People might have larger buttons, toolbars such as Yahoo or Google, they open the Favorites page on the left, they have a double task bar and so on. Therefore the width and height of the screen is different from user to user. Liquid design means that the web site adapts itself to the available space, the same way water takes the shape of the glass it is in. http://www.oyster-web.co.uk/liquid-design.html
2. Flexible web design increases accessibility.
From the World Wide Web Consortium Accessibility Guidelines 'Themes of Accessible Design'.
2.1 Ensuring Graceful Transformation:
"Create documents that do not rely on one type of hardware. Pages should be usable by people without mice, with small screens, low resolution screens, black and white screens, no screens, with only voice or text output, etc."
Checkpoint 3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values (this is a Priority 2 checkpoint.)
(Note, in relation to the above guideline: fixed layouts require the use of absolute unit values; pages using fixed layouts would not pass WAI level 2 accessibility tests.)
Flexible layouts are good for accessibility because they will help to accommodate end users preferences and needs, e.g. small low resolution screens, users who require large type (fixed layouts can make it difficult to display large type in a usable way).
3. The arguments for or against flexible layouts, are not necessarily related to whether or not the site fulfills its purpose.
- Sites that use flexible layouts don't have to compromise on aesthetics.
- The critical decisions about how the site looks, are not necessarily determined by whether it should be accessible or not. In other words, accessible sites can be as fabulous looking, or as bad looking, as inaccessible sites
That is not to say there are not design 'constraint's, as demonstrated in my first point, i.e. the design must be appropriate to the communication medium.
Examples of sites that use flexible layouts:
- http://www.einfach-fuer-alle.de/ (A German accessibility portal).
- http://www.stopdesign.com/ (flexible page layout, and uses CSS and XHTML)
- http://www.markme.com/accessibility/ (uses flexible width tables)
- http://devedge.netscape.com/ (Uses HTML 4.01 and CSS for layout, and it would only take a couple to tweaks to make it fully WAI level 2 accessible)
- http://www.movabletype.org/ (flexible layout, a couple of small changes would make this accessible to level 2)
- http://www.alltheweb.com/ (uses a combination of flexible tables and CSS, only needs a couple of changes to make it level 2 accessible)
- http://www.wired.com/
- http://www.alistapart.com/index.html
- http://www.alltheweb.com/ (uses a combination of flexible tables and CSS)
- http://www.digital-web.com/new/
- http://www.zeldman.com/
- http://www.meyerweb.com/
- http://www.standards.org
- http://www.meet-the-makers.com/conversations/dwws/1/
- http://www.oyster-web.co.uk/liquid-design.html (web design company)
Worth looking at: 'Zen Garden - the beauty of CSS design' at http://www.csszengarden.com/
This Zen Garden site uses XHTML 1.0 Strict, and CSS for layout (i.e. no tables) - all-comers are then invited to change the look and feel of the site by contributing different style sheets. Click on the list of style sheets to see the design change (each page has the same content and markup, but each page looks very different).