Adaptive Layouts, Accessible Forms

It’s the last gasp of 2006, a year whose sweetness will long be remembered. A List Apart celebrates twelve months of international peace and brotherhood with its final issue of the year.

…In which Marc van den Dobbelsteen asks the musical question, how can we manage web layouts that must accommodate devices with viewports as small as 240 pixels and as big as 1680? The old answer, liquid layout, doesn’t cut it:

If you create a liquid layout optimized for a maximum width of 1024 pixels—limiting maximum line-lengths for your text to maintain readability—gaps will appear on a wider screens, and your carefully balanced layout will break. On a tiny-screened PDA, your text and images will be compressed into a crowded content sandwich. No designer wants that. If vector-based layouts were technically possible on a wide range of browsers, we could use a single generic layout that looked exactly the same on all screen sizes. Since that’s more fictional than feasible, we have to find another way.

That other way is to define layout and appearance for a series of screen-width ranges, then match these layouts with the user’s viewport size. (You can even change layouts automagically as the user’s viewport size changes.) Learn how in “Switchy McLayout: An Adaptive Layout Technique.”

Then dive into Mike Brittain’s Making Compact Forms More Accessible for a smart way to solve the usability and accessibility challenges posed by today’s complex, tightly spaced forms.

Forms pose a series of usability and accessibility challenges, many of which are made more complex when you need to build a form to fit into a small space. Tightly spaced forms can look great on paper, but they often ignore accessibility issues altogether. … In this article, we’ll create a compact form that provides a high degree of accessibility, despite its reduced size.

This issue was produced by Erin Lynch and edited by Erin Kissane. Thanks and praise to technical editor Ethan Marcotte, who pulled flaming swords out of the rock. Kevin Cornell, The Web’s Leading Illustrator™, crafted the delicate visual poems that accompany our articles. Doctor Santa Maria art directed.

A list Apart T-shirts are still available and make an excellent holiday gift. A List Apart is a founding member of The Deck, the premier advertising network for reaching web and design professionals. Skiddle-dee doo-dee idle dum!

[tags]alistapart, accessibility, design, development, usability, forms, layouts, adaptive[/tags]

8 thoughts on “Adaptive Layouts, Accessible Forms

  1. Thank you for reviews.

    I would say that this issue is one of the most interesting ones for me in this year.

    Keep it up! You all do the great job helping the internet to become better!

  2. Adaptive layouts? Screen sizes will vary more and more. I`m using a 24” CRT with 1280/768. Can you imagine how thankful i am your layouts’ width to be fixed. I hate those 43-word lines :-)

  3. You are right, Im using a semi-liquid layout (page auto-centered if width is over 1024px and max 20-words/line) and this is NOT silver bullet but this solution is the best I found.

  4. This is my first comment over here. I like this blog a lot.
    I liked this blog entry the most though, the way you said it was just amazing!
    See ya Later ;)
    P.S. – CSS update?

  5. full ack…writing with the the eyes of an older person… fixed centered layouts are for me like reading book or magazin, most accessable, eyes are getting preserved on fixed layouts mostly

Comments are closed.