“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

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.

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

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.

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

Dan Benjamin and yours truly discuss the secret history of blogging, transitioning from freelance to agency, the story behind the web standards movement, the launch of A Book Apart and its first title, HTML5 For Web Designers by Jeremy Keith, the trajectory of content management systems, managing the growth of a design business, and more in the inaugural episode of the Pipeline.

Live from San Francisco, it’s An Event Apart, for people who make websites. If you can’t join us here today and tomorrow, enjoy the live feed, designed and coded by Nick Sergeant and Pete Karl.

Also:

• An Event Apart San Francisco Flickr pool, featuring the photography of Kris Krug plus the attendees of AEA.
• An Event Apart Caption Contest
• They’re Letting Designers Code Now? — ZDNet live-blogs Dave Shea’s An Event Apart presentation
• Seducing Your Users With Web Design — ZDNet live-blogs Andy Budd’s An Event Apart presentation
• Upcoming listing, AEA San Francisco

Composed at The Palace Hotel. Short URL: zeldman.com/?p=3208.

Issue No. 295 of A List Apart emphasizes words and experiences that communicate.

Can You Say That in English? Explaining UX Research to Clients

by DAVID SHERWIN

It’s hard for clients to understand the true value of user experience research. As much as you’d like to tell your clients to go read The Elements of User Experience and call you back when they’re done, that won’t cut it in a professional services environment. David Sherwin creates a cheat sheet to help you pitch UX research using plain, client-friendly language that focuses on the business value of each exercise.

You Can Get There From Here: Websites for Learners

by AMBER SIMMONS

“Content-rich” is not enough. Most websites are not learner-friendly. As an industry, we haven’t done our best to make our content-rich sites suitable for learning and exploration. Learners require more from us than keywords and killer headlines. They need an environment that is narrative, interactive, and discoverable. Amber Simmons tells how to begin creating rich content sites that invite and repay exploration and discovery.

Illustration: © Kevin Cornell for A List Apart

Short URL: zeldman.com/?p=2851

In Issue No. 294 of A List Apart, for people who make websites: learn what usability testing is and isn’t good for, and discover the five warning signs of a bad client relationship (and what to do about them).

The Myth of Usability Testing

by ROBERT HOEKMAN JR.

Usability evaluations are good for many things, but determining a team’s priorities is not one of them. The Molich experiment proves a single usability team can’t discover all or even most major problems on a site. But usability testing does have value as a shock treatment, trust builder, and part of a triangulation process. Test for the right reasons and achieve a positive outcome.

Getting to No

by GREG HOY

A bad client relationship is like a bad marriage without the benefits. To avoid such relationships, or to fix the one you’re in, learn the five classic signs of trouble. Recognizing the never-ending contract revisionist, the giant project team, the vanishing boss and other warning signs can help you run successful, angst-free projects.

Illustration by Kevin Cornell for A List Apart.

Short URL: zeldman.com/?p=2725

Our classic orange avatar has turned blue to celebrate the release of Designing With Web Standards 3rd Edition by Jeffrey Zeldman with Ethan Marcotte. This substantial revision to the foundational web standards text will be in bookstores across the U.S. on October 19, 2009, with international stores to follow. Save 37% off the list price when you buy it from Amazon.com.

• What’s new in the 3rd Edition
• Mini-site

Short URL: zeldman.com/?p=2730

You must read High Performance Web Sites Blog’s (yes, that’s really it’s name) @font-face and performance if you’re using @font-face to embed web-licensed fonts on sites you design (as I’ve done here).

An Event Apart Chicago has sold out. If you wanted to join us in Chicago on October 12–13 for two days of design, code, and content, we’re sorry to announce that the show has completely sold out. There’s not a spare seat to be had.

That means, if you don’t already have a ticket, you won’t be able to watch Jason Santa Maria, Kristina Halvorson, Dan Brown, Whitney Hess, Andy Clarke, Aaron Gustafson, Simon Willison, Luke Wroblewski, Dan Rubin, Dan Cederholm, and your hosts Eric Meyer and Jeffrey Zeldman share the latest ideas in design, development, usability, and content strategy.

