21 Dec 2006 4 pm eastern

Our Year in Review

Wrote some here.

Wrote some there.

Wrote a second edition in our underwear.

Expanded from New York to Philly PA.

Worked for Ad Age, Comhaltas and AIGA.

Ran shows in Atlanta, Chicago, Seattle,

New York, even Austin (where the natives eat cattle).

Published a mag and co-polished a deck.

Plucked a ma.gnolia and helped you spell-check.

That’s our year in review.

So how’s about you?

[tags]happycog, happycogphiladelphia, alistapart, aneventapart, dwws2e, designingwithwebstandards, ma.gnolia[/tags]

Filed under: A List Apart, An Event Apart, Design, Happy Cog™, Philadelphia, work

Comments off.

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

Comments off.

14 Dec 2006 4 pm eastern

Goodbye

When the phone rang, around 10:00 pm, my heart stopped. Our friends know we have a two-year-old, and they know we live in an apartment. Anyone phoning after 8:00 is calling with bad news.

The room was dark, my daughter moaned, a voice I didn’t initially recognize began leaving a message. Someone I knew, someone talented and nice and still young, was gone.

Filed under: people

Comments off.

6 Dec 2006 9 pm eastern

Moustaches, goatees, and beards

They are not the same. Discuss.

[tags]style, fashion, facial hair, beard, moustache, goatee, vandyke[/tags]

Filed under: Design, Facial Hair, fashion, style

Comments off.

5 Dec 2006 3 pm eastern

Inflamed linkazoidal tissues

The Economist profiles Mena Trott
Of late, The Economist has been paying greater attention to the web, undoubtedly because investors are doing likewise. The magazine even gets some things right. It’s great to see a hard-working innovator like Six Apart‘s Mena Trott get profiled in the magazine’s business section. I only wish the journalist who profiled Ms Trott could have laid off the condescending sexism. (“Girly whim?”) Why don’t they tell us what she was wearing?
Jubilee Center
This free after-school program for kids from kindergarten to sixth grade is “the only after-school and summer safe haven for children in Hoboken’s public housing neighborhood—a neighborhood with a history of violent crime and drug-related arrests.” ’Tis the season for giving (not that poverty ever goes out of season); support the Center!
simplebits redesign
Gorgeous.
Ten Worst Internet Acquisitions Ever
Amusing.
IconBuilder 8.1 (free update)
The Photoshop plug-in for favicon makers and icon bakers. Released 16.Nov.06. Free upgrade for registered users.
Things Designers Want for Christmas
Greg Storey of Airbag Industries builds hisself a Christmas store using Amazon’s new “astore” technology. I’ve been longing to do the same thing.
Judge: Make Bills Recognizable to Blind
“The [U.S.] government discriminates against blind people by printing money that all looks and feels the same, a federal judge said Tuesday in a ruling that could change the face of American currency.” Hat tip: Sean Jordan.
Slashdot reviews DWWS2e

Trent Lucier writes:

If you’ve browsed the web design section of any bookstore lately, you’ve seen him staring at you. The blue hat. The mustache. The blinding neon background. He’s Jeffrey Zeldman, publisher of the influential web development magazine, ‘A List Apart’ and author of the book Designing With Web Standards (DWWS). The first edition of the DWWS was published in 2003, and now 2006 brings us an updated 2nd edition. In a market flooded with XHTML, CSS, and web standards books, is DWWS 2nd Ed. still relevant?

I love it that they think I have a moustache.

[tags]links, sixapart, menatrott, hoboken, afterschool, simplebits, dancederholm, design, web2.0, accessibility, airbag[/tags]

Filed under: Accessibility, books, Design, industry, links, Publishing, Six Apart, Tools, war, peace, and justice, Zeldman

Comments off.

5 Dec 2006 7 am eastern

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]

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

Comments off.

27 Nov 2006 10 am eastern

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]

Filed under: Browsers, Design, development, Standards

Comments off.

22 Nov 2006 1 pm eastern

Better Know a Speaker: Steve Krug

You may have heard that An Event Apart is expanding. 2007 will see big, two-day shows in fine, fancy towns like Boston, New Orleans, Chicago, and San Francisco—with more great speakers than before and at a lower ticket price per day.

Steve Krug

