A List Apart Issue No. 367: Apple’s Vexing Viewport
In A List Apart Issue No. 367, Peter-Paul Koch, Lyza Danger Gardner, Luke Wroblewski, and Stephanie Rieger explain why Apple’s new iPad Mini creates a vexing situation for designers and developers who create flexible, multi-device experiences.
Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal. This agreement has never been more important.
That’s why it hurts when a device or browser maker does something that goes against our agreement—especially when they’re a visible and trusted friend of the web like Apple. Read Vexing Viewports and contribute to the discussion.
This issue of the magazine also marks the departure of Jason Santa Maria as creative director after seven years of brilliant design and support.
Jason’s elegant redesign of A List Apart and its brand in 2005, together with the master stroke of bringing in Kevin Cornell as illustrator, brought the magazine new fame, new readers, and new respect. Over seven great years, his attention to detail, lack of pretension, and cheerful, can-do attitude has made working on ALA a pleasure. Jason was also a key member of the strategic team that envisioned ALA’s upcoming content expansion—about which, more will be revealed when the site relaunches in January.
Jason will continue at ALA as a contributing writer and as designer of A Book Apart (“brief books for people who make websites”), of which he is also a co-founder.
An Event Apart Austin 2012
FOLLOW THE ACTION at An Event Apart Austin – three days of design, code, and content for people who make websites, now taking place in Austin, TX.
Just the tweets.
“In his opening keynote at An Event Apart in Austin, TX 2012 Jeffrey Zeldman talked about the need to keep content front and center in websites and the web design process.” Enjoy Luke Wroblewski’s notes on my presentation, “Content First.”
“In her presentation at An Event Apart in Austin, TX 2012 Sarah Parmenter talked about the changes responsive web design requires of web designers.” Enjoy Luke Wroblewski’s notes from her talk on “Responsive Design Workflow.”
Jason Santa Maria “outlined the current state of web fonts and how to approach typography online.” Luke Wroblewski’s notes on the talk.
My notes on Luke Wroblewski’s AEA Austin presentation.
“In her Content Strategy Roadmap presentation at An Event Apart in Austin TX 2012 Kristina Halvorson talked about how to integrate content strategy into a typical web design workflow.” Enjoy Luke Wroblewski’s notes from her talk.
In this presentation, Ethan Marcotte walks through ways to tackle thorny issues in responsive design layouts, media, advertising, and more. Here are Luke Wroblewksi’s notes on the talk.
“With the explosion of web-enabled devices of all shapes and sizes, the practice of web design and development seems more complex than ever. But if we can learn to see below this overwhelming surface to the underlying web beneath, we can learn to make sites not for specific devices but for the people using them. This presentation will demonstrate how tried and tested principles like REST and progressive enhancement are more important than ever. By embracing the spirit of the web, you can ensure that your websites are backwards compatible and future friendly.” – Jeremy Keith
All the links from Andy Clarke’s amazing AEA Austin presentation.
“Andy Clarke talked about the changing processes in web design and shared a number of tools and techniques that can help designers make transition to a more modern workflow.” Luke Wroblewski’s notes from the talk.
At An Event Apart in Austin TX 2012, Aarron Walter shared why having a personality and story matters for companies. Notes by Luke Wroblewski.
Articles and books cited in the Aarron Walter talk; compiled by AW himself.
Enjoy the Flickr pool of photos from the three-day web design conference event now being held in Austin, TX.
Watch this space!
More to come.
EPIC BLOG POST from Blake Watson, a web designer with spinal muscular atrophy type 2, tremendous courage and faith, and an awesome mom:
We Still Have Our Dreams at ihatestairs.org
Big Web Show No 55: Living with a hidden disability
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.
Now You See Me…
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 as the new Flash
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.
Filed under: Accessibility, Adobe, Advocacy, Apple, Applications, apps, architecture, art direction, Authoring, Best practices, business, development, E-Books, editorial, Flash, Formats, Free Advice, glamorous, HTML, HTML5, industry, ipad, iphone, Publications, Publishing, Responsibility, Standards, State of the Web, The Essentials, W3C, Web Design, Web Design History, Web Standards
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.
My other iPad is a 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.
Filed under: A List Apart, Accessibility, Amazon, Apple, art direction, Authoring, Best practices, books, Browsers, Code, Compatibility, Design, E-Books, Formats, HTML, industry, Layout, Site Optimization, The Essentials, Touchscreen, Web Design, Web Design History, Web Standards, webkit, zeldman.com
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:
- 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!