AEA Minneapolis

An Event Apart Minneapolis 2010.

An Event Apart, the design conference for people who make websites, has posted its Minneapolis 2010 schedule. Join Eric Meyer and me and ten amazing guest speakers on July 26-27, 2010 for two great days of design, code, and content:

Monday, July 26

9:00am–10:00am

Put Your Worst Foot Forward

Jeffrey Zeldman, author, Designing With Web Standards, 3rd Ed.

Nothing teaches like failure. Web standards godfather and An Event Apart cofounder Jeffrey Zeldman shares some of his biggest blunders as a designer, entrepreneur, and creative director, and how each mistake taught him to be better at what he does. Study what the problem was and why the mistake seemed like the right answer at the time; see why it turned out to be a really bad idea after all; and learn the great positive lesson each mistake taught.

10:15am–11:15am

DIY UX: Give Your Users an Upgrade

Whitney Hess, Strategic Partner, Happy Cog

Have you fallen in love with your solution and forgotten the original problem? Are you certain that your product actually makes people’s lives better? Not every company can hire someone like me to help you listen to your users, so you’re gonna have to learn how to do some of this stuff yourself. I’ll show you techniques to find out who your users are, what they really need and how to go about giving it to them in an easy to use and pleasurable way. And it doesn’t have to bankrupt you or kill your release date.

11:30am–12:30pm

The CSS3 Experience

Dan Cederholm, author, Bulletproof Web Design and Handcrafted CSS

In a fast-paced hour of design ideas and techniques, learn how advanced CSS and CSS3 can add richness to your site’s experience layer, and discover the role CSS3 can play in enhancing interactivity.

12:30pm–2:00pm: LUNCH

2:00pm–3:00pm

Mobile First!

Luke Wroblewski, author, Web Form Design

More often than not, the mobile experience for a web application or site is designed and built after the PC version is complete. Learn the three reasons web applications should be designed for mobile first instead: mobile is exploding; mobile forces you to focus; and mobile extends your capabilities.

3:15pm–4:15pm

Learning To Love Humans—Emotional Interface Design

Aarron Walter, author, Building Findable Websites

Humans, though cute and cuddly, are not without their flaws, which makes it a challenge to design for them. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand. Aarron will introduce you to the emotional usability principle—a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your sites and applications more engaging to the humans they serve.

4:30pm–5:30pm

Anatomy of a Design Decision

Jared Spool, Founder, User Interface Engineering

What separates a good design from a bad design are the decisions that the designer made. Jared will explore the five styles of design decisions, showing you when gut instinct produces the right results and when designers need to look to more user-focused research.

7:00pm??pm

Opening Night Party

Sponsored by (mt) Media Temple

Media Temple’s opening night parties for An Event Apart are legendary. Join the speakers and hundreds of fellow attendees for great conversation, lively debate, loud music, hot snacks, and a seemingly endless stream of grown-up beverages. Venue details will be announced soon.

Tuesday, July 27

9:00am–10:00am

Everything Old Is New Again

Eric Meyer, author, CSS: The Definitive Guide, 3rd Ed.

Faux columns. Sliding doors. Image replacement. We rely on these techniques on a near-daily basis, but how will they be affected by the expanding vocabulary of CSS3? Will they be reworked, slimmed down, or abandoned altogether? An Event Apart cofounder and CSS mastermind Eric Meyer pulls some old standbys out of the toolbox and applies the capabilites of CSS3 to see how they can be made leaner, meaner, and more powerful.

10:15am–11:15am

Paranormal Interactivity

Jeremy Keith,
author, DOM Scripting

Interaction is the secret sauce of the web. Understanding interaction is key to understanding the web as its own medium—it’s not print, it’s not television, and it’s certainly not the desktop. Find out how to wield HTML, CSS, and JavaScript to craft experiences that are native to the web.

11:30am–12:30pm

Patterns, Components, and Code, Oh My!

Erin Malone, co-author, Designing Social Interfaces

Designing with patterns sounds like a great idea on the surface. But what does it really take to identify and write patterns? And just what do you do with them once they are created? Rounding out the pattern library with components and code can help prototyping and design move faster, leaving time to solve more challenging problems. This session will discuss the benefits of and issues that arise from designing with patterns, and show how to stay creative while doing so.

12:30pm–2:00pm: LUNCH

2:00pm–3:00pm

Message and Medium: Better Content by Design

Kristina Halvorson, author, Content Strategy for the Web

Designing for multichannel content delivery (mobile, anyone?) means an entirely new set of considerations and challenges for web professionals everywhere. Unfortunately for content creators, it’s nearly impossible to predict whether their writing will maintain impact and readability across each and every platform. But forget about the medium for a minute; it’s the message that matters most. We’ll learn how to identify your key business messages, how they inform your content strategy, and how they impact multi-channel content development and design.

3:15pm–4:15pm

A Dao of Flexibility

Ethan Marcotte, co-author, Handcrafted CSS and Designing With Web Standards, 3rd Edition

“The Way is shaped by use, but then the shape is lost.” Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display. Are our designs ready? Explore sites that think beyond the desktop and have successfully adapted to their users’ habits. Ethan will also discuss how bring an extra level of craftsmanship to our page layouts, and revisit popular CSS techniques in this ever-changing environment.

4:30pm–5:30pm

How the Web Works

Jeff Veen, author, Art & Science of Web Design

Turns out that the fundamental principles that led to the success of the web will lead you there, too. Drawing on 15 years of web design and development experience, Jeff will take you on a guided tour of what makes things work on this amazing platform we’re all building together. You’ll learn how to stop selling ice, why web browsers work the way they do, and where Rupert Murdoch can put his business model.


Register through June 28 and save $100 off your conference pass. Hurry: tickets are first-come, first-served, and seating is limited.


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