Take Boston, and consider but one of our nine featured speakers, Mr. Steve Krug (biography, business website), author of the game-changing usability tome Don’t Make Me Think: A Common Sense Approach to Web Usability, now in its second edition. I can’t believe we got him. I’m still awed that he said yes.

If not for Steve Krug, I wouldn’t so much as speak the word “usability” in the privacy of my home, let alone bandy it about in mixed company. Curt Cloninger memorably expressed what many of us felt when he wrote “Usability experts are from Mars, graphic designers are from Venus” in the July 28, 2000 issue of A List Apart.

Stop and smell the brimstone

Like many design professionals, I rejected usability when I first encountered it. That’s mainly because I first encountered it as a series of rules, put forward by business-oriented, lab-coat-wearing experts who were hostile to the aesthetic component of user experience. Later, the rules would soften. “Only use blue, underlined links” would give way to gentler and more flexible guidelines.

And even before this softening, there was much in the early, fire-and-brimstone approach to usability that was actually of value to web designers. I should have been open-minded enough to benefit from the helpful bits and wink at the rest. But I was too busy defending my creative turf (not to mention reliving old battles with badly run focus groups and cocky account execs) to look closer and see that usability mainly means designing for the people who use my site.

And then along came Mary

Don’t Make Me Think. Starting with his book’s very title, Steve Krug made me see. Advancing from one low-key, guilt-free, common-sense premise to the next, Don’t Make Me Think made me think. And think. Above all, it made me rethink.

Icon from archived Happy Cog projects page (non-hover state).

Consider an archived Happy Cog portfolio page. Ignore the problem of orange-on-orange, which falls more under accessibility than usability. Focus on the page’s unusual means of presenting written content. When you click an icon, relevant text emerges. Click again, and it disappears. For instance, when you gently tap Cate Blanchett, you get text about the Charlotte Gray website we designed for Warner Bros.

It’s nifty stuff—at least for a non-Flash, pre-Ajax site. Or is it? I had fun designing it; other designers had fun reverse-engineering it and adding the same show and hide effects to their pages. I even shared the code in the first edition of Designing With Web Standards, mainly to prove how easy it was to use CSS, JavaScript, and the DOM to create playful interfaces that roughly mimicked the behavior of applications and kiosk-based presentations.

But the page’s usability is awful. How could a visitor possibly know that she is supposed to click an icon to reveal pertinent hidden text? She couldn’t. Hence the explanatory text at the top of the page. If you have to explain how your interface works, maybe you need to rethink the whole thing.

Steve Krug didn’t drop by my house to tell me my design was overwrought and under-thought. And he wouldn’t have put it that way, anyway. He’s way too nice a guy, not to mention way too experienced a consultant, to base his tutelage on insults. But his book woke my conscience and reshaped how I approach my craft.

His book, which you can read during a business flight, makes a convincing case for studying your audience, learning their needs, creating pathways of experience that you hope will meet those needs, and then testing, testing, testing.

Krug convinces because he is witty, and charming, and humble, and mostly because his ideas make sense and ring true. Boiled down, the essence of usability is the same as the essence of all good design: Think more so your users don’t have to think at all.

Design, after all, is about solving problems. Start with your user’s.

Please come to Boston

An Event Apart Boston 2007

My Event Apart co-host Eric Meyer and I don’t know exactly what Steve Krug will talk about on March 26 or 27 on our stage at Marriott Copley Place. We only know we will be privileged to be among his listeners. Registration for An Event Apart Boston 2007 will open in January, 2007. (A lot) more information about the show will be available very soon.

In coming weeks, in these pages, I’ll share what each of our exciting speakers means to me. Meanwhile, enough about me and Steve Krug. What does Steve Krug mean to you?

[tags]aneventapart, Steve Krug, usability, design, webdesign, boston, conferences[/tags]

Filed under: An Event Apart, better-know-a-speaker, Design, events, people

Comments off.

16 Nov 2006 9 am eastern

Enable caching to upload files

You’re an Apple Safari browser user. After upgrading to OS X 10.4.8, you are unable to upload files to 37signals’s Basecamp via that application’s easy, web-based uploading tools. Or you are unable to upload your logo to Boxes & Arrows’s events listing. Or you are stymied in your efforts to upload your photos to JPG Mag.

