2010: The Year in Web Standards

WHAT A YEAR 2010 has been. It was the year HTML5 and CSS3 broke wide; the year the iPad, iPhone, and Android led designers down the contradictory paths of proprietary application design and standards-based mobile web application design—in both cases focused on user needs, simplicity, and new ways of interacting thanks to small screens and touch-sensitive surfaces.

It was the third year in a row that everyone was talking about content strategy and designers refused to “just comp something up” without first conducting research and developing a user experience strategy.

CSS3 media queries plus fluid grids and flexible images gave birth to responsive web design (thanks, Beep!). Internet Explorer 9 (that’s right, the browser by Microsoft we’ve spent years grousing about) kicked ass on web standards, inspiring a 10K Apart contest that celebrated what designers and developers could achieve with just 10K of standards-compliant HTML, CSS, and JavaScript. IE9 also kicked ass on type rendering, stimulating debates as to which platform offers the best reading experience for the first time since Macintosh System 7.

Even outside the newest, best browsers, things were better than ever. Modernizr and eCSStender brought advanced selectors and @font-face to archaic browsers (not to mention HTML5 and SVG, in the case of Modernizr). Tim Murtaugh and Mike Pick’s HTML5 Reset and Paul Irish’s HTML5 Boilerplate gave us clean starting points for HTML5- and CSS3-powered sites.

Web fonts were everywhere—from the W3C to small personal and large commercial websites—thanks to pioneering syntax constructions by Paul Irish and Richard Fink, fine open-source products like the Font Squirrel @Font-Face Generator, open-source liberal font licensing like FontSpring’s, and terrific service platforms led by Typekit and including Fontdeck, Webtype, Typotheque, and Kernest.

Print continued its move to networked screens. iPhone found a worthy adversary in Android. Webkit was ubiquitous.

Insights into the new spirit of web design, from a wide variety of extremely smart people, can be seen and heard on The Big Web Show, which Dan Benjamin and I started this year (and which won Video Podcast of the Year in the 2010 .net Awards), on Dan’s other shows on the 5by5 network, on the Workers of the Web podcast by Alan Houser and Eric Anderson, and of course in A List Apart for people who make websites.

Zeldman.com: The Year in Review

A few things I wrote here at zeldman.com this year (some related to web standards and design, some not) may be worth reviewing:

iPad as the New Flash 17 October 2010
Masturbatory novelty is not a business strategy.
Flash, iPad, and Standards 1 February 2010
Lack of Flash in the iPad (and before that, in the iPhone) is a win for accessible, standards-based design. Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first.
An InDesign for HTML and CSS? 5 July 2010
while our current tools can certainly stand improvement, no company will ever create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.” The assumption that a such thing is possible suggests a lack of understanding.
Stop Chasing Followers 21 April 2010
The web is not a game of “eyeballs.” Never has been, never will be. Influence matters, numbers don’t.
Crowdsourcing Dickens 23 March 2010
Like it says.
My Love/Hate Affair with Typekit 22 March 2010
Like it says.
You Cannot Copyright A Tweet 25 February 2010
Like it says.
Free Advice: Show Up Early 5 February 2010
Love means never having to say you’re sorry, but client services means apologizing every five minutes. Give yourself one less thing to be sorry for. Take some free advice. Show up often, and show up early.

Outside Reading

A few things I wrote elsewhere might repay your interest as well:

The Future of Web Standards 26 September, for .net Magazine
Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a new web?
Style vs. Design written in 1999 and slightly revised in 2005, for Adobe
When Style is a fetish, sites confuse visitors, hurting users and the companies that paid for the sites. When designers don’t start by asking who will use the site, and what they will use it for, we get meaningless eye candy that gives beauty a bad name.

Happy New Year, all!

Cure for the Common Webfont, Part 2: Alternatives to Georgia

For nearly fifteen years, if you wanted to set a paragraph of web text in a serif typeface, the only truly readable option was Georgia. But now, in web type’s infancy, we’re starting to see some valid alternatives for the king of screen serifs. What follows is a list of serif typefaces that have been tuned—and in some cases drawn from scratch—for the screen.

Stephen Coles, December 6, 2010:
Cure for the Common Webfont, Part 2: Alternatives to Georgia

