Categories
A Book Apart A List Apart Adobe An Event Apart Apple architecture art direction Authoring Best practices Big Web Show client services Code content content strategy creativity CSS CSS3 Dan Benjamin Design DWWS E-Books editorial Education eric meyer Fonts Formats Free Advice Happy Cog™ Haters industry Information architecture interface ipad iphone IXD javascript links maturity New Riders peachpit Publications Publishing Real type on the web Respect Responsibility Responsive Web Design Standards State of the Web tbws The Big Web Show The Essentials The Profession This never happens to Gruber Typekit Typography Usability User Experience UX W3C Web Design Web Design History Web Standards webfonts webkit Websites webtype work Working writing Zeldman zeldman.com

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!

Categories
Acclaim Design Happy Cog™

To my friend who thinks I should not accept awards.

OLIVER REICHENSTEIN—iA to Twitter friends like me—thinks it is wrong for experienced designers to accept design awards. Oliver says:

All awards should go from old uncles (like me or @zeldman or who ever) to young people. They need it.

A fair point. To which I reply:

  1. When Happy Cog wins an award, it is going to young people. It’s young designers like Stephen Caver, Yesenia Perez-Cruz, Joey Pfeifer, Mike Pick, Kevin Sharon, Drew Warkentin, Brian Warren, young UX designers like Whitney Hess and Jessica Ivins, young developers like Jenn Lukas, Mark Huot, Ryan Irelan, Matt Clark, Aaron Gustafson, Tim Murtaugh, and Allison Wagner, and young project managers like Rawle Anders, Dave DeRuchie, and Brett Harned whose work is being recognized. (Apologies to young-at-heart Kevin Hoffman, Chris Cashdollar, Russ Unger, and Robert Jolly.)

    When I stood up with Happy Cog’s co-presidents to accept “design agency of the year,” it was on these young folks’ behalf that I accepted it. I am a vessel of their talent and of our clients’ willingness to support their users instead of making safe, committee-friendly choices. It would be wrong of me to refuse the award on the grounds that I am better known than some members of our staff.

  2. We work for these people called clients. And while Jane HTML may know of Jeffrey Zeldman and Happy Cog, Joe Client does not. Moreover, Joe Client may not know how to evaluate agencies. He may know little about web standards and “user experience.” He probably doesn’t follow you or me on Twitter, and doesn’t participate in our community’s passionate debates about everything from the proper semantics for sub-navigation to the value of eye-tracking. He doesn’t know from that stuff, but he knows that if an agency has won awards in a respected competition, that agency must know a little something about what it is doing. If our goal as an agency is to do and spread good work, it makes business sense for us to accept an award from a respected forum of our peers.

By the way, we did not enter the .net Awards, we were nominated for them by the community. Accepting the nominations was like accepting a compliment—the gracious thing to do. Not that I’m apologizing.

So much for “design agency of the year.” I accepted “video podcast of the year” on behalf of my brilliant partner Dan Benjamin, who creates superior streaming content for people who make websites. It is his work more than mine that was honored. And as for “standards champion,” I’ve already said who I think deserved that nod this year. But I accepted the community’s verdict with a blush and thanks.

Winning anything invites enmity; winning three awards is asking for a backlash. But I know that’s not where you’re coming from.

Are awards bad?

I used to hate awards, too. I’ve only recently started coming around.

Designers and creative directors I respect and worked for in the past were almost always winning and judging awards shows. Their work was brilliant, and the awards were a tool they used to balance their power against that of tough-minded account executives and clients. When a client said make the logo bigger, a creative director could turn quietly to his or her wall of awards, and the client would back down.

Nevertheless, awards shows are always political to some extent, and those who don’t win often find fault with those who do. Like you, I had a distaste for awards shows when I started on my own (plus I didn’t think any award show got the web). For over a decade, largely because of my feeling, which other Happy Cog muckety-mucks shared, our agency ignored awards shows.

But we are modifying our views on this, and not merely because we just won a bunch of awards we didn’t even seek (as well as a few that we did). Our industry needs real design discussion, peer review, and recognition. I believe in the .net Awards, as their partnership with A List Apart attests. They are the best our industry has.

