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.
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
- 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.
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!
Finally, cross-browser visual control over forms.
Now we have something else to be thankful for. Nathan Smith of Sonspring has created a library that gives designers and developers “some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system.” Smith calls his new library Formalize CSS:
I’ve attempted to bridge the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. For the most part, this means most textual form elements have a slight inset, and all buttons look consistent, including the
For more, including demos, options, screenshots, thanks, and the library itself, read Smith’s write-up at SonSpring | Formalize CSS. Hat tip and happy Thanksgiving to my good friend Aaron Gustafson for sharing this gem.
SlideShowPro adds HTML5
Most of us web folk are hybrids of one sort or another, but Todd Dominey was one of the first web designers to combine exceptional graphic design talent with serious mastery of code.
Being so good at both design and development that you could easily earn a fine living doing just one of them is still rare, although it looks like the future of our profession. One of the first serious designers to embrace web standards, Todd was also one of the few who did so while continuing to achieve recognition for his work in Flash. (Daniel Mall, who came later, is another.)
Finally, Todd was one of the first—along with 37signals and Coudal Partners—to abandon an enviably successful client services career in favor of full-time product development, inspiring a generation to do likewise, and helping bring us to our current world of web apps and startups.
A personal project that became an empire
In Todd’s case, the product was SlideShowPro, a project he designed for himself, which has grown to become the web’s most popular photo and video slideshow and gallery viewer. When you visit a photographer’s portfolio website, there’s an excellent chance that SlideShowPro powers its dynamic photo viewing experience. The same is true for the photo and video gallery features of many major newspaper and magazine sites, quite possibly including your favorites.
But deliberate lack of Flash support in the iPad and iPhone, while lauded here on February 1, 2010 as 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”), presented a serious problem for developers who use SlideShowPro and readers who enjoy browsing dynamic photo and video galleries.
Mr Dominey has now solved that problem:
SlideShowPro Mobile is an entirely new media player built using HTML5 that doesn’t require the Flash Player plugin and can serve as a fallback for users accessing your web sites using these devices. But it’s not just any fallback — it’s specially designed for touch interfaces and smaller screen sizes. So it looks nothing like the SlideShowPro player and more like a native application that’s intuitive, easy to use, and just feels right.
The best part though is that because SlideShowPro Director (which will be required) publishes the mobile content, you’ll be able to provide the mobile alternative by simply updating the Flash Player embed code in your HTML documents. And just like when using the SlideShowPro player, because Director is behind the scenes, all your photos will be published for the target dimensions of these devices — which gives your users top quality, first generation images. The mobile player will automatically load whatever content is assigned to the Flash version, so the same content will be accessible to any browser accessing your web site.
A public beta will be released in the next weeks. Meanwhile, there is a video demo. There’s also an excellent Question and Answer page that answers questions you may have, whether you’re a SlideShow Pro customer or not. For instance:
Why mobile? Why not desktop?
We believe that (on the desktop) Flash is still the best delivery method for photo/video galleries and slideshows for it provides the most consistent user experience across all browsers and the broadest range of playback and customization options. As HTML5 support matures across all desktop browsers, we’ll continue to look into alternate presentation options.
Into the future!
You are a shameless self promoter!” he said.
I can’t speak to the “shame” part, but for the rest: guilty as charged.
Self-promotion may appear revolting, but it’s the only promotion that’s guaranteed in this business. Do it right, and only haters will hate you for it. To get, you must give.
Love your work
If you write or design, you must believe in what you do. If you don’t believe you have something to express, there are plenty of other jobs out there. If you believe in what you do, and if you’re doing it for real, you must find ways to let people know about it.
Sometimes this takes the direct form of a case study. The assumption in publishing such a study is that someone out there might be interested in the service your team provided, the thinking you brought to the problem, and so on.
There is a difference between being arrogant about yourself as a person and being confident that your work has some value. The first is unattractive, the second is healthy and natural. Some people respond to the one as if it were the other. Don’t confuse them. Marketing is not bragging, and touting one’s wares is not evil. The baker in the medieval town square must holler “fresh rolls” if he hopes to feed the townfolk.
The love you make
But direct self-promotion is ineffective and will go unnoticed unless it is backed by a more indirect (and more valuable) form of marketing: namely, sharing information and promoting others.
Is your Twitter feed mostly about your own work, or do you mainly link to interesting work by others? Link blogs with occasional opinions (or occasional techniques, or both) get read. The more you find and promote other people’s good work, the more in-the-know and “expert” you are perceived to be—and the more you (or your brand, if you must) are liked.
You can’t fake this. If you’re linking to other people’s work as a ploy to make others link back, it’s obvious, and you’ll fail. If you’re sharing half-baked information half-heartedly, nobody will stick around.
This may sound Jedi-mind-trick-ish, but never create a blog or a Twitter feed with the explicit idea of promoting yourself. Create for the joy of creating. Share for the joy of the sharing, and because the information you’re sharing genuinely excites you. Do that, and the rest will follow.
A List Apart is changing
A List Apart, for people who make websites, is slowly changing course.
For most of its decade of publication, ALA has been the leading journal of standards-based web design. Initially a lonely voice in the desert, we taught CSS layout before browsers correctly supported it, and helped The WaSP persuade browser makers to do the right thing. Once browsers’ standards support was up to snuff, we educated and excited designers and developers about standards-based design, preaching accessibility, teaching semantic markup, and helping you strategize how to sell this new way of designing websites to your clients, coworkers, and boss.
Most famously, over the years, writers for ALA have presented the design community with one amazing and powerfully useful new CSS technique after another. Initially radically new techniques that are now part of the vocabulary of all web designers include Paul Sowden’s “Alternative Styles,” Mark Newhouse’s list-based navigation, Eric Meyer’s intro to print styles, Douglas Bowman’s “Sliding Doors,” Dave Shea’s “CSS Sprites,” Dan Cederholm’s “Faux Columns,” Patrick Griffiths and Dan Webb’s “Suckerfish Dropdowns,” Drew McLellan’s “Flash Satay,” and so on and so on. There are literally too many great ones to name here. (Newcomers to standards-based design, check Erin Lynch’s “The ALA Primer Part Two: Resources For Beginners“.)
Web standards are in our DNA and will always be a core part of our editorial focus. Standards fans, never fear. We will not abandon our post. But since late 2005, we have consciously begun steering ALA back to its earliest roots as a magazine for all people who make websites—writers, architects, strategists, researchers, and yes, even marketers and clients as well as designers and developers. This means that, along with issues that focus on new methods and subtleties of markup and layout, we will also publish issues that discuss practical and sometimes theoretical aspects of user experience design, from the implications of ubiquitous computing to keeping communities civil.
The trick is to bring our huge group of highly passionate readers along for the ride. My wife likens it to piloting the Queen Mary. (Q. How do you make the Queen Mary turn left? A. Very, very slowly.)
We review hundreds of articles and publish dozens. Some web magazines seem to have those proportions reversed, and some readers don’t seem to mind, and that’s fine. But any content you see in ALA has been vetted and deeply massaged by the toughest editorial team in the business. And when you see a new “design tech” article in our pages, you can be sure it has passed muster with our hard-ass technical editors.
Moreover, the fields of meaningful new CSS tricks have mostly yielded their fuels. We’ve done that. We’ve done it together with you. While a few new lodes of value undoubtedly remain to be tapped, we as a community, and as individuals who wish to grow as designers, need to absorb new knowledge. ALA will continue to be a place where you can do that.
When we began focusing on web standards in 1998, we were told we were wasting readers’ time on impractical crap of little value to working designers and developers. But we kept on anyway, and the things we learned and taught are now mainstream and workaday. While we apologize to readers who are again being made irritable by our insistence on occasionally presenting material that does not fall directly within their comfort zone, we hope that this experiment will prove to be of value in the end.
[tags]alistapart, webdesign, magazine, editorial, content, focus, change, publishing, standards, webstandards, css, design, layout, userexperience[/tags]
Dear “New Yorker:”
It is snowing again in New York City. I’ll wait while you verify.
Presently the precipitation is recorded as 0.11 inches. But if you venture out, you may notice snow piles that are several inches high. How can we account for this discrepancy between the recorded height of snowfall and the actual height of some snow piles?
In this city, custodians and superintendents salted and shoveled sidewalks before 7:00 AM.
When people shovel, they push the snow into curbside banks that reach inches or even feet higher than the recorded snowfall level.
To see this, walk outside and look. The fresh air may do you good.
Sometimes after a snowfall, the temperature drops. Then those high banks of snow stick around.
Sometimes it warms just enough to rain into those frozen banks of snow. Then you get cold wetness that can reach into a toddler’s shoes (if she’s not wearing boots). And banks of old snow at the edges of curbs that, combined with freezing rain, can wet a small, bootless child halfway to the knees.
If you spent less time fact-checking other people’s blog posts and more time living, you would know these things about snow, and children, and weather reports.
And even if “halfway up to A—’s knees” were off by an inch or more, a person who is alive would say to themselves, “A father, worried about his child’s exposure to weather, sees conditions as somewhat worse than they are.”
A person who understands people might seek further evidence of hyperbole, and would find it: “My kid looked like she had been swimming in the East River.”
A parent, or a non-parent alive enough to imagine the anxieties of parenting, would recognize that this an exaggeration, intended to convey (and through the catharsis or writing, alleviate) parental guilt and anxiety.
Trying to prove strangers liars is no substitute for lived experience. You missed the point of what I shared, and attacked the reality of my story on petty (and false) grounds.
Let me tell you how your anonymous attack made me feel:
Blessed to have a meaningful life.
Blessed not to have to fill my hours poking around, looking for inaccuracies in other people’s websites, hoping to embarrass strangers.
Whoever you are, I hope your life grows richer than it is today.
Lord of the Rains
Relentless winter rain was turning last night’s snow to slush as I with my head cold and A— with her wooly hat left the lobby of our apartment building, headed for the nearby crosstown bus.
From home to preschool is a mile uphill, and we always walk it. But today was no day for pedestrianism. Even the dog could barely be persuaded to lift his leg.
And taking the bus was a form of bribery. A— did not want to go to school today, but she loves to ride the bus.
“We’ll ride the bus to school!” we proposed, and this enticement sufficed to get the girl dressed and downstairs—where we spied the bus, half a block away, accepting passengers and about to leave.
We ran through the slush, holding hands, my office bag bouncing off my left shoulder, the diaper bag bouncing off my right, the stroller sliding ahead of us, guided by my free hand.
You must fold a stroller before boarding a New York City bus. At the bus doors, I had trouble folding. The stroller would not collapse. The driver and the wet passengers inside stared down at me like bison on a nature show, blinking impassively while contemplating my destruction.
A woman in front of me took A—’s hand, to help the little girl onto the bus while her father wrestled with a child carrying appliance.
I saw myself stuck in the slush. I saw the bus doors closing. I saw a strange lady taking my daughter away.
I grabbed A—’s hand, pulled her away from the stranger.
“I’m sorry, thank you, I appreciate it, but my daughter has to stay with me,” I said. At which point, blessedly, the stroller collapsed. I scooped daughter, stroller, diaper bag and office bag into my arms, ascended the bus steps, and placed my Metro card into the card reader.
The bus driver looked at me and said something incomprehensible. The bus beeped; the card reader blinked red and ejected my card.
I reinserted the card, smiling, already soaked, my daughter and possessions balanced against my chest. Again the red, the beeping, the ejection.
This time I understood what the bus driver was saying.
“Your card’s empty.”
“Oh,” I said, the whole bus watching me and my daughter, every face wondering what refugee camp we had escaped from, and whether the bus driver would show mercy and let us ride on this most miserable of cold wet rainy days.
The bus driver blinked at me.
“Um,” I said.
“Pay or get off” the bus driver said.
Buses accept Metrocards and coins only. You need $2 in coins. I don’t carry $2 in coins.
“Can I give you two dollars in bills?” I said.
“No,” the bus driver said.
So the girl and I plunged back into the slush and began the mile uphill walk in the rain.
“Why can’t we ride the bus?” my three-year-old asked through trembling lips.
Her whole world was now about the bus ride she’d been promised, and the promise I was inexplicably breaking.
“I’ll let you walk,” I said, since walking, instead of riding in the stroller, is also a perk.
I took out her Dora the Explorer umbrella, which we bought two weeks ago at a premium price.
It was broken, I discovered. The umbrella offered no protection whatever from the rain. On the plus side, you could still read the Dora the Explorer logo, so the licensee was getting his money’s worth.
Umbrellaless, toddling along, we made it to a major avenue where the deep, melting ice and snow came halfway up to A—’s knees, and women stared at the idiot father letting his beautiful innocent child flounder about in wetness.
“There’s too much ice, now; you’ve got to get in the stroller,” I said.
“No!” she said.
There was nothing else for it. “I’ll give you candy,” I said.
In the Duane Reade on Third Avenue, I let her pick the candy—she selected something pink and disgusting—while I unpacked the stroller to get at a plastic sheet at the bottom. The plastic sheet is supposed to snap over the top of the stroller, protecting children from rain, snow, and oxygen. I could not get it to snap or stay or even cover the stroller. Strike three.
So we walked the rest of the way uphill, uncovered, rain-battered, she with her candy and I with silent curses.
We reached the school and climbed the steps in the usual way—the girl refusing to climb the steps, me carrying her in one hand and the stroller in the other.
We were both soaked through and I realized I was the worst father walking the earth. All the other kids came in wearing rain boots. My kid was wearing pretty little black Maryjanes. The other kids were damp. My kid looked like she had been swimming in the East River.
What saved me was this:
In the library at the top of the stairs, preparing to read a Curious George book before school began, the girl sat by the radiator and said, “Look, Dad. This hot stuff will get me dry.”
[tags]zeldman, myglamorouslife, parenting, nyc, preschool[/tags]
Happy fourth birthday, real world semantics
Four years ago today, Tantek Çelik and Kevin Marks gave a presentation on real-world semantics. Working backwards from HTML extensions like XFN (created by Tantek, Matt Mullenweg, and Eric Meyer), the paper showed how designers and developers could add semantics to today’s web rather than starting from scratch or waiting for a “purer” markup language to bring us an “uppercase semantic web.”
As with ‘most all great ideas, the principles were simple and, in hindsight, profoundly obvious. Do what designers were already doing. Instead of toiling over new languages that might or might not get adopted, use existing (X)HTML elements such as
class, and agree on such things as common class names for simple things like relationship definitions.
On behalf of all web designers and developers, thank you, Tantek and friends, and happy birthday.
[tags]microformats, semantics, realworld, tantek, xfn, hcard, 4years[/tags]