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]

ALA 228: Take the Edge Off

Issue 228 of A List Apart is all about smooth.

User-Proofing Ajax

by Peter Quinsey

Ajax offers the ability to avoid both needless browser behavior like page reloads and useful browser behavior like error handling. When good web apps go bad, Peter Quinsey’s guidelines and techniques can help you and your users stay informed and productive.

Avoid Edge Cases by Designing Up Front

by Ben Henick

Sooner or later, nearly all web projects fall afoul of simple, preventable problems—problems like building the wrong features or creating a platform that can’t be upgraded. A proper process can help you manage scope, develop site features that actually match your objectives, and catch fatal flaws before your site is produced.

[tags]alistapart, ajax, usability, process, webdesign[/tags]

Safari better than Firefox?

Standardistas adore the Mozilla Firefox browser for its advanced support of web standards. (How good is it? The Web Standards Project considered declaring victory and closing shop when Netscape Corp. announced in 1999 that it would heed our advice and dump its non-compliant software in favor of the Gecko rendering engine that powers Firefox today.)

Though Firefox and related Mozilla browsers deserve credit for their unsurpassed handling of everything from the Document Object Model to MIME types, Firefox’s way with text leaves much to be desired, as the following screen shots show. Indeed, if reading is mostly what you do on the web, and if accurate typography makes reading more of a pleasure and less of a strain, then Apple’s Safari is superior to Firefox.

Lucida, Test One: with genuine italics

Zeldman.com is designed to be read in Lucida Grande, and the site originally listed “Lucida Grande” first in its style sheet. Alas, Lucida Grande lacks true italics. Fortunately, Lucida Sans has them. In a version of our style sheets used to capture the following screen shots, we’ve listed Lucida Sans first, Lucida Grande second, and substitutes thereafter. Both browers handle the site like a dream—but it is only a good dream in Safari. Open the screen shots in tabs:

Questions for discussion

  1. In Firefox, why does the text “now in its second edition. I can’t” display midway between roman and bold, and why is it so poorly antialiased? Apparently, Firefox bungles roman text that follows italics.
  2. In Firefox, why doesn’t hyphenation work? My gosh, people, it’s nearly 2007. IE5/Mac supported hyphenation.

Lucida, Test Two: using a font that lacks italics

Remember: Lucida Grande does not have italics; Lucida Sans does. But as Test One showed, Firefox can’t handle Lucida Sans correctly. So we’ve revised the style sheet. With Lucida Grande listed first in the style sheet, and Lucida Sans deleted, Safari still trounces Firefox. The experience of reading text is smoothly beautiful in Safari, much less so in Firefox.

Observations

  1. Both browsers fake the italics. But Firefox does the job crudely: a child could tell that its “italics” are faked. (Firefox slants the roman text.) By contrast, Safari fakes its italics so well (by substituting a true italic from the next available listed font that contains one) that only graphic designers and type hounds will realize that the font they’re viewing contains no true italics. See reader comments for delicious details.
  2. In Firefox, hyphenation still does not work.

Notes

It’s worth pointing out that these tests were done on Macintosh computers, which are known for their superior handling of text, and that Lucida is not some strange face chosen to prove a point. It is the default font in Mac OS X (not to mention on apple.com). Moreover, Lucida Sans Unicode, the first Unicode encoded font, shipped with Windows NT 3.1 and comes standard with all Microsoft Windows versions since Windows 98.

When I showed a friend and fellow designer these simple tests as I was working on them, he asked if I had reported “the bug” to the makers of Mozilla. But as I count it, there are multiple, overlapping Firefox bugs happening here—too many to fit into a bug-report form. I suspect that the problems have to do with Mozilla’s reliance on its cross-platform display environment. If you scuttle what an individual operating system does well in favor of what a cross-platform environment does poorly, you get what we’re seeing here. It’s not good enough.

Inferences for best practices

If your content will sometimes include italicized text, you naturally want to specify a font that contains italics. That’s just common sense. Unfortunately, as our screen shots have shown, common sense works against you here, because Firefox, although superior to other browsers in many ways, handles text like a drunken fry-cook.

When you specify the font that contains genuine italics (as we did in Test One), Firefox mishandles the roman text that abuts italicized words. When you replace that font with one that contains no italic (Test Two), Firefox fakes the italics crudely, but overall display and legibility are better than the unusable results of Test One.