Web type news: iPhone and iPad now support TrueType font embedding. This is huge.

TrueType font embedding in iPhone, Hallelujah!

TrueType font embedding has come to iPhone and iPad, Hallelujah, brothers and sisters. That is to say, Mobile Safari now supports CSS embedding of lower-bandwidth, higher-quality, more ubiquitous TrueType fonts. This is huge. Test on your device(s), then read and rejoice:

The Typekit Blog: iOS 4.2 improves support for web fonts

iOS 4.2 is also the first version of Mobile Safari to support native web fonts (in TrueType format) instead of SVG. This is also exciting news, as TrueType fonts are superior to SVG fonts in two very important ways: the files sizes are dramatically smaller (an especially important factor on mobile devices), and the rendering quality is much higher.

Ryan N.: Confirmed: TrueType Font Support on Mobile Safari on iOS 4.2

Thanks to Matt Wiebe for mentioning the rumour that Mobile Safari on iOS 4.2 supports TrueType fonts and providing a handy link to test.

TrueType

TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. TrueType has become the most common format for fonts on both the Mac OS and Microsoft Windows operating systems.

The primary strength of TrueType was originally that it offered font developers a high degree of control over precisely how their fonts are displayed, right down to particular pixels, at various font sizes. With widely varying rendering technologies in use today, pixel-level control is no longer certain in a TrueType font.

More about webfonts

If you’re coming late to the party, the following bits of required reading and listening will get you up to speed on the joys (and occasional frustrations) of “real type” on the web:

  1. Bulletproof @font-face syntax, Paul Irish, 4 September, 2009
  2. Web Fonts at the Crossing, Richard Fink, 8 June 2010, A List Apart
  3. Big Web Show Episode 1, Dan Benjamin and I discuss webtype with Ethan Dunham of Fontspring and Font Squirrel and Jeffrey Veen of Typekit
  4. Big Web Show Episode 18, Dan Benjamin and I discuss webtype, screen resolution, and more with Roger Black
  5. Thanks

    My thanks to David Berlow of Font Bureau for waking me from my Thanksgiving stupor and alerting me to this exciting slash overdue development.

Blue Beanie Day Haiku Contest – Win Prizes from Peachpit and A Book Apart

ATTENTION, web design geeks, contest fans, standards freaks, HTML5ophiles, CSSistas, grammarians, bookworms, UXers, designers, developers, and budding Haikuists. Can you do this?

Do not tell me I
Am source of your browser woes.
Template validates.

Write a web standards haiku (like that one), and post it on Twitter with the hashtag #bbd4 between now and November 30th—which happens to be the fourth international Blue Beanie Day in support of Web Standards.

Winning haikus will receive free books from Peachpit/New Riders (“Voices That Matter”) and A Book Apart.

Ethan Marcotte, co-author of Designing With Web Standards 3rd Edition and I will determine the winners.

Enter as many haikus as you like. Sorry, only one winning entry per person. Now get out there and haiku your heart out!

See you on Blue Beanie Day.

P.S. An ePub version of Designing With Web Standards 3rd Edition is coming soon to a virtual bookstore near you. Watch this space.

The future of web standards

Jeffrey Zeldman on the future of web standards.

“Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a newer, more mature, more ubiquitous web?”

The Future of Web Standards by Jeffrey Zeldman

Originally written for .net magazine, Issue No. 206, published 17 August in UK and this month in the US in “Practical Web Design” Magazine. Now you can read the article even if you can’t get your hands on these print magazines.

See also: I Guest-Edit .net magazine.

Episode 18: Roger Black on web type and templates

Roger Black

Legendary art director Roger Black guests on tomorrow’s episode of The Big Web Show, co-hosted by Dan Benjamin and taped in front of a live internet audience.

Roger co-founded the following new companies: Webtype, creators of high-end fonts for online typography; Treesaver, a platform that uses CSS, HTML, JavaScript, and the principles of responsive design to publish beautifully formatted content on any device with a web browser; Ready-Media, which designs templates for newspaper and magazine publishers (and attracts controversy); and Nomad Editions, a series of digital weeklies designed directly for mobile devices.

