Divitis We Fall

Highlight and Note from Michael Thorne (@mikkelz_za)

“Another classic example of divitis kicks in when a designer catches the ‘tables are bad, CSS is good’ virus and righteously replaces 200 tons of table markup with 200 tons of nested divs.”

Note: Been there. Done that. Never again. #DWWS (via @zeldman)

Amazon Kindle: Michael Thorne shared from Designing with Web Standards.

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.

iPad as the new Flash


Jeffrey Zeldman Presents

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.

While some of this will lead to useful innovation, particularly in the area of gestural interfaces, that same innovation can just as readily be accomplished on websites built with HTML, CSS, and JavaScript—and the advantage of creating websites instead of iPad apps is that websites work for everyone, on browsers and devices at all price points. That, after all, is the point of the web. It’s the point of web standards and progressive enhancement.

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.

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.

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.

HTML5 For Web Designers: The eBook

HTML5 For Web Designers

Jeremy Keith’s HTML5 for Web Designers is now available as an epub at books.alistapart.com.

If you bought the paperback, watch your inbox for a special discount on the ebook. (To take advantage of this offer, enter the discount code in page 2 of the shopping cart’s checkout process, after you put in your billing information.)

Also, be on the lookout for our second book, CSS3 For Web Designers by Dan Cederholm, forthcoming this Fall. Upcoming A Book Apart topics include progressive enhancement, content strategy, responsive web design, and emotional design by industry-leading authors Aaron Gustafson, Erin Kissane, Ethan Marcotte, and Aarron Walter.

So you want to be an epublisher

You scream, I scream, we all scream for epubs. As with all internet bounty, it’s even more exciting to produce than to consume. So after you’ve glutted yourself on all those free Jane Austen novels and children’s books, and gone into hock re-creating your library on iPad, why not give something back by doing a little writing yourself?

What to write about, how to ensure quality, and how to identify and market to an audience are beyond the scope of this little post, but we can point to some dandy resources that tell how to create and test your epub. So let’s go!

Our first two resources come from Adobe and tell how to set up an Adobe InDesign file to produce a proper epub. There are other ways of creating an epub—for instance, you can author it in valid HTML, zip it up, and convert to epub using the BookGlutton API. For many readers of this site, that’s all you need to know.

But if you are a graphic designer or book designer, or if epub is only one format you are publishing to (i.e. if you are publishing traditionally printed books that double as epubs), then the next two resources are exactly what you need:

  1. Exporting epub from InDesign (PDF) – wonderfully compact and helpful
  2. Producing ePub Documents from InDesign – Digital Editions – a bit dry but useful; best viewed via the Readability bookmarklet from our friends at Arc90

Once you have your pub, you want to know that it is valid. Any of the following services will help there:

If the tests identify errors, you’ll need to go back into InDesign, fiddle with settings, re-export, and re-test. Once your epub validates, it’s time to go to market: How to sell your eBook via Amazon and the iBookstore. Good luck, and enjoy!

Battle of the e-Book readers: Stanza vs. iBooks

A Scandal in Bohemia, by Conan Doyle, as viewed in Stanza.

Above, page one of “A Scandal in Bohemia,” the first story in Sir Arthur Conan Doyle’s Adventures of Sherlock Holmes, as seen in Stanza, a free reader for iPad and iPhone. Stanza has a simple interface for finding, buying (and downloading free) e-books.

Stanza lets you control font size and choose from a number of templates offering a useful variety of foreground and background color and contrast. As the screenshot shows, it also lets you set text ragged right, which is the most legible setting for onscreen text.

Below, the same page in iBooks, the reader that comes with iPad. As one would expect from the company that brought us iTunes, the iBooks application has a slick interface for buying (and downloading free) e-books. But as a reader, it is currently less feature-rich, and thus less usable and less pleasing, than Stanza.

A Scandal in Bohemia, by Conan Doyle, as viewed in iBooks.

In iBooks, one cannot turn off full justification. While full justification is lovely in carefully produced printed books, it has a long history of bad aesthetics and poor usability on the screen. Given a sufficiently wide measure, full justification can be used onscreen for short passages, but it is inappropriate for anything beyond a paragraph or two.

Combine full justification with a single high-contrast template, and you have a reader that is better to look at than to read. Indeed, the 1.0 version of iBooks seems more like a flashy demo intended to wow potential iPad purchasers in the store than an application designed to provide book lovers with a viable alternative to print.

One suspects that future upgrades of iBooks will address these concerns. Meanwhile, if you intend to do serious reading on your iPad (or iPhone/Touch), download Stanza for free from the iTunes store.


Addendum: One wonders what will become of Stanza given Amazon’s ownership of the parent company. More here. Best scenario: the Kindle reader incorporates excellent Stanza features, while Stanza continues to operate as an alternative to Kindle, iBooks, et al.


More Mod on the Digital Book

Embracing the Digital Book by Craig Mod.

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.

Embracing the digital book — Craig Mod