Obviously there are fewer problems if you limit your website to Verdana and Georgia, but more constraints on typography are not what the web needs.

Discussion is now closed. Thanks to all who shared.

[tags]design, browsers, webstandards, webdesign, mozilla, safari, apple, lucida, unicode, windows, macintosh, osx[/tags]

An Event Apart Austin: Details, Details

Event Apart Austin attendees, this post contains important information about parking, laptops, snacks and lunch, the after-party sponsored by Knowbility, our Flickr photo group, and more. The rest of you, please move along.

About Austin

Austin, capital of Texas, “live music capital of the world,” and the Southwest’s answer to Silicon Valley, is a lively and remarkable town, teeming with history and high-rises, high-tech and dirty low-down blues. Seat of a great university and a million funky taverns, it’s paradise for music lovers and Tex-Mex junkies. Our favorite activity: breakfasting and celebrity-watching at Las Manitas Florist, 211 Congress Avenue (when we can get in). Yes, it’s called “Florist.” No, it’s not a florist, it’s a great Mexican cafe. Welcome to Austin!

Location, Laptops, and Lunch

An Event Apart Austin takes place…

Monday, November 6th, 2006, 9am – 5pm
Alamo Drafthouse Downtown
409 Colorado St. (Corner of 4th and Colorado; Directions and Map)
Austin, TX 78701

Yes, you can bring your laptop. Yes, there will be WI-FI. Yes, there will be chow throughout the day, including vegetarian choices. (Lunch options include veggie pizza, veggie sandwiches and salads. There are plenty of meat options, too.)

The Schedule

An Event Apart Austin runs from 9:00 am – 5:00 pm. We have a lot to cover, so the event will start promptly. Arrive early to get a good seat! Doors open at 8:00 am; for best results, plan to show up between 8:00 am and 8:30 am. If you’re driving, leave yourself extra time to find a good parking space. (See the next section for details on parking.)

The day’s schedule is available for your perusal.

Parking

Parking can be a hassle, so come early and give yourself extra time. The Alamo Drafthouse says:

With the ongoing construction and the increased popularity of the warehouse district downtown, parking can be a real challenge. Street parking is still available for the crafty and persistent; we also recommend the parking structure between 3rd and 4th streets on San Antonio. The neighboring restaurants also have valet parking until midnight.

Happy Hour and a Half

An Event Apart Austin will be chock-full of design and code pleasures. But the fun (and the networking) don’t stop at 5:00. Join us after the show for a Happy Hour and a Half featuring complementary cocktails and savory snacks, sponsored by our good friends at Knowbility:

Happy Hour and a Half 6:00 – 7:30
The Belmont
306 W. 6th Street

Entering the Belmont Austin, with its wonderful 60s period decor, is like cruising Las Vegas or Palm Springs with Frank, Dino, and Sammy. Okay, it’s not—but it will be fun, especially after all those hours of brain work. Pull up to a plush banquette, order a free cocktail, and hob-nob with your fellow attendees.

Freebies From our Sponsors

By random drawing, some folks attending An Event Apart Austin will win software, books, or free hosting donated by our wonderful sponsors: Adobe, New Riders/AIGA Press, and Media Temple. Thank you, sponsors!

Join our Flickr Group!

You know you want to! Bring your digital camera and snap away (just be considerate of your fellow attendees). Share your snapshots with other attendees on our Flickr group:

flickr.com/groups/aeaaustin2006

Suggested tags: aneventapart, aneventapart06, aneventapart2006, aneventapartaustin, austin

Disclaimer and Miscellany

Please note that the schedule is subject to change, and that some things are not entirely within our control.

Previous AEA Austin 2006 news

[tags]aneventapart, design, conferences, austin, texas[/tags]

Monday breakfast links

Berners-Lee: reinventing HTML

Tim Berners-Lee, inventor of the web and founder of the W3C, announces reforms:

It is really important to have real developers on the ground involved with the development of HTML. It is also really important to have browser makers intimately involved and committed. And also all the other stakeholders….

Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work.

