Responsive times two: essential new books from Ethan Marcotte & Karen McGrane

Responsive Design times two! New books from the geniuses, Ethan Marcotte and Karen McGrane.

IT WAS the early 2000s. The smoke from 9/11 was still poisoning my New York.

Karen McGrane was a brilliant young consultant who had built the IA practice at Razorfish while still in her early 20s, and was collaborating with my (now ex-)wife on some large, exciting projects for The New York Public Library. Ethan Marcotte was a Dreadlocks-hat-sporting kid I’d met in Cambridge through Dan Cederholm, with whom he sometimes collaborated on tricky, standards-based site designs. The first edition of my Designing With Web Standards was in the can. I figured that, like my previous book, it would sell about 10,000 copies and then vanish along with all the other forgotten web design books.

Nothing happened as I expected it to. The only thing I got right besides web standards was the desire to some day work with Karen, Ethan, and Dan—three dreams that, in different ways, eventually all came true. But nothing, not even the incredible experience of working with these luminaries, could have prepared me for the effect Ethan and Karen and Dan would have on our industry. Even less could I have guessed back then the announcement it’s my pleasure to make today:

Ethan Marcotte’s Responsive Design: Patterns and Principles and Karen McGrane’s Going Responsive are now available in our A Book Apart store.

It was thrilling to bring you Ethan and Karen’s first industry-changing A Book Apart books. Being allowed to bring you a second set of absolutely essential works on responsive design from these two great minds is a gift no publisher deserves, and for which I am truly grateful.

Building on the concepts in his groundbreaking Responsive Web Design, Ethan now guides you through developing and using design patterns so you can let your responsive layout reach more devices (and people) than ever before.

Karen McGrane effortlessly defined the principles of Content Strategy for Mobile. She’s helped dozens of teams effectively navigate responsive projects, from making the case to successful launch. Now, she pulls it all together to help you go responsive—wherever you are in the process.

Ebooks are available immediately and paperbacks ship next week. Buy Responsive Design: Patterns and Principles and Going Responsive together and save 15%! (Learn more.)

A List Apart № 423: container queries, responsive content

A List Apart 423

WHETHER the topic is responsive CSS or content that responds to the right user at the right time, Issue № 423 of A List Apart is all about finding the path forward:

Container Queries: Once More Unto the Breach

by Mat Marquis

Mat MarquisMedia queries have been the go-to tool in building responsive sites, allowing us to resize and recombine modules to suit multiple contexts, layouts, and viewports. But relying on fixed viewport sizes can quickly twist stylesheets into Gordian knots. We still need a future-friendly way to manage responsive CSS. Mat Marquis explores the problem and the progress toward the solution—and issues a rallying call.

Create a Content Compass

by Meghan Casey

Meghan CaseyContent projects need a sense of direction: something to help you and your team provide the right content to the right people at the right time. Enter the content compass—centered on your strategy and supported by your messaging—to keep your content efforts on track. In this excerpt from Chapter 11 of The Content Strategy Toolkit, Meghan Casey explains her methodology for developing a core strategy statement and messaging framework.

A List Apart № 421 Gets Personal

A List Apart Issue No. 421

THERE’S GREAT reading for people who make websites in Issue No. 421 of A List Apart:

Resetting Agency Culture

by Justin Dauer

Forget Air Hockey, Zen Gardens, and sleep pods: a true “dream” company invests in its people—fostering a workplace that supports dialogue, collaboration, and professional development. From onboarding new hires to ongoing engagement, Justin Dauer shares starting points for a healthy office dynamic and confident, happy employees.

Crafting a Design Persona

by Meg Dickey-Kurdziolek

Every product has a personality—is yours by design? Meg Dickey-Kurdziolek shows you how Weather Underground solved its personality problems by creating a design persona, and teaches you collaborative methods for starting a personality adjustment in your company.

McGrane: Kill Your CMS

THE ERA of “desktop publishing” is over. Same goes for the era where we privilege the desktop web interface above all others. The tools we create to manage our content are vestiges of the desktop publishing revolution, where we tried to enable as much direct manipulation of content as possible. In a world where we have infinite possible outputs for our content, it’s time to move beyond tools that rely on visual styling to convey semantic meaning. If we want true separation of content from form, it has to start in the CMS.–Karen McGrane, WYSIWTF ∙ An A List Apart Column.

Design is Copy is Design

