“Mobile is huge. The iPhone, iPad, and Android are huge. On the one hand, they are standards-facing, because they all support HTML5 and CSS3, so you can create great mobile experiences using web standards. You can create apps using web standards. On the other hand, there is also the temptation to go a proprietary route. In a strange way, although the browsers are much more standards compliant, it seems like we are redoing the browser war. Only now, it’s not the browser wars, it’s platform wars.”
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.
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:
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.
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:
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?
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.
FLIPBOARD, AS YOU DOUBTLESS know, is a social media magazine for iPad. Part RSS reader, part iPad publication uniquely curated by each reader, the app brings serendipity, discovery, and typographic excellence to the experience of keeping up with one’s friends on Twitter, Facebook, and so on. This morning (last night in Japan), a new, improved version of Flipboard was launched, offering designers like us even more visual pleasure and rewarding the hours we put into our content’s semantic underpinnings.
Designer Craig Mod, in a letter, told me his “goal was to try and produce one of the best RSS experiences out there.” It’s accomplished via features like those listed below and more, as seen in these screenshots Craig sent me from his pre-launch tests:
portrait and landscape optimized typography
full bleed images
flowing of text based on image size and location in the document
auto-generation of [figure] and [figcaption] objects based on alt
text on images
Adds Craig, “What’s great is that the more semantic and clean your feed, the better it will look in the app.”
iPad. Never have so many embraced a great product for exactly the wrong reasons.
Too many designers and publishers see the iPad as an opportunity to do all the wrong things—things they once did in Flash—without the taint of Flash.
In the minds of many, the iPad is like Flash that pays. You can cram traditional publishing content into an overwrought, novelty Flash interface as The New York Times once did with its T magazine. You may win a design award but nobody will pay you for that content. Ah, but do the same thing on the iPad instead, and subscribers will pay—maybe not enough to save publishing, but enough to keep the content coming and at least some journalists, editors, and art directors employed.
It’s hard to argue with money and jobs, and I wouldn’t dream of doing so.
Alas, the early success of a few publications—publications so good they would doubtless survive with or without iPad—is creating a stampede that will not help most magazines and interfaces that will not please most readers.
Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.
Luke Wroblewski’s Touch Gesture Reference Guide gives designers plenty of ammunition to create dynamic user experiences that work on a wide variety of mobile phones and devices (including iPad) while these same sites can use traditional desktop browser effects like hover to offer equally rich experiences on non-touch-enabled browsers. Unless your organization’s business model includes turning a profit by hiring redundant, competing teams, “Write once, publish everywhere” makes more economic sense than “Write once, publish to iPad. Write again, publish to Kindle. Write again, publish to some other device.”
I’m not against the iPad. I love my iPad. It’s great for storing and reading books, for browsing websites, for listening to music and watching films, for editing texts, presentations, and spreadsheets, for displaying family photos, and on and on. It’s nearly all the stuff I love about my Mac plus a great ePub reader slipped into a little glass notebook I play like a Theremin.
I’m not against iPad apps. Twitterific for iPad is by far the best way to use Twitter. After all, Twitter is really an internet service, not a website; Twitter’s own site, while leaps ahead of where it used to be, is hardly the most useful or delightful way to access its service. Gowalla for iPad is my constant companion. I dread the idea of traveling without it. And there are plenty of other great iPad apps I love, from Bloom, an “endless music machine” by Brian Eno and Peter Chilvers, to Articles, which turns Wikipedia into an elegant reading experience, to Mellotronics for iPad, an uncannily accurate Mellotron simulator packed with 13 authentic voices—“the same production tapes featured on Strawberry Fields Forever” and other classic tracks (not to mention tracks by nouveau retro bands like Eels).
There are apps that need to be apps, demand to be apps, and I admire and learn from them like every other designer who’s alive at this moment.
I’m just not sold on what the magazines are doing. Masturbatory novelty is not a business strategy.
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!
Dear Apple: It is a triumph of engineering and marketing and general cause for joy that Apple provides highly functional iPad versions of Keynote, Pages, and Numbers for a mere $9.99 apiece. Alas, the iPad versions’ inability to import or transfer fonts diminishes the apps’ value and utility.
You, Apple, have done much to foster today’s design culture, so it is no surprise to you that we designers are particular about the fonts we use. One font is not the same as another. Helvetica is not the same as Franklin or Gotham. You know this as well as we do. Which means you also know that, in transferring Keynote presentations and Pages layouts between the Macs and iPads you sell us, our joy gets dented when the iPad replaces our fonts with “a close match” or Helvetica.
And it’s not just a matter of joy. I sometimes spend weeks on a Keynote presentation, and so do my colleagues. We’d love to be able to work on them whether we have a Mac or an iPad at hand—that, after all, is the promise of the devices we buy from you; frankly, it is the promise of all computers. But when the iPad loses my fonts, it loses me. A Keynote presentation with substitute fonts is of no use to me, except perhaps as a rehearsal tool—and I can just as easily rehearse with a PDF.
Please either add the ability to retain fonts (and all their settings) when importing Keynote, Pages, and Numbers documents from computer to iPad, or else please create a simple font management tool for the iPad that allows us to import a reasonable subset of our fonts to the device.
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.
Update! Episode 14 is now available for your listening and viewing pleasure at 5by5.tv.
Josh Williams, founder of Gowalla, is our guest at 1:00 PM ET today, July 29, in Episode 14 of The Big Web Show. Whether you’re a social media user/creator, an entrepreneur, an application developer, an iconist or illustrator, a freelancer with big dreams, an API wizard, a devotee of marketing 2.0, a web designer, a Gowalla fan, or what, you won’t want to miss this episode.
The Big Web Show is taped in front of a live internet audience, and you can be part of it. Join co-host Dan Benjamin and me at 1:00 PM ET today to participate in the live taping of Episode 14.
If you miss the live taping, you can watch the show on our website or via iTunes later tonight.
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.
In Heaven, if I should get there, I will play the Mellotron. Meanwhile, I play the Mellotronics M3000 HD, a $12 Mellotron for iPad (and soon for iPhone and iPod touch as well) by Synthtopia.
From the manufacturers:
The M3000 is an uncannily accurate, beautiful-sounding and immensely playable instrument, packed with 13 huge, authentic voices from the Mellotronics tape vault. These are the same production tapes that featured on Strawberry Fields Forever, Nights in White Satin, Watcher of the Skies, Odessey and Oracle, and hundreds more timeless classics.
Or in my case, “In The Court of the Crimson King,” the album that blew my mind in ninth grade and still holds up in 2010, despite lyrical conceits that would make Chuck D giggle and border on Sp?n?al Tap parody. But I digress.
The real Mellotron was powered by looped audio tape recordings of full orchestra, solo flute, and so on—one recording, one tape loop, for each note of the 35-note keyboard. The M3000 is powered by individual samples of all 35 notes of each original tape set. The resulting sound is incredible, even over the iPad’s tiny built-in speaker.
All 35 keys are on-screen and available at once, so anything that can be played on a Mellotron can be played on the M3000. … The M3000 also supports 4 in-memory voices at one time, with independent keyboard and chordpad voices. The inclusion of a rich, spacious onboard reverb unit allows the M3000 to be used as a recording or performance instrument with no outboard effects chain.
Here’s what you can’t do. You can’t plug a MIDI keyboard into your iPad to drive the M3000’s performance. You have to play the virtual onscreen keyboard. You also can’t record your M3000 performance to a sequencer.
But there’s nothing stopping you from taking this $12 iPad Mellotron onstage or into a home or professional recording studio. Or just whipping it out on a long bus trip or tough day in the cubicle and regaling your companions with impromptu renditions of “Space Oddity.”
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.
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.
Join us for a lively discussion as we talk about designing and coding for the likes of the Sundance Film Festival and New York Magazine, and the joys of responsive web design, working remotely, and swearing profusely on Twitter. We may even get Ethan’s take on Microsoft’s dazzling new IE9.
As always, watch and participate in the live broadcast by tuning to live.5by5.tv at the appointed time.
This Thursday, June 3, 2010, at 1:00 PM EDT, join Dan Benjamin and me for the taping of The Big Web Show Episode Six, as we chat with leading interaction designer Luke Wroblewski about designing for the mobile space, and learn why the mobile experience for a web application or site should be designed before the PC version.
Designing for 700 million people
Luke Wroblewski is an internationally recognized digital product design leader who has designed or contributed to software used by more than 700 million people worldwide. He is the author of Web Form Design (“That rare book capable of transforming the way an entire field does its business.”—Communication Arts) and Functioning Form, and an extremely popular speaker at leading web design conferences. After long stints as Chief Design Architect at Yahoo! and Lead User Interface Designer of eBay Inc.’s platform team, he is currently Chief Design Officer and co-founder of a stealth start-up.
Watch, Listen, Participate
Participate in the live taping by sharing your questions for Luke via chatroom or phone.
5by5 is an Internet broadcasting network, home to podcasts like The Pipeline, The Big Web Show, The Conversation, The Dev Show, and more, with over 120,000 downloads per week. The Big Web Show features special guests and topics like the future of publishing, art direction online, content strategy, web fonts and typography, CMS shootouts, HTML5 and CSS3, building an audience, and more. Previous episodes are available for your listening and viewing pleasure.
New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.
A Reading Heatmap: Key passages illuminated by layering all readers’ highlights for the same text.
LAST MONTH, he wowed us with Books in the Age of the iPad, a call to make digital books as beautiful as printed ones. This month, Craig Mod is back with Embracing the Digital Book, an article (or blog post if you must) that begins as a critique of iBooks and Kindle and moves on to discuss the e-reader of our dreams, complete with reasoned social features:
I’m excited about digital books for a number of reasons. Their proclivity towards multimedia is not one of them. I’m excited about digital books for their meta potential. The illumination of, in the words of Richard Nash, that commonality between two people who have read the same book.
We need to step back for a moment and stop acting purely on style. There is no style store. Retire those half-realized metaphors while they’re still young.
Instead, let’s focus on the fundamentals. Improve e-reader typography and page balance. Integrate well considered networked (social) features. Respect the rights of the reader and then — only then — will we be in a position to further explore our new canvas.