MARISSA CHRISTINA joins Jeffrey Zeldman and Dan Benjamin to discuss her path as a web designer diagnosed with a debilitating vestibular disorder, and her blog Abledis.com, documenting living with a hidden disability.
by DEREK FEATHERSTONE
For seven years, progressive enhancement has been how we build sustainable, interoperable, and accessible web solutions.
Now that the release of ARIA is approaching, let’s see how ARIA fits within progressive enhancement strategy. Can we use ARIA in a way that respects progressive enhancement? Can we use ARIA in ways that ensure we have a working solution at every level?
by DETLEV FISCHER
Web developers interested in accessibility issues often look to WAI-ARIA to bridge the accessibility gap created by ubiquitous scripting and make web applications more accessible to blind and visually impaired users. But can we recommend WAI-ARIA without reservation? Are there times when appropriate semantic HTML elements are preferable to custom widgets?
About the Magazine
A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
Illustration by Kevin Cornell for A List Apart.
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.
“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.
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.
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:
- Exporting epub from InDesign (PDF) – wonderfully compact and helpful
- 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:
- Testing your ePubs with Bookworm – Bookworm ePub reader. This is a free program for publishers from O’Reilly.
- Alternately, there is EpubCheck, which is also free for download. It comes from Adobe and is a downloadable web app.
- Alternately again, there is a free online test from Threepress.
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!
Ethan is the author of an upcoming A Book Apart treatise on responsive web design; my co-author on Designing With Web Standards 3rd Edition; and the co-author with Dan Cederholm of Handcrafted CSS: More Bulletproof Web Design.
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.
The Big Web Show is a weekly video podcast on Everything Web That Matters, co-hosted by 5×5 network founder Dan Benjamin and yours truly.
See more versions in Mr Collison’s “Media Query Layouts” set on Flickr.
Read the article that started it all. Coming soon as a book by Mr Ethan Marcotte from A Book Apart. (The current A Book Apart book, Mr Jeremy Keith’s HTML5 For Web Designers, ships Friday. Mr Ethan Marcotte will be our guest this Thursday, June 24, on The Big Web Show. Synchronicity. It’s not just an LP by The Police. Kids, ask your parents.)
The beauty of responsive web design becomes obvious when you see your site in smart phones, tablets, and widescreen desktop browsers. It’s as if your site was redesigned to perfectly fit that specific environment. And yet there is but one actual design—a somewhat plastic design, if you will. An extensible design, if you prefer. It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. Powered by CSS media queries, it’s the resurrection of a Dao of Web Design and a spiffy new best practice. All the kids are doing it.
Well, anyway, some of the cool ones are. See also the newly retooled-per-responsive-design Journal by Mr Hicks. Hat tip: Mr Stocks. I obviously have some work to do on this site. And you may on yours.
Seen any good responsive redesigns lately?
Hot dang! Use fluid grids, flexible images, and CSS media queries to create elegant user experiences that fit any browser or device’s viewport. By Ethan Marcotte, co-author of Designing With Web Standards 3rd Edition.