The fault lies not with Basecamp or Boxes & Arrows or JPG. Nor is it strictly because you’re using an Intel Mac. Camino, Firefox, and Opera still let you upload images over http. The problem is Safari. But not every Intel-Mac-wielding Safari user suffers from it. Many continue to upload files after upgrading to 10.4.8. They glance pityingly at you out their passenger windows as they speed past.

What is the problem? You’re a web designer. As a web designer, you’ve used a third-party product like Safari Enhancer to disable caching in your browser.

If you don’t disable caching in your browser, then Safari becomes kind of useless to you as a web development tool, because Safari hangs onto files like a junkyard dog clomps onto a postman’s thigh. Safari will hold onto outdated CSS, outdated text, outdated images. You’ll quit and restart. You’ll check your SFTP settings repeatedly, wondering why you keep uploading updated content to your web project, but Safari keeps showing you outdated content.

Safari shows outdated content for hours after other browsers (even browsers with caching enabled) have recognized that something changed. Safari does this because it makes browsing faster for ordinary users who are not web designers. It works. Unfortunately, what makes Safari fast and fun for ordinary users makes it a pain for web designers—unless they disable caching.

Before 10.4.8, you could disable caching in Safari and still upload files over http. After 10.4.8, you can’t. It’s not a feature, it’s a bug. Until Apple fixes it, you can leave caching disabled in Safari and use Firefox, Camino, or Opera as your default browser—or re-enable caching, and add an hour of Stupid Time to your web development and testing process.

[tags]web design, apple, mac, os x, safari, browsers, web development[/tags]

Filed under: Browsers, Design, development

Comments off.

14 Nov 2006 3 pm eastern

Return of the Son of XHTML Fist

Issue No. 227 of A List Apart, For People Who Make Websites,™ heralds the revivification and expansion of the A List Apart Store and T-Shirt Emporium.

Redesign/Realign shirt

We are now offering new T-shirt designs that tell the world you are a rebel, a maverick, an original in a world of copies (and you know HTML): Web 2.0, -9999px, and Redesign/Realign. We’ve also stocked gently remixed classics: Warning Sign and XHTML Fist AKA Six Fingers of Doom. And, yes, traditionalists can still stock up on timeless, unchanged ALA logo shirts, avec wreath.

When you’ve donned your shirt, strike a pose in our spanking new (and hard-to-pronounce) A List Apart Shirts Flickr Group.

Testing proves testing works

As you can imagine, choosing the right T-shirt production and fulfillment partner required a massive mental effort, supported by modern research methodologies. We studied all the production and fulfillment companies out there, analyzing market data and poring over spreadsheets. But we didn’t stop there.

We completed a 72-hour card-sorting exercise (with no bathroom breaks), ran double-blind focus groups, and even hired our friends who used to call themselves information architects.

Sure, it was work—weeks of it. But it was worth it. Our grueling, science-based efforts paid off by revealing, as no sloppy shortcuts could have, the best possible choice of vendors. In short, we hired Jason’s wife’s company (also Nif’s!). They are awesome. (More shirt coverage is available at Jason Santa Maria dot com.)

All this … and content, too!

But this issue of A List Apart is not merely about re-opening our store’s doors. It’s about opening your mind. And in this issue, Rob Swan and Matthew O’Neill help us do just that:

In Defense of Difficult Clients

by Rob Swan

We’ve all had bad clients. All too rarely do we find ourselves working for someone who understands what we do, respects our craft, and defers to our judgement. But do bad clients get a bad rap? Can we turn bad client relationships into good learning experiences? Can our worst clients help us better understand and articulate our highest beliefs about our calling? Well, anyway, Rob Swan thinks so. Read this and see what you think.

Super-Easy Blendy Backgrounds

by Matthew O’Neill

Gradients and bevels, bevels and gradients. Bevels, bevels, bevels. Gradients, gradients, gradients. And sometimes, drop-shadows. But mostly, and especially, gradients. Nothing says “Buy me, Google,” like a nice gradient background—especially in a navigation bar. Wouldn’t it be swell if you could get all that goodness without opening Photoshop every time you needed a little gradient bliss? Matthew O’Neill explains how you can. Happy coding and selling out!

Filed under: A List Apart, Community, Design, development, fashion

Comments off.