Episode 35: Jen Simmons on Drupal, experience design, and how designing websites has changed since 1996.

JEN SIMMONS is our guest today, January 20, 2011, in Episode No. 35 of The Big Web Show, co-hosted by Dan Benjamin. Tune in to 5by5.tv/live at 12:00 PM Eastern (new time!) to be part of the live recording.

Jen (jensimmons.com, @jensimmons), is a designer who builds stuff too. She designed and created the new default theme for Drupal 7, named Bartik. And she’s currently leading a movement to bring HTML5 to Drupal. Jen began using Drupal in early 2007, when it was frighteningly hard to use. She started creating websites in 1996, and used many flavors of technology over the years.

Besides designing for the web, Jen has 20 years experience designing for live performance and for print. She’s created seven-channel digital projections for an opera about Nikola Tesla. She’s created short films that toured the globe in film festivals. And she’s taught media arts to high school kids in San Antonio. Jen has a MFA in Film and Media Arts from Temple University, where she taught as an Adjunct Professor.

The Big Web Show (“Everything Web That Matters”) records live every Thursday at 12:00 PM Eastern. Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!

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!

For The Children!

DREW McCLELLAN’S 24 WAYS IS THE ADVENT calendar for web geeks, publishing a daily dose of web goodness throughout December. This year’s 24 ways is being turned into a beautiful printed annual. All proceeds benefit UNICEF children’s charities. The sale ends December 31, 2010. Please buy this collector’s item and spread holiday cheer to those who need it most:

The 24 Ways Annual 2010 | Five Simple Steps.

Top Web Books of 2010

It’s been a great year for web design books; the best we can remember for a while, in fact!” So begins Goburo’s review of the Top Web Books of 2010. The list is extremely selective, containing only four books. But what books! They are: Andy Clarke’s Hardboiled Web Design (Five Simple Steps); Jeremy Keith’s HTML5 For Web Designers (A Book Apart); Dan Cederholm’s CSS3 For Web Designers (A Book Apart); and Eric Meyer’s Smashing CSS (Wiley and Sons).

I’m thrilled to have had a hand in three of the books, and to be a friend and business partner to the author of the fourth. It may also be worth noting that three of the four books were published by scrappy, indie startup publishing houses.

Congratulations, all. And to you, good reading (and holiday nerd gifting).

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 button tag.

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.

Awesome web apps in 10k or less

The 10K Apart Challenge had a simple premise: Could you build a complete web application using less than 10 kilobytes? … A joint effort between An Event Apart and MIX Online, the 10K Apart reaped 367 web applications in 28 days—everything from casual games to RIAs—that demonstrate, even with their tiny footprints, what is truly possible with modern [web] standards.

Read about the winning entries: 10K Apart – IEBlog.

Paul Ford on The Big Web Show

Paul Ford

Paul Ford is our guest on The Big Web Show, taped live before an internet audience at 1:00 PM ET tomorrow, 14 October 2010, on the 5by5 network at live.5by5.tv.

Paul is a freelance writer and computer programmer. He was an editor at Harper’s Magazine from 2005–2010, and brought Harper’s 159-year, 250,000-page archive to the web in 2007; the system now supports tens of thousands of registered subscribers. More recently he helped the media strategy firm Activate with the launch of Gourmet Live, a re-imagining of Gourmet Magazine for iPad, and co-founded Popsicle Weasel, a small company totally focused on microsites.

He has written for NPR, TheMorningNews.org, XML.com, and the National Information Standards Organization’s Information Standards Quarterly, and is the author of the novel Gary Benchley, Rock Star (Penguin/Plume). Paul programs in PHP, Java, and XSLT2.0, but lately is all about Python and Django. His writing has been anthologized in Best Software Writing I (2005) and Best Music Writing 2009. He enjoys both software and music.

He will teach Content Strategy at the School of Visual Arts in New York City starting in 2011. His personal website, started in 1997, is Ftrain.com. He lives in Brooklyn, New York with his wife Mo and the obligatory cats.

The Big Web Show (“Everything Web That Matters”) is recorded live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Join us!

Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!

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.

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.

My other iPad is a Kindle

Zeldman.com as seen on Kindle

The new Kindle has a lot going for it. It’s inexpensive compared to a full-featured tablet computer like the iPad; you can slip it in your back pocket, where it’s more comfortable than an old-style paperback; and it includes a Webkit browser. This last point is where folks like us start to give a hoot, whether we’re fans of epub reading or not.

The flavor of Kindle’s browser concerns us because it affords us the ability to optimize the mobile viewing experience with a single line of markup. You can see this in action in the photo at the head of this article (published and discussed on Flickr).

I made no tweaks for Kindle per se; the Kindle is simply responding to a line of markup I’ve been putting into my web pages since 2007—namely, the viewport meta element, which controls the width of the viewport, thus enabling mobile devices with a limited number of pixels to focus all available pixels on your site’s core content (instead of, for instance, wasting part of the small screen on a background color, image, or gradient). The technique is as simple as web design gets:

meta name="viewport" content="width=770"

(Obviously, the value of “width” should be adjusted to match your site’s layout.)

I learned this little trick from Craig Hockenberry’s Put Your Content in My Pocket (A List Apart, August 28, 2007), which I naturally recommend to any designer who hasn’t seen it.