Personally, I’m inspired to start actually seeking awards, because Joe Business gets them, and I like to see designers working.

I appreciate the purity of your point of view, and I recognize it as a discussion point, not an attack. We are friends, and you’re a gent. Maybe I am wrong. But I’m beginning to think we don’t need no awards, we need good awards. And when good work wins, it inspires more good work.

Whether you hate awards or love them, the most important thing is to keep wins and losses in perspective, and remember that you’re only as good as your last idea.

Categories
Design Happy Cog™

Design Agency of the Year

I TOOK THIS PHOTO TONIGHT in London at the 2010 .net Awards, where Happy Cog took home the award for Design Agency of the Year, besting Centersource and our good friends at Clearleft (who took the prize last year). My partners Greg Hoy and Greg Storey were beside me to accept the award. Fellas, it’s all you and your brilliant peeps.

Dan Benjamin and I also won “Video Podcast of the Year” for The Big Web Show—although in my mind, any of Dan’s podcasts on his 5by5 network could have won. They are that good, and so is he. Congrats and thanks, Padre.

I also won “Standards Champion” for the third year in a row. Had it been up to me, I would have bestowed the honor on Jeremy Keith for writing HTML5 For Web Designers.

Other prizes went to Smashing Magazine (“Blog of the Year”), Jason Santa Maria (“Web Personality of the Year”), Typekit (“Innovation of the Year”), Modernizr (“Open Source Product of the Year”), Flipboard (“Best API Use of the Year”), and BBC (“Redesign of the Year”). Congratulations, all!

Greg Hoy has posted videos of event highlights on his website, and there are photos in my “London 2010” set on Flickr.

Categories
Blue Beanie Day books Browsers creativity CSS CSS3 Design Designers DOM DWWS E-Books editorial Happy Cog™ HTML HTML5 Ideas industry tweets twitter Voting W3C Web Design Web Design History Web Standards webtype XHTML Zeldman

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.

Categories
blogger Blogs and Blogging Community content content strategy Happy Cog™ Ideas

Cognition: Behind the Music

Happy Cog president Greg Storey describes the thinking behind our latest little experiment in online publishing and community:

Last week we launched Cognition, a studio blog, that replaced the traditional open-mic text area commenting system with two options: Either post a response via your own Twitter account or link to a post on your own blog.

As the primary instigator, Mr. Storey explains his and the agency’s rationale for doing away with traditional comments:

The problem with most comment threads is that they can reach that useless tipping point very quickly. Without having an active moderator to keep up with all of the various threads it’s practically impossible to provide any sort of conversational value.

Meanwhile we have also informally noticed a decline in blog usage since the wider adoption of Twitter within our community. … Happy Cog loves blogs. … What if we could help bring some life back into the old network by encouraging people to write blog posts when they have more to say than what can fit into one-hundred-and-forty characters?

Read more and comment if you wish: Airbag: Babylon.

Categories
Blogs and Blogging Design Happy Cog™ launches

Cog blog offloads comments.

The agency launched by a blog finally has a proper one of its own. Happy Cog gently introduces Cognition.

Speaking of experiments, there’s our comments section. [W]e’ve collocated our comments on Twitter. Share a tweet-length response here, and, with your permission, it will go there. If you are moved to respond with more than 140 characters, post the response on your website, and it will show up here.

Is This Thing On? – Cognition

Categories
Accessibility Adobe Advocacy Apple Applications apps architecture Authoring Best practices Browsers business Code content strategy CSS3 Design Designers development editorial Happy Cog™ HTML HTML5 industry javascript Platforms Publications Publishing Real type on the web Standards State of the Web The Essentials The Profession W3C Web Design Web Design History Web Standards webfonts webtype Zeldman

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.

Categories
A Book Apart Advocacy Apple Authoring Best practices books Design E-Books Happy Cog™ HTML HTML5 Standards State of the Web Web Design Web Design History Web Standards

HTML5 For Web Designers is a hit in the US iTunes store.

