19 Dec 2006 10 am eastern

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]

Filed under: A List Apart, Accessibility, Design, development, Standards

8 Responses to “Adaptive Layouts, Accessible Forms”

  1. Shimon said on

    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. ff-webdesigner said on

    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. Armonth said on

    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. myFeedz - Articles on "accessibility" said on

    [...] Adaptive Layouts, Accessible Forms article details » http://www.zeldman.com Posted 2 weeks and 2 days ago by Jeffrey Zeldman feed details » [...]

  5. HTML Registration form - CodingForums.com said on

    [...] This is widely discussed all over. I assume what you’re talking about is “how to make a highly accessible form”. there’s endless discourse, so I’d just sit down and read some o the opinions, then move forward, and try it out on the different mediums you’re trying to encompass. “If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database” -Tim Berners-Lee, Weaving the Web, 1999 [...]

  6. LCD Projector Rentals Guy said on

    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?

  7. Blazinek said on

    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

  8. Internetagentur München said on

    Adaptive layouts are faboulous as long as you have a page without many pictures. When you start scaling pictures they will look awful. Therefore I have decided to go for fixed width.

Comments off.