9 to 5 = average
To be great in design takes passion and work.
Sending XHTML as text/html Considered Harmful to Feelings
I love this.
Web Directions North
Our Australian friends set up camp in Vancouver, for what looks like a great two-day conference on standards-based design and development (Vancouver Canada, February 6-8 2007). Speakers include Kelly Goto (Gotomobile), Andy Clarke (malarkey), Adrian Holovaty (Chicago Crime, Washington Post), Douglas Bowman (Google Visual Design Lead), Dan Cederholm (SimpleBits), Joe Clark (joeclark.org), Dave Shea (CSS Zen Garden), Cameron Moll (Authentic Boredom), Molly Holzschlag (Molly.com), Veerle Pieters (Veerle’s Blog, Duoh!), Kaitlin Sherwood (Google Maps US Census mashup), Tantek Çelik (Technorati).
Web Accessibility: Web Standards and Regulatory Compliance
By Andrew Kirkpatrick, Richard Rutter, Christian Heilmann, Jim Thatcher, Cynthia Waddell, et al. Don’t let the unsexy title fool you. Vast and practically all-encompassing, this newly updated classic belongs on every web designer’s shelf. (Better still, open it and read.)
I Cannot Possibly Buy Girl Scout Cookies From Your Daughter at This Time
By Charlie Nadler in McSweeney’s.
Gemini Girl
New women’s blog elegantly designed by Ray McKenzie.
eMusic: 33 Folkways LPs
Thirty-three important Folkways Recordings for download. Louis Bonfa, Mighty Sparrow, Woodie Guthrie, Henry Cowell and more.
On having layout – the concept of hasLayout in IE/Win
Technical but reasonably easy to follow discussion of why Internet Explorer’s rendering of your design may suck differ from your expectations
“Apple’s Backup App is Shit”
God bless SuperDuper.

[tags]W3C, webdirections, accessibility, haslayout, browsers, mcsweeney’s, folkways[/tags]

IE7 CSS tweak show and tell

Partly because the beta was carefully rolled out over many months, the release of Microsoft’s Internet Explorer 7 has largely been a non-event, for developers as well as journalists. While not at the level of Mozilla Firefox, IE7 is far more standards-compliant than IE6, which was way more compliant than IE5.5, which beat the pants off IE5. To make IE6 render standards-compliant pages correctly, web designers came up with a Wikipedia’s worth of hacks. In IE7, those hacks aren’t necessary; some actually cause problems.

(Here’s a tip from Dan Cederholm, who created the CSS for Happy Cog‘s redesign of Advertising Age: “inline-block is the new-and-improved method for auto-clearing floats.” Use it to replace display: inline-table;.)

IE7 is also the first Microsoft browser to permit user scaling. It does this the same way the Opera browser does it (which is the same way Microsoft Office does it): if text is too small, the user scales the entire page. By contrast, Safari and Firefox use Text Zoom, originally developed by Tantek Çelik for IE5/Mac. In those browsers, if text is too small, the user scales the text size—and nothing but the text size. Images, column widths, and so on, typically do not scale (unless the web designer is doing something really tricky).

There’s a huge difference between Text Zoom and Page Zoom, and it will affect the way designers spec type sizes for the web. It didn’t matter much when only Opera scaled the page. It was a neat feature of Opera; but Opera’s neat feature didn’t affect the way standards- and accessibility-oriented designers approached text size. But market share matters. Once IE7 gains critical mass, a lot of our current thinking about ems and pixels and such will go out the window. I’ll write about that soon, probably on A List Apart.

Meantime, developers are focused on the persnickety stuff: Ajax and JavaScript compatibility problems, CSS bugs that didn’t quite get fixed, and CSS hacks that no longer work.

Like me, you may have heard from a client whose site you designed before IE7 existed. What problems have you encountered? What hacks have you jettisoned, and with what have you replaced them? (Please include URLs.)

[tags]css, IE7, bugs, hacks, workarounds, design, webdesign, tantek, dancederholm[/tags]

IE7 Bugs and Fixes, Part I

Reader Adam Engelsgjerd writes:

I develop and maintain websites for the University of Arizona Library. We make use of the “Holly Hack” to avoid the IE6 peek-a-boo bug for our intranet site (God bless Holly). In the course of testing our sites against IE7 I noticed that the bug was rearing its head again‚ despite claims that this latest version has fixed it.

Further investigation revealed that while IE7 really does seem to have fixed this peek-a-boo bug the Holly Hack has, with decidedly sardonic irony, reintroduced the very problem it was created to circumvent.