We’re sorry about that.

But, hey. If you can’t be with us in Chicago next week, please join us in San Francisco later this year. Or come see us in 2010 at any of these fine cities:

• Seattle (April 5–7, 2010)
• Boston (May 24–25, 2010)
• Minneapolis (August 2–3, 2010)
• Washington DC (Sept. 16–17, 2010)
• San Diego (Nov. 1–2, 2010)

Tickets for all our 2010 shows go on sale November 2nd, 2009, and are first-come, first served.

To keep up with the latest AEA doings, become a fan on Facebook, join our Ning social network, or subscribe to our mailing list.

Short URL: zeldman.com/?p=2651

The Happy Cog-designed social network for Brighter Planet is now in public beta. Come on down and kick the tires. Brighter Planet helps you take control of your environmental footprint: measure your climate impact, discover simple ways to reduce it, track your progress, and share your experiences with other people who who want to make a difference.

Happy Cog’s New York office developed this project. The team:

• Aaron Gustafson, front-end development (blog, articles, Twitter)
• Naz Hamid, design (website, Twitter)
• Whitney Hess, user experience (blog, Twitter).
• Erin Kissane, content strategy (articles, blog, Twitter)
• Kelly McCarthy, project manager
• Jeffrey Zeldman, creative director

This truly collaborative project could not have been conceived or completed without the brilliant and generous work of Brighter Planet team members including:

• CTO Adam Rubin (bio, blog, Twitter)
• Co-founder and Product Design Director Andy Rossmeissl (Twitter, bio)
• Senior Systems Engineer Seamus Abshere (bio)
• Rails developer Rich Sturim (Twitter, bio)

Not only is this young, passionate team dedicated to reducing climate change and all things green, they are also marketing kingpins, shrewd user experience designers, and badass developers.

We love our clients. These folks and this project are dear to us. And it’s a fun way to make a difference. I hope you’ll check out Brighter Planet’s new beta social network.

Tags: brighterplanet, climatechange, beta, site, launch, launches, webdesign, projects, work, happycog

When Apple chose KHTML rather than Mozilla Gecko as the basis for its Safari browser, some of us in the web standards community scratched our heads. Sure, KHTML, the rendering engine in Konqueror, was open-source and standards-compliant. But, at the time, Gecko’s standards support was more advanced, and Gecko-based Mozilla, Camino, and even Netscape 6 felt more like browsers than Konqueror. Gecko browsers had the features, the comparative maturity, and the support of the standards community. Apple’s adoption of KHTML, and creation of a forked version called Webkit, seemed puzzling and wrong.

Yet, thanks largely to the success of the iPhone, Webkit (Apple’s open source version of KHTML) in the form of Safari, has been a surprising force for good on the web, raising people’s expectations about what a web browser can and should do, and what a web page should look like. Had Apple chosen Gecko, they might not have been able to so powerfully influence mainstream consumer opinion, because the fully formed, distinctly mature Gecko brand and experience could easily have overshadowed and constrained Apple’s contribution. (Not to mention, tolerating external constraint is not a game Apple plays.)

Just how has mobile Safari, a relative latecomer to the world of standards-based browsing, been able to make a difference, and what difference has it made?

The platform paradox

Firefox and Opera were wonderful before any Webkit-based browser reached maturity, but Firefox and Opera were and are non-mainstream tastes. Most people use Windows without thinking much about it, and most Windows users open the browser that comes with their operating system, again without too much thought. This doesn’t make them dumb and us smart. We are interaction designers; they are not.

Thus, the paradox: even though Firefox and Opera offered powerfully compelling visions of what could be accomplished with web standards back when IE6 offered a comparatively poor experience, Firefox and Opera, not unlike Linux and Mac OS, were platforms for the converted. If you knew enough to want Firefox and Opera, those browsers delivered features and experience that confirmed the wisdom of your choice. If you didn’t know to want them, you didn’t realize you were missing anything, because folks reading this page sweated like Egyptian pyramid builders to make sure you had a good experience despite your browser’s flaws.

The power to convert

