easilyamused |

Archive for June, 2011

Flexible, adaptive, responsive


For the past couple of days I’ve been devouring Ethan Marcotte’s new book, Responsive Web Design. It’s the fourth in the series of “brief books for people who make websites” published by A Book Apart (an outgrowth of A List Apart). Each one focuses on a specific subject, and is written in a direct, conversational manner with a hands-on approach for web designers.

“Responsive web design” is Marcotte’s term for what I first heard referred to as “adaptive layout” by Microsoft’s Geraldine Wade (now Banes) when she was working on the original New York Times Reader. I usually just call it “flexible layout.” (As the Times Reader app suggests, it’s not only applicable to web pages.) The essential idea is visual design that adapts itself intelligently to the size, orientation, and resolution of the digital “page” it’s displayed on. This can be done well or badly, of course, but first you’ve got to understand the importance of doing it at all.

Marcotte is cogent and persuasive about that. And he shows you exactly how to do it, step by step, even though this is not strictly speaking a “how to” book. More important, he shows you why to do it. His last chapter suggests a reversal of the notion of “graceful degradation” in onscreen design: instead of making a complex design for a big monitor and the latest, most capable software, and then figuring out how it should deal with smaller sizes or less capable systems, he suggests starting by designing a simple, uncomplicated basic design that will work on the tiniest mobile device (“mobile first”), then adding features as (and if) they seem useful in a more expansive environment. Both approaches are adaptable and responsive, but this one seems cleaner and more elegant.

Now the area that interests me most is text typography, which Marcotte doesn’t go into in any great detail. But this just means that there’s more to be learned and invented in this area.

I’m a fan of small, handy, precisely targeted books, and the Book Apart series is just that. These books are consistently designed (by Jason Santa Maria), readable, and easily portable (despite somewhat heavy coated paper). There are a few bits of sloppiness; the proofreader could have caught the glitches in the hyphenation algorithm that produced “wides-creen” and “in-teract” as word breaks, and a copyeditor might have questioned the author’s frequent use of “to better [do this]” or “to better [do that],” but these are quibbles. Responsive Web Design and its predecessors in this series are useful, well-done tools in their own right.

ATypI Reykjavík 2011: registration & program


Registration has just opened for this year’s ATypI conference in Reykjavík, Iceland, September 14–18, and the preliminary program has been posted. Early-bird rates for registration will be available until August 13.

Iceland has an active local typographic and design community, and has the singular advantage of being easily reachable from both Europe and North America. (Icelandair even flies nonstop from Seattle these days, which is selfishly convenient for me.) The conference venue will be the newly built Harpa concert hall and conference center in Reykjavík, and the keynote speaker will be Icelandic calligrapher and type designer Gunnlaugur SE Briem.

Go ahead – register now!

Regional powers


I’ve been looking with interest at “CSS Regions,” Adobe’s entry into the arena of flexible page design on the web. This is clearly the sanguinary bleeding edge of onscreen design today – designing intelligent layouts that will behave differently (but coherently) under different circumstances, most notably on screens or in windows of different sizes and shapes.

Adobe Labs has released an experimental WebKit-based web browser, as a platform for showing off what CSS Regions can do. The demonstrations are mostly about shapes: they include multiple columns, arbitrarily shaped text blocks, text that flows from one text block to any other text block on the page, and a couple of other, more specific tricks. In the demos, text wraps neatly around images or around other text, in a highly flexible manner.

It’s good to see these problems being tackled. But there’s something missing. As an earlier Wedmonkey article about this technology put it, “when it comes to the flow of text around images, pull quotes and other block level elements, well, web typography falls apart.” CSS Regions is clearly aimed at enabling design with these “block level elements.” But that’s only macro-level typography; what about the typography of the text that’s doing all that wrapping? We need the same level of control over text typography on the web that we’ve got today on the printed page. And not just in an inflexible page created in InDesign and turned into a static PDF.

More tools, please.