This morning I tested and just implemented a fix that seems to work for us: the removal of the universal selector, “*‚” before the “html” selector. So the traditional Holly Hack is:

/* Hides from IE5-mac \*/
* html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */

Our new code is now:

/* Hides from IE5-mac \*/
html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */

I’ve tested this against the following browsers on Windows XP SP2:

IE7
IE6 (SP1 standalone install from evolt.org and SP2 full install)
IE5.5 (standalone install from evolt.org)
Netscape 7.2 and 8.1
Opera 7.11 and 8.54 and 9.00
Firefox 2.0

And on Windows 2000 SP4:

IE6

Hopefully this can be of some use should others be running into this same problem.

[tags]css, browsers, IE7, bugs, hacks, workarounds, holly hack[/tags]

Better community through printing

Readers read web pages. Readers print web pages. In 1999, the way to help readers print web pages was obvious to every major site owner: buy a proprietary, multi-million-dollar content management system avec service contract to generate multiple versions of every page. After all, you needed seven versions of every page to handle all the browsers out there; you might as well treat print the same.

In 2001, A List Apart started promoting print style sheets, and by 2003, all the cool kids were doing it. They were also mostly using free or low-cost, generally open-source, content management systems. Yay, open source! Yay, web standards!

But a problem remains: all those ponderous 1999 websites have trained readers to expect a “print this page” button and subsequent in-browser preview. How can you satisfy this basic user expectation while still enjoying all the benefits of web standards?

In Issue 226 of A List Apart, for people who make websites, Pete McVicar shows one very good way to do it. His “Print to Preview” combines alternate stylesheets and scripting to…

show how the page will look when it’s printed, perhaps display a preview message explaining what this new view is about, and then automatically print the page.

McVicar’s method isn’t the only way to do this—others will likely be mentioned in the comments—but his technique is straightforward and clean, and it takes care of users without making the mistake of trying to educate them about something in which they’re profoundly uninterested (namely, web development).

Also in this issue: “How to be a Great Host,” by John Gladding. These days, many people’s web business plan looks something like this: “Ajaxy goodness + ???? = Profits!” Other straw men seem to think five blog posts plus text ads by Google plus discussion board software guarantees a buyout by Google. It doesn’t.

Building a community takes time and work. No amount of social bookmarking and tagging can rush that process. But you can learn to avoid mistakes. And you can save time by following time-tested approaches. (Learning from your mistakes is overrated.) Gladding’s article is filled with smart, “first do this, then do that” tips that can help you grow your site’s audience with discussion that works.

Better printing. Better community-building. Better read A List Apart 226!

[tags]alistapart, webstandards, community, forum, printing, stylesheets[/tags]

Crash Boom Bop

The path the plane took
Interactive graphic shows path taken by single-engine plane registered to New York Yankees pitcher Cory Lidle that crashed into a residential high-rise on East 72nd Street, yesterday, killing Lidle and his flight instructor. It’s amazing how disasters lend themselves to the creation of cool infographics.
Subtraction + Zeldman
Khoi Vinh (AIGA/New York board of directors, design director for nytimes.com) should interview himself, but instead he interviews me on the cusp of my AIGA New York talk next week. As previewed in the interview, my talk will focus on how to build relationships that let you sell clients good work.
Web 2.0 Validator
Hilarious. (The score for 37signals.com is 7 out of 52.)
Meyerweb: W3C Change
The third (and most radical) of Eric Meyer’s proposals to save the W3C from irrelevance: “Transform the W3C from a member-funded organization to a financially independent entity.”
Fireside Chat
Cederholm, Sims, Santa Maria, and Storey tell 37signals what they think of the state of web design. (Things I did not know before: no boxes, grids, or columns were used in web design until web standards came along to ruin everything.)
Daring Fireball: Qualcomm ends Eudora development
I’ll stop using Eudora when they pry it from my cold, dead, one-button-mouse-clutching fingers. Oops, maybe sooner than that.
UsedWigs Radio Podcast 18
He could have been a radio star: Greg Hoy of Happy Cog Philadelphia is interviewed.
0sil8
Jason Kottke’s first website. Take that, Ze Frank!
Class Critique
Jason Santa Maria takes it on the chin.

[tags]design, AIGA, webstandards, happycog, jasons[/tags]