A List Apart No. 304

A List Apart Issue No. 304. Illustration by Kevin Cornell.

Issue 304 of A List Apart for people who make websites squeezes JavaScript and delves into faceted navigation:

Better JavaScript Minification

by NICHOLAS C. ZAKAS

Like CSS, JavaScript works best when stored in an external file that can be downloaded and cached separately from our site’s individual HTML pages. To increase performance, we limit the number of external requests and make our JavaScript as small as possible. The inventor of Extreme JavaScript Compression with YUI Compressor reveals coding patterns that interfere with compression, and techniques to modify or avoid these coding patterns so as to improve the YUI Compressor’s performance. Think small and live large.

Design Patterns: Faceted Navigation

by PETER MORVILLE, JEFFERY CALLENDER

Faceted navigation may be the most significant search innovation of the past decade. It features an integrated, incremental search and browse experience that lets users begin with a classic keyword search and then scan a list of results. It also serves up a custom map that provides insights into the content and its organization and offers a variety of useful next steps. In keeping with the principles of progressive disclosure and incremental construction, it lets users formulate the equivalent of a sophisticated Boolean query by taking a series of small, simple steps. Learn how it works, why it has become ubiquitous in e-commerce, and why it’s not for every site.


Illustration: Kevin Cornell for A List Apart


Touch Gesture Reference Guide

The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces including iPhone, Windows 7, Windows Phone 7, Android, and more.

The guide contains an overview of the core gestures used for most touch commands. It tells how to use these gestures to support major user actions; provides visual representations of each gesture to use in design documentation and deliverables; and additionally provides an outline of how popular software platforms support core touch gestures. All in seven pretty PDF pages. It was conceived, researched, illustrated, and designed by Craig Villamor, Dan Willis, Luke Wroblewski, and Jennifer Rhim (document design).

Platform support information comes from the following sources:


Design Lessons from iPad

Comparison of iMac and iPad screens at informationarchitects.jp.

It’s only Wednesday but we already have our link of the week. Although they call it merely a “quick write-up” (and it is a fast read), iA’s mini-compendium of design insights before and after the appearance of the iPad at their office should be required reading for all web, app, and/or interaction designers.

In the equivalent of a breathlessly quick seminar presentation, iA discusses typographic resolution and feel; the effect of the device’s brilliant contrast on readability; the kitsch produced by rigorously adhering to Apple’s “make it 3D” guidelines; whether metaphors work; and more—all of it well worth far more than the little time it will take you to absorb.

In particular, I call your attention to the section entitled, “Interaction Design: So What Works?” Although intended as a guideline to producing well-tuned iPad apps, it also works splendidly as a mini-guide to creating better websites, much like Luke Wroblewski’s brilliant “Mobile First” presentation at last week’s An Event Apart, which carried a similar message:

  1. The limited screen estate and the limited credit on the number of physical actions needed to complete one task (don’t make me swipe and touch too often), pushes the designer to create a dead simple information architecture and an elaborate an interaction design pattern with a minimal number of actions. This goes hand in hand with the economic rule of user interaction design: Minimize input, maximize output.
  2. Since the smallest touch point for each operation is a circle of the size of a male index finger tip, we cannot cram thousands of features (or ads!) in the tight frame; we have to focus on the essential elements. Don’t waste screen estate and user attention on processing secondary functions.
  3. We found that the iPad applications we designed, made it relatively easy to be translated back into websites. The iPad could prove to be a wonderful blue print to design web sites and applications. If it works on the iPad, with a few tweaks, it will work on a laptop.

Via iA » Designing for iPad: Reality Check.

An Event Apart Seattle

Above: Part of my deck for “Put Your Worst Foot Forward,” a talk on learning from mistakes at An Event Apart Seattle 2010.

Greetings, web design fans. I’m in Seattle doing the final prep for three days of kick-ass design, code, and content. Starting Monday, April 5 and running through Wednesday, April 8, An Event Apart Seattle 2010 features 13 great speakers and 13 sessions, and has been sold out for over a month. A Day Apart, a special one-day learning experience on HTML5 and CSS3, follows the regular conference and is led by Jeremy Keith and Dan Cederholm.

The all-star cast includes …

… And that’s just the first day.

There are also two parties (sponsored by our good friends at Media Temple and MSNBC) and seven more great speakers with topics of interest to all standards-based web designers.

If you can’t be with us, follow the Twitter stream live on A Feed Apart.

What the FAQ?

A List Apart

In Issue No. 303 of A List Apart, for people who make websites, we question the received wisdom about FAQs, and learn that, in the land of the colorblind, contrast is king.

Contrast is King
by LESLIE JENSEN-INMAN

Being colorblind doesn’t mean not seeing color. It means seeing it differently. If colorblindness challenges the colorblind, it also challenges designers. Some of us think designing sites that are colorblind-friendly means sticking with black and white, or close to it. But the opposite is true. Using contrast effectively not only differentiates our site’s design from others, it’s the essential ingredient that can make our content accessible to every viewer, including the colorblind. By understanding contrast, we can create websites that unabashedly revel in color.

Infrequently Asked Questions of FAQs
by R. STEPHEN GRACEY

We take FAQs for granted as part of our sites’ content, but do they really work, or are they a band-aid for poor content? FAQ-hater R. Stephen Gracey explores the history and usability of FAQs. Learn how to collect, track, and analyze real user questions, sales inquiries, and support requests—and use the insights gained thereby to improve your site’s content, not just to write a FAQ. Find out when FAQs are an appropriate part of your content strategy, and discover how to ensure that your FAQ is doing all it should to help your customers.

Illustration © by Kevin Cornell for A List Apart


Gowalla My Dreams

What if Gowalla and Foursquare could communicate seamlessly with Address Book? What if Google Maps contained the postal address, company names, and primary phone numbers of every pin on the map? All this information could be marked up in Microformats and standard HTML on optional detail pages you could visit with a click from your web browser or phone. Heck, while we’re at it, let’s add Bump, an iPhone app that lets two people share contact data the same way they share DNA—except that in this case they bump iPhones.

What if every time you used Gowalla to check into or found a spot, you had the option to add that spot’s street address, company name(s), and so on to your Address Book? Imagine meeting a potential client for the first time in an unfamiliar city or neighborhood. No longer simply a passive repository of spots you create, Gowalla or Foursquare could function as a guide, helping you locate the unfamiliar address to make your meeting on time.

As you check into your meeting in reality, you could notify not only Facebook and Twitter (as you can today) but also Basecamp, which would optionally check off a radio box, marking you as having arrived at your meeting.

Something like this (and much more than this) will surely happen soon, thanks to APIs and ubiquitous standard platforms. You just feel, when you’re around people developing the best new web software, that something new is happening, and that many strands are coming together.

We used to imagine a dystopian future in which Big Brother knew everything you did. Later it was the machines that knew. We’ve been talking about ubiquitous computing for years, and we’ve pictured it happening somehow without necessarily addressing the how—that is, some of the brightest and most inspiring futurists have concerned themselves more with the ethical and cultural transformative dimensions of ubiquitous computing than with the technical nuts and bolts of how it’s supposed to get done.

I’m thinking the nuts and bolts are here. To me it seems that it is already happening. The web is the platform. HTML, CSS, JavaScript/JQuery, Ruby, and PHP are the tools. I’m thinking an uplifting (non-dystopian) ubiquitous computing is going to get done with the stuff we already use every day. Am I dreaming?


Digital books: the medium changes the message

Content with form can change meaning when reformatted.

Content with form—Definite Content—is almost totally the opposite of Formless Content. Most texts composed with images, charts, graphs or poetry fall under this umbrella. It may be reflowable, but depending on how it’s reflowed, inherent meaning and quality of the text may shift.”

—Craigmod, Books in the Age of the iPad


Model Site

Blissfully Aware site redesign.

Web designer Joshua Lane, currently best know for doing fancy web stuff at Virb.com, has overhauled his personal site in ways that are aesthetically pleasing and visually instructive.

Like all good site redesigns, this one starts with the content. Whereas the recent zeldman.com redesign emphasizes blog posts (because I write a lot and that’s what people come here for), Lane’s redesign appropriately takes exactly the opposite approach:

There is a much smaller focus on blog posts (since I don’t write often), and a much larger focus on the things I do elsewhere (Twitter, Flickr, Last.fm etc). Individually, I don’t contribute a great deal to each of those services. But collectively, I feel like it’s a good amount of content to showcase (as seen on the home page). And something that feels like a really good representation of “me.”

Not one to ignore the power of web fonts, Lane makes judicious use of Goudy Bookletter 1911 from The League of Movable Type, an open-source type site founded by Caroline and Micah, featuring only “well-made, free & open-source, @font-face ready fonts.” (Read their Manifesto here.)

The great Barry Schwartz based his Goudy Bookletter 1911 on Frederic Goudy’s Kennerley Oldstyle, a font Schwartz admires because it “fits together tightly and evenly with almost no kerning.” Lane inserts Schwartz’s open-source gem via simple, standards-compliant CSS @font-face. Because of its size, it avoids the secret shame of web fonts, looking great in Mac and Windows.

But considered type is far from the redesigned site’s only nicety. Among its additional pleasures are elegant visual balance, judicious use of an underlying horizontal grid, and controlled tension between predictability and variation, ornament and minimalism. Restraint of color palette makes photos, portfolio pieces, and other featured elements pop. And smart CSS3 coding allows the designer to play with color variations whenever he wishes: “the entire color scheme can be changed by replacing a single background color thanks to transparent pngs and rgba text and borders.”

In short, what Lane has wrought is the very model of a modern personal site: solid design that supports content, backed by strategic use of web standards.


Fold, Spindle

Another generation of technology has passed and Unicode support is almost everywhere. The next step is to write software that is not just “internationalized” but truly multilingual. In this article we will skip through a bit of history and theory, then illustrate a neat hack called accent-folding. Accent-folding has its limitations but it can help make some important yet overlooked user interactions work better.

Accent Folding for Auto-Complete by CARLOS BUENO in A List Apart Issue No. 301

Illustration: Kevin Cornell for A List Apart


A List Apart 300

Issue 300 of A List Apart for people who make websites solves password-related usability problems with a dash of JavaScript, and employs content strategy to help your site do the right thing at the right time:

The Problem with Passwords

by LYLE MULLICAN

Abandoning password masking as Jakob Nielsen suggests could present serious problems, undermining a user’s trust by failing to meet a basic expectation. But with design patterns gleaned from offline applications, plus a dash of JavaScript, we can provide feedback and reduce password errors without compromising the basic user experience or losing our visitors’ trust.

Words that Zing

by COLLEEN JONES

When someone consults a website, there is a precious opportunity not only to provide useful information but also to influence their decision. To make the most of this opportune moment, we must ensure that the site says or does precisely the right thing at precisely the right time. Understanding the rhetorical concept of kairos can help us craft a context for the opportune moment and hit the mark with appropriately zingy text.

Mandy Brown

Our 300th issue also marks the debut of contributing editor Mandy Brown. Mandy is a Creative Director at Etsy. She worked for nearly a decade at the venerable publishing house W. W. Norton & Company, where her work involved everything from book design to web design to writing about design. She writes about the reading experience at A Working Library. We are thrilled to add Mandy to our creative team.


Illustration: Kevin Cornell for A List Apart