Layouts
Margins, page widths and indentation are all aspects of page design which can aid readability. The web presents difficulties for the designer with each of these. Browser windows can be resized, thereby changing the page size. Different web devices (web TV, high resolution monitors, PDAs) have different minimum and maximum window sizes. As with fixed font sizes, fixed page layout can lead to accessbility problems on the web.
As with fonts, layout aspects of a page can be designed using percentages to create adaptable pages. Margins can be specified as a percentage of the width of the element which contains them.
Using percentages (or other relative values) to specify page layout in CSS automatically creates adaptive pages. As browser windows widen and narrow, the layout of an element adapts to maintain the same proportions, and so the whole page layout adapts. Readers can choose the window size they find appropriate to their needs.
Margins, text indentation and other layout aspects can also be specified in relation to the size of the text they contain, using the em unit for specifying margins, text indentation and other layout aspects. If you specify
P {margin-left: 1.5em}
you are saying that the left magin of paragraphs should be 1.5 times the height of the font of that paragraph. So, when a user adjusts their font size to make a page more legible, the margin increases proportionally, and if they adjust it to make it smaller, the margin adapts again.
Colors
The web is by and large a more colorful medium than the printed page. Color is cheaper on the web. Color can be ornamental, can help to establish a visual identity, and can have practical value (red might draw attention to important information). But color poses difficulties to accessibility as well.
Did you know that in many countries (if not all) people with red green color blindness are unable to obtain an aircraft pilot's license? That is, regardless of any other ability, because warning information is almost invariably conveyed using red for danger and green for safety. It's a shame that warning lights aren't simply adaptable.
Do your web pages exclude people in a similar way? It would be a shame, as in the near future most web browsers will provide simple ways for readers to adjust the color of elements on a web page, via user style sheets, which can override your style sheets. (You can do this now with IE5 Macintosh edition.)
How to avoid these problems? Use style sheets, rather than the HTML <font> element. And avoid relying on color combinations to alone convey meaning.
The Journey
Yet a tree broader than a man can embrace is born of a tiny shoot; A dam greater than a river can overflow starts with a clod of earth; A journey of a thousand miles begins at the spot under one's feet. Tao Te Ching; 64a. Care at the Beginning
Changing our ways of thinking and acting isn't easy. "Closely held beliefs are not easily released". But I've come slowly to realize that much of what I took for granted needed to be reassessed. Judging by what I see and read and the conversations I've had, the email I've read over the last couple of years, many hold these beliefs closely, and need to rethink them too.
Now is the time for the medium of the web to outgrow its origins in the printed page. Not to abandon so much wisdom and experience, but to also chart its own course, where appropriate.
The web's greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.
The journey begins by letting go of control, and becoming flexible. - JOHN ALLSOPP
1 Same old new medium?
2 Controlling Web Pages
3 Adapatability is Accessibility
4 The Journey
:::
John Allsopp is responsible for technology at Western Civilisation software, developers of Style Master, a cascading style sheet editor for Windows and the Macintosh, and maintainers of The House of Style, a comprehensive css resource, featuring a a complete guide to all of CSS, as well as tutorials, articles, comprehensive browser compatibility information, and more.
John is one of The Web Standards Project's CSS samurai, whose responsibility has been to badger browser developers into fuller and better support of CSS. Tao Te Ching quotes from the GNL's not Lao Tao Te Ching Copyright (C) 1992, 1993, 1994, 1995 Peter A. Merel.
What do you think? Send your feedback to A List Apart digest. You must be a member to post. Membership is free. Join us.
:::
For your reading pleasure: swell articles from Erika Meyer, Jeffrey Veen, Robin Miller, Jason Kottke, Julia Hayden, Lance Arthur, Tor Hyams, Alan Herrell, wklang, Scott Kramer, Glenn Davis, Joe Clark, Ryan Holsten, L. Michelle Johnson, Wayne Bremser, D.K. Robinson, Mattias Konradsson, Steven Champeon, Christopher Schmitt, Zeldman, and more. In Previous Issues of ALA.
:::
|