Firefox and Opera are great browsers that have greatly advanced the cause of web standards, but because they are choices in a space where most people don’t make choices, their power to convert is necessarily somewhat truncated. The millions mostly don’t care what happens on their desktop. It’s mostly not in their control. They either don’t have a choice or don’t realize they have one, and their expectations have been systematically lowered by two decades of unexciting user experience.

By contrast, the iPhone functions in a hot realm where consumers do make choices, and where choices are badges. Of course many people are forced economically to choose the cheap or free phone that comes with their mobile service. But many others are in a position to select a device. And the iPhone is to today’s urban professional gym rat what cigarettes and martinis were to their 1950s predecessors. You and I may claim to choose a mobile device based on its features, but the upwardly mobile (pardon the pun), totally hot person standing next to us in the elevator may choose their phone the same way they choose their handbag. And now that the iPhone sells for $99, more people can afford to make a fashion decision about their phone—and they’ll do it.

Mobile 2.0

Although there were great phones before the iPhone, and although the iPhone has its detractors, it is fair to say that we are now in a Mobile 2.0 phase where people expect more than a Lynx-like experience when they use their phone to access the internet. Mobile Safari in iPhone, along with the device’s superior text handling thanks to Apple and Adobe technologies, is changing perceptions about and expectations of the web in the same way social networking did, and just at the historical moment when social networking has gone totally mainstream.

Oprah’s on Twitter, your mom’s on Twitter, and they’re either using an iPhone or a recently vastly upgraded Palm or Blackberry that takes nearly all of its cues from the iPhone. Devices that copy the iPhone of course mostly end up selling the iPhone, the same way Bravo’s The Fashion Show would mostly make you miss Project Runway if you even watched The Fashion Show, which you probably haven’t.

Safari isn’t perfect, and Mobile Safari has bugs not evident in desktop Safari, but Webkit + Apple = secret sauce selling web standards to a new generation of consumers and developers.

Read more

• Web Fonts, HTML 5 Roundup: Worthwhile reading on the hot new web font proposals, and on HTML 5/CSS 3 basics, plus a demo of advanced HTML 5 trickery. — 20 July 2009
• HTML 5: Nav Ambiguity Resolved. An e-mail from Chairman Hickson resolves an ambiguity in the nav element of HTML 5. What does that mean in English? Glad you asked! — 13 July 2009
• In Defense of Web Developers: Pushing back against the “XHTML is bullshit, man!” crowd’s using the cessation of XHTML 2.0 activity to condescend to—or even childishly glory in the “folly” of—web developers who build with XHTML 1.0, a stable W3C recommendation for nearly ten years, and one that will continue to work indefinitely. — 7 July 2009
• XHTML DOA WTF: The web’s future isn’t what the web’s past cracked it up to be. — 2 July 2009

Tags: webdesign, webstandards, design, standards, browsers, CSS, webkit, gecko, mozilla, firefox, opera, safari, mobile, mobilesafari, iphone

There was a point in the 90s when I felt like a sucker for doing HTML and CSS.”

The .net Zeldman interview is available for your downloading pleasure (4.2 MB PDF). For more of the best in web design and development, visit netmag.co.uk.

Update, 27 May 2009

An HTML version of the interview has now been posted on .net’s website.

Tags: webdesign, webdevelopment, magazine, interview, .net, netmag, interview, interviews, zeldman, jeffreyzeldman

In Issue No. 284 of A List Apart, for people who make websites:

Creating Intrinsic Ratios for Video

by THIERRY KOBLENTZ

Have you ever wanted to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video and some padding property magic, you can. Thierry Koblentz shows us how.

Burnout

by SCOTT BOMS

Does every day feel like a bad day? Blurry boundaries between work and home, and the “always on” demands of the web can lead to depression and burnout. Learn the signs of burnout and how to maintain your bliss.

And don’t miss this issue’s Editor’s Choice:

The ALA Primer: A Guide for New Readers

by ERIN LYNCH

New to A List Apart? Welcome! ALA’s own Erin Lynch suggests a few good places to start reading. (Originally ran: September 12, 2006.)