ART AND COPY have been joined at the hip since Bill Bernbach launched the creative revolution in the 1960s. But on the web, not so much.

It’s great that some of the brightest minds in our industry continue making the point that copy matters, and that “one of the most overlooked designers in any field is the copywriter.” But it’s sad that, whenever we make that point, the only examples we seem to come up with are 37signals and Apple. (Flickr used to be in there, too, but these days, sadly, nobody wants to talk about Flickr—even when they’re a canonical example of doing x right.)

Anyhoo: Great Design is Jargon-Free is another fine instance of a smart web person (in this case, the handsome and erudite Scott Berkun) making those points.

Big Web Show 78: Bloomstein on content strategy

IN EPISODE No. 78 of The Big Web Show (“everything web that matters”), I interview Margot Bloomstein, author of Content Strategy at Work: Real-World Stories to Strengthen Every Interactive Engagement (Morgan Kaufmann, 2012), about her professional transition from design to content strategy; the vagaries of the consulting life; how mentoring and non-traditional academic backgrounds can fit into a web career; how to write a content strategy book for people who are not content strategists; and the beauties of Pittsburgh.

Content Strategy for Mobile three ways from Sunday

IT’S A Karen McGrane world! Today, as A Book Apart unveils Karen McGrane’s amazing new Content Strategy for Mobile, the entirety of A List Apart Issue No. 364 is dedicated to Karen and her vision for future-friendly web content:

Uncle Sam Wants You (to Optimize Your Content for Mobile)

Thirty-one percent of Americans who access the internet from a mobile device say that’s the way they always or mostly go online. For this group, if your content doesn’t exist on mobile, it doesn’t exist at all. The U.S. government has responded with a broad initiative to make federal website content mobile-friendly. Karen McGrane explains why this matters—and what you can learn from it.

Your Content, Now Mobile

Making your content mobile-ready isn’t easy, but if you take the time now to examine your content and structure it for maximum flexibility and reuse, you’ll have stripped away all the bad, irrelevant bits, and be better prepared the next time a new gadget rolls around. This excerpt from Karen McGrane’s new book, Content Strategy for Mobile, will help you get started.

Help Hurricane Sandy relief efforts

Fifteen percent of sales of Karen McGrane’s Content Strategy for Mobile and other A Book Apart books sold today will go to the Red Cross in its effort to aid victims of Hurricane Sandy.

Web Design Manifesto 2012

THANK YOU for the screen shot. I was actually already aware that the type on my site is big. I designed it that way. And while I’m grateful for your kind desire to help me, I actually do know how the site looks in a browser with default settings on a desktop computer. I am fortunate enough to own a desktop computer. Moreover, I work in a design studio where we have several of them.

This is my personal site. There are many like it, but this one is mine. Designers with personal sites should experiment with new layout models when they can. Before I got busy with one thing and another, I used to redesign this site practically every other week. Sometimes the designs experimented with pitifully low contrast. Other times the type was absurdly small. I experimented with the technology that’s used to create web layouts, and with various notions of web “page” design and content presentation. I’m still doing that, I just don’t get to do it as often.

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind—although nobody until you has suggested I simply didn’t have access to a computer and therefore didn’t know what I was designing. This design may be good, bad, or indifferent but it is not accidental.

A few people who hate this design have asked if I’ve heard of responsive web design. I have indeed. I was there when Ethan Marcotte invented it, I published his ground-breaking article (and, later, his book, which I read in draft half a dozen times and which I still turn to for reference and pleasure), and I’ve had the privilege of seeing Ethan lecture and lead workshops on the topic about 40 times over the past three years. We’ve incorporated responsive design in our studio’s practice, and I’ve talked about it myself on various stages in three countries. I’m even using elements of it in this design, although you’d have to view source and think hard to understand how, and I don’t feel like explaining that part yet.

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)

This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful. How can passages set in Georgia and headlines in Franklin be anything but beautiful? I love seeing my words this big. It encourages me to write better and more often.

If this were a client site, I wouldn’t push the boundaries this far. If this were a client site, I’d worry that maybe a third of the initial responses to the redesign were negative. Hell, let’s get real: if this were a client site, I wouldn’t have removed as much secondary functionality and I certainly wouldn’t have set the type this big. But this is my personal site. There are many like it, but this one is mine. And on this one, I get to try designs that are idea-driven and make statements. On this one, I get to flounder and occasionally flop. If this design turns out to be a hideous mistake, I’ll probably eventually realize that and change it. (It’s going to change eventually, anyway. This is the web. No design is for the ages, not even Douglas Bowman’s great Minima.)

But for right now, I don’t think this design is a mistake. I think it is a harbinger. We can’t keep designing as we used to if we want people to engage with our content. We can’t keep charging for ads that our layouts train readers to ignore. We can’t focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer.

Most of you reading this already know these things and already think about them each time you’re asked to create a new digital experience. But even our best clients can sometimes push back, and even our most thrilling projects typically contain some element of compromise. A personal site is where you don’t have to compromise. Even if you lose some readers. Even if some people hate what you’ve done. Even if others wonder why you aren’t doing what everyone else who knows what’s what is doing.

I don’t think you will see much type quite this big but I do think you will see more single-column sites with bigger type coming soon to a desktop and device near you. For a certain kind of content, bigger type and a simpler layout just make sense, regardless of screen size. You don’t even have to use Typekit or its brothers to experiment with big type (awesome as those services are). In today’s monitors and operating systems, yesterday’s classic web fonts—the ones that come with most everyone’s computer—can look pretty danged gorgeous at large sizes. Try tired old Times New Roman. You might be surprised.

The present day designer refuses to die.

Content Strategy Double Header: A List Apart 349

IN ISSUE NO. 349 of A List Apart for people who make websites, savor the content strategy sweetness as you dip into a double dose of Rachel Lovinger, a prime motivator behind the content strategy movement.

Tinker, Tailor, Content Strategist


What does content strategy mastery look like? As in any field, it comes down to having master skills and knowing when to apply them. While there are different styles of content strategy (from an editorial and messaging focus to a technical and structural focus), the master content strategist must work with content from all angles: messaging architecture and messaging platforms; content missions and content management. Above all, she must advocate for multiple constituents, including end users, business users, stakeholders, and the content vision itself. Rachel Lovinger shares the skills that go into achieving CS mastery.

Content Modelling: A Master Skill


The content model is one of the most important content strategy tools at your disposal. It allows you to represent content in a way that translates the intention, stakeholder needs, and functional requirements from the user experience design into something that can be built by developers implementing a CMS. A good content model helps ensure that your content vision will become a reality. Lovinger explains how to craft a strong content model and use it to foster communication and align efforts between the UX design, editorial, and technical team members on your project.

Illustration by Kevin Cornell for A List Apart.

Designing Apps With Web Standards (HTML is the API)

The Web OS is Already Here… Luke Wroblewski, November 8, 2011

Mobile First Responsive Web Design, Brad Frost, June, 2011

320 and up – prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Andy Clarke and Keith Clark.

Gridless, HTML5/CSS3 boilerplate for mobile-first, responsive designs “with beautiful typography”

HTML5 Boilerplate – 3.02, Feb. 19, 2012, Paul Irish ,Divya Manian, Shichuan, Matthias Bynens, Nicholas Gallagher

HTML5 Reset v 2, Tim Murtaugh, Mike Pick, 2011

CSS Reset, Eric Meyer, v 2.0b1, January 2011

Less Framework 4 – an adaptive CSS grid system, Joni Korpi (@lessframework)

Responsive Web Design by Ethan Marcotte, 2011

Adaptive Web Design by Aaron Gustafson, 2011

Web Standards Curriculum – Opera

Getting Started With Sass by David Demaree, 2011, A List Apart

Dive into Responsive Prototyping with Foundation by Jonathan Smiley, A List Apart, 2012

Future-Ready Content Sara Wachter-Boettcher, February 28, 2012, A List Apart

For a Future Friendly Web Brad Frost, March 13, 2012, A List Apart

Orbital Content Cameron Koczon, April 19, 2011, A List Apart

Web standards win, Windows whimpers in 2012, Neil McAllister, InfoWorld, December 29, 2011

Thoughts on Flash – Steve Jobs, April, 2010

Did We Just Win the Web Standards Battle? ppk, July 2006

Web Standards: Wikipedia

The Web Standards Project: FAQ (updated), February 27, 2002

To Hell With Bad Browsers, A List Apart, 2001

The Web Standards Project: FAQ, 1998

The Web Standards Project: Mission, 1998

HTML5 at A List Apart

Mobile at A List Apart

Browsers at A List Apart