Roger is also a founding partner in Danilo Black, an international design agency he co-founded with Eduardo Danilo, and The Font Bureau, a leading type foundry he co-founded with David Berlow.

“He pioneered the use of computers in design, cut the best deals, and made himself synonymous with the modern magazine,” wrote Michael Wolff in a New York Magazine profile of Roger back in the 1990s, when Roger was the best-known magazine art director in the world. (Among many others, he designed Rolling Stone, The New York Times Magazine, Newsweek, The New Republic, Fast Company, Advertising Age, and Esquire.)

He also co-founded Interactive Bureau, one of the biggest and most successful web design agencies of the dot-com era.

In his free time, Roger putters around in his award-winning West Texas vacation home made of recycled shipping containers.

Roger Black is an astoundingly prolific creative force; we hope you can join us for this Episode of the show.

The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of taping, via iTunes (audio feed | video feed) and the web.


Photo of Roger Black at Happy Cog by Jeffrey Zeldman.


I guest-edit .net magazine

Web 2.1. Zeldman guest-edits .net magazine.

A List Apart and .net magazine have long admired each other. So when .net editor Dan Oliver did me the great honor of asking if I wished to guest edit an issue, I saluted smartly. The result is now arriving in subscriber post boxes and will soon flood Her Majesty’s newsstands.

In .net magazine Issue No. 206, on sale 17th August in UK (and next month in the US, where it goes by the name “Practical Web Design”), we examine how new standards like CSS3 and HTML5, new devices like iPhone and Droid, and maturing UX disciplines like content strategy are converging to create new opportunities for web designers and the web users we serve:

  • Exult as Luke Wroblewski shows how the explosive growth of mobile lets us stop bowing to committees and refocus on features customers need.
  • Marvel as Ethan Marcotte explains how fluid grids, flexible images, and CSS3 media queries help us create precise yet context-sensitive layouts that change to fit the device and screen on which they’re viewed.
  • Delight as Kristina Halvorson tells how to achieve better design through coherent content wrangling.
  • Thrill as Andy Hume shows how to sell wary clients on cutting-edge design methods never before possible.
  • Geek out as Tim Van Damme shows how progressive enhancement and CSS3 make for sexy experiences in today’s most capable browsers—and damned fine experiences in those that are less web-standards-savvy.

You can also read my article, which asks the musical question:

Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a newer, more mature, more ubiquitous web?

Today’s web is about interacting with your users wherever they are, whenever they have a minute to spare. New code and new ideas for a new time are what the new issue of .net magazine captures. There has never been a better time to create websites. Enjoy!


Photo by Daniel Byrne for .net magazine. All rights reserved.

Fink on Web Fonts

In Issue 307 of A List Apart for people who make websites:

Web Fonts at the Crossing

by Richard Fink

Everything you wanted to know about web fonts but were afraid to ask. Richard Fink summarizes the latest news in web fonts, examining formats, rules, licenses, and tools. He creates a checklist for evaluating font hosting and obfuscation services like Typekit; looks at what’s coming down the road (from problems of advanced typography being pursued by the CSS3 Fonts Module group, to the implications of Google-hosted fonts); and wraps up with a how-to on making web fonts work today.

A List Apart: Web Fonts at the Crossing


Illustration by Kevin Cornell for A List Apart


And now, Google

Web Fonts Part 9: Google enters the fray.

THE long-planned inevitable has now been announced. With open-source-licensed web fonts, web font hosting, and add-a-line-to-your-header ease of configuration, Google has joined Typekit, Font Squirrel, Ascender, Font Bureau and others in forever changing the meaning of the phrase, “typography on the web.”

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.

Oh, and Typekit? They’re in on it, and they couldn’t be more pleased.


Big Web Show No. 1 up!

Jeffrey Zeldman

FOR YOUR viewing and listening pleasure, The Big Web Show’s Episode 1: Web Fonts is now online.

Jeffrey Zeldman and Dan Benjamin grill Ethan Dunham of Fontspring and Font Squirrel and Jeffrey Veen of Typekit (and other sites, too numerous to name) about one of your favorite subjects, “real fonts on your website” in this, our inaugural episode.

Enjoy!