UPDATE: As of today, 27 September 2010, Jeremy’s book is ranked 33. It has climbed 11 points since yesterday.

Jeremy Keith’s excellent HTML5 For Web Designers, the first publication from A Book Apart, is a hit in the American iTunes store.

Comments, if you wish, may be left at Flickr.

Categories
Acclaim Design Happy Cog™

Scientific American redesign

Happy Cog’s redesign of the Scientific American website, featuring wicked web fonts Prelude and Brunel, is alive!

Roger Black Studio did the print redesign and supervised the project; Font Bureau created Prelude; Paul Barnes designed Brunel and Webtype hinted it.

For the Happy Cog team:

Categories
A List Apart Code CSS CSS3 Design Happy Cog™ HTML HTML5 Usability User Experience

ALA 314: Web Forms Magic

Issue No. 314 of A List Apart For People Who Make Websites is all about your form.

Ryan Seddon shows how to reduce errors and guide users to success via new methods made possible by HTML5 and CSS3. Harness HTML5 form input types and attributes to set validation constraints to check user input, and use CSS3’s new UI pseudo-classes to style validation states, making form completion quick and effortless.

And Luke Wroblewski explains how accordion forms increase completion rates and user happiness by dynamically showing and hiding sections of related questions as people complete the form—allowing them to focus on what matters and finish quickly. Learn how your smallest design decisions affect completion speed, which design choices make these innovative forms feel familiar and easy—and which make them feel foreign and complex, leading people to make errors.

Illustration by Kevin Cornell for A List Apart Magazine.

Categories
conferences Happy Cog™ SXSW

Pick a Peck of Panels

Voting is underway for next year’s SXSW Interactive Festival in Austin, TX, and members of Happy Cog have proposed eighteen panel ideas shown here. Follow the links to vote for your favorites, increasing the likelihood you’ll see them on the schedule in March 2011. Voting ends 11:59 PM CDT on Friday, August 27, 2010.

Project Management

  1. Project Management for Humans (No Robots Allowed)
  2. Panelists:

    • Brett HarnedHappy Cog Senior Project Manager
    • Dave DeRuchieHappy Cog Project Management Director
    • Sam Barnes
    • Pamela Villcorta
    • Rob Borley
  3. Your Meetings Suck and It’s Your Fault
  4. Presenter: Kevin HoffmanHappy Cog User Experience Director

User Experience

  1. Critical Thinking for UX Designers (Or Anyone, Really)
  2. Dual Presenters:

    • Russ UngerHappy Cog User Experience Director
    • Stephen Anderson
  3. Guerrilla Research Methods — Live!
  4. Dual Presenters:

    • Todd Zaki Warfel
    • Russ UngerHappy Cog User Experience Director
  5. Inside-Out UX: Clients, Expectations, Politics, Personalities
  6. Dual Presenters:

    • Whitney HessHappy Cog Senior Experience Designer
    • Tom Daly

Design

  1. Can Design Save Philadelphia? Happy Cog vs Cliches
  2. Presenter: Christopher CashdollarHappy Cog Creative Director

  3. My Title Is Web Designer, Now What?
  4. Panelists:

  5. Nontent: Is Smashing Magazine Helping or Hurting Design
  6. Panelists:

    • Kevin SharonHappy Cog Senior Designer
    • Mathew Smith
    • Aex Giron

Development

  1. Developers: Saving the Web From Your Dick Move
  2. Panelists:

    • Jenn LukasHappy Cog Interactive Development Director
    • Mark HuotHappy Cog Technology & Development Director
    • Kenny Meyers
    • Noah Stokes
    • Paul Irish
  3. Digital Bookmaking for Designers & Developers
  4. Panelists:

    • Brian WarrenHappy Cog Senior Designer/Developer
    • Scott Boms
    • Grant Huchinson

Personal Development

  1. Jeffrey Zeldman’s Amazing Panel
  2. Presenter: Jeffrey ZeldmanHappy Cog Founder & Executive Creative Director

  3. Company Culture: It’s All Your Fault
  4. Presenter: Greg HoyHappy Cog President

  5. Panel Title: [ INSERT PANEL TITLE HERE ]
  6. Dual Presenters:

  7. GeekFit: How to Embrace Technology and Healthy Lifestyles
  8. Presenter: Robert JollyHappy Cog Client Services Director

  9. Breaking Taboos: Pros Get Real About Money Matters
  10. Panelists:

    • Mark Hemeon
    • Daniel Burka
    • Joe Stump
    • Whitney HessHappy Cog Senior Experience Designer
  11. Maintaining Your Humility While Enjoying Your Success
  12. Presenter: Whitney HessHappy Cog Senior Experience Designer

  13. Bridging The Generation Gap: Or Is There One?
  14. Panelists:

  15. Making Memories Capturing Your Awkward Social Media Years
  16. Panelists:

    • Kenny Meyers
    • Luke Dorney
    • Greg StoreyHappy Cog President

Categories
A List Apart An Event Apart Announcements Appearances Applications architecture art direction Best practices Browsers chrome Code CSS CSS3 Damned Fine Journalism Design Designers editorial Education engagement glamorous Happy Cog™ HTML HTML5 Ideas industry interface ipad iphone launches Layout photography Press Publications Publishing Real type on the web Responsive Web Design Standards State of the Web The Big Web Show The Essentials The Profession This never happens to Gruber type Typography User Experience UX W3C Web Design Web Design History Web Standards webfonts webkit Websites webtype writing Zeldman zeldman.com

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.

Categories
Browsers bugs Code Compatibility CSS CSS3 development Free Happy Cog™ HTML HTML5 Ideas industry links Standards State of the Web The Essentials The Profession Tools Web Design Web Design History Web Standards

HTML5, CSS3 default templates

Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.

Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.

Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)

My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.

Categories
A Book Apart An Event Apart Code Design development Happy Cog™ HTML HTML5 Standards State of the Web Tools User Experience UX

10K Apart – inspire the web!

Just launched and just wonderful! The 10K Apart contest (“Inspire the web with just 10K”) presented by MIX Online and An Event Apart hearkens back to Stewart Butterfield’s 5k Contest of yesteryear while anticipating the HTML5-powered web of tomorrow … and encouraging us to design that web today.

We want beauty. We want utility. We want excitement. And we want it all under 10K:

HTML5 For Web Designers

Prizes, we got prizes! One grand prize winner will receive registration to An Event Apart plus $3,000 cash and a copy of HTML5 For Web Designers. Three runners-up (Best Design, Best Technical, and People’s Choice) will win free registration to An Event Apart plus a $1000 Visa cash card and HTML5 For Web Designers. Nine honorable mentions will receive HTML5 For Web Designers.

The judging panel that will evaluate all this awesomeness is made up of Jeremy Keith, Nicole Sullivan, Eric Meyer, Whitney Hess, and yours truly.

Sorry, no back-end, this is a client-side contest only.

Check the 10K Apart site for more info. Happy designing and developing!

Categories
A List Apart An Event Apart Appearances Best practices better-know-a-speaker conferences content content strategy creativity CSS CSS3 Curation Design Designers engagement eric meyer Happy Cog™ HTML HTML5 Ideas Images industry Minneapolis people photography Responsive Web Design Typography Usability User Experience UX W3C Web Design Web Standards webfonts Zeldman

Minneapolis Remembered

Eric Meyer at An Event Apart Minneapolis - photo by Jared Mehle

The show’s over but the photos linger on. An Event Apart Minneapolis was two days of nonstop brilliance and inspiration. In an environment more than one attendee likened to a “TED of web design,” a dozen of the most exciting speakers and visionaries in our industry explained why this moment in web design is like no other.

If you were there, relive the memories; if you couldn’t attend, steal a glance at some of what you missed: An Event Apart Minneapolis: the photo pool at Flickr.

Next up: An Event Apart DC and San Diego. These shows will not be streamed, simulcast, or repackaged in DVD format. To experience them, you must attend. Tickets are first-come, first-served, and every show this year has sold out. Forewarned is forearmed; we’d love to turn you on.


Photo: Jared Mehle.