Authoritative, Readable, Branded: Report from Poynter Design Challenge, Part 2

Poynter style guide

THIS year’s Poynter Digital Newspaper Design Challenge was an attempt by several designers and pundits, working and thinking in parallel, to save real news via design. In Part 1 of my report from Poynter, I discussed the questions driving the challenge, and talked about the design work done in response to it by my colleagues Kat Downs Mulder, Mike Swartz, Lucie Lacava, and Jared Cocken. Here in Part 2, I’ll discuss my own work and the approach we took at my studio. But we begin with a quick look back at the past designs that brought us to this point:

Experiment № 1: The Deck

During the past decade and a half, as both a publication designer and a publisher, I watched in horror as our publications became reader-hostile minefields of intrusive ads, overlays, and popups. The first thing I tried to do about this (besides removing the web equivalent of chart junk from my magazine) was to offer an alternative approach to advertising via The Deck, an ad network I cofounded with Jim Coudal of coudal.com and Jason Fried of Basecamp (formerly 37signals). The Deck permitted only one appropriately targeted ad per each page of content viewed. As primary instigator Jim Coudal put it:

A buy in The Deck reaches the creative community on the web in an uncluttered, controlled environment, far more valuable than a standard banner or a single text ad among dozens of others.

Jim, Jason, and I hoped that our cost-per-influence model would replace the CPM race to the bottom, and that our quasi-religious use of whitespace would be widely imitated by the smartest publications online.

But that didn’t happen. Advertising just got more intrusive. The Deck succeeded as a small business supporting a network of interesting small publications, but not at all as a primary influencer on the direction taken by advertising that supports web content.

Experiment № 2: Readability

Then about seven years ago, my friend Rich Ziade and his engineers created Readability, an app that sat between you and the ugly site you were trying to read, the way screen readers sit between visual websites and blind web users. Readability grabbed an article page’s primary content, removed the junk, and replaced the cluttered and illegible layout with a clean, readable page inspired by the clarity of iBooks and Kindle, which were just taking off at the time.

Rich released Readability 1.0 as open source; Apple immediately absorbed it into the Safari browser, where it continues to provide Safari’s built-in “reader” mode. (Safari’s “reader” mode was Apple’s first step in decluttering the web and returning it to the people who use it; “content blocking” would be the second step.)

Moreover, Readability 2.0, released by Rich’s then-company Arc90 the following year, added automatic payment for content creators slash publishers, as I explained at the time to anyone who would listen. Had Readability been allowed to continue the experiment, content monetization might have been less of a problem than it is today, and publication brands (the notion that it matters who publishes what we read) would be in exactly the same pickle they’re in anyway—except that readers would get their news in Readability’s attractive and customizable format, instead of from Apple News, Facebook, and the like.

I used to go around the world on lecture tours, warning my fellow designers that if we didn’t figure out how to declutter and compellingly brand sites, apps like Readability would do it for us. I still go around on lecture tours, but I’ve moved on to other issues. As for Readability, it was killed by a digital lynch mob after one powerful blogger, misunderstanding the motivation behind it, issued the digerati equivalent of a fatwā. But that’s another story.

Experiment № 3: Big Type Revolution

In 2012, inspired by Readability and frustrated by the industry’s determination to make ever less legible, ever more cluttered sites full of tracking and popups and everything except what readers need, I bet big on large type:

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.)

Writing in Forbes, Anthony Wing Kosner saw the future in my initially crude experiment:

If you want to know where the web is going, one clue is to look at the personal sites of top-tier web designers. And one trend that just bubbled to the surface is large body type—the kind you don’t have to command-plus to read.

Jeffrey Zeldman…made a particularly strong point about it in his “Web Design Manifesto 2012,” that he published yesterday.

Large Type: One Web Designer Puts Content First in a Big Way

Not to brag (okay, too late), but he wasn’t wrong. It was the future.

(Also, I’m fairly sure I wasn’t the only designer at the time who reacted against tiny type and cluttered anti-user layouts by stripping pages down to only their most necessary elements, and boosting the type size to enforce a more relaxed reading posture. The idea was in the air.)

The experiment becomes the norm

In any case, soon enough, readable (big type and plenty of whitespace) layouts starting popping up everywhere. At medium.com. In Mike Pick’s redesign of A List Apart. In article pages for The New York Times, Washington Post, Vox, Newsweek, The New Yorker, and, eventually, many other publications.

An uncluttered page focused on the reading experience (reminder: big type and plenty of whitespace) is now the default at several leading news publications. But many smaller publications, struggling just to survive, have not kept up. And so we have a perfect crisis:

Publications that do not encourage reading, loyalty, or repeat visits are struggling to survive at the very moment real news is under attack from an authoritarian president. What to do?

 

A two-up from the Poynter challenge

My response to the Poynter Design Challenge

There are many ways to respond to an existential crisis like the one facing most news publications. You can rethink the relationship between reader and publication. Rethink the job of the publication. Make news work more like a lifestyle app. Make it more immersive. My colleagues followed those paths out brilliantly (as described in Part 1).

But I went for the low-hanging fruit. The thing any publisher, no matter how cash-strapped, could do. The thing I had seen working since I started yelling about big type in 2012. I went for a clean, uncluttered, authoritative, branded page. Authoritative because this isn’t fake news. Branded because the source matters.

The easiest, fastest, most readily attainable path to clean, uncluttered, authoritative, branded design is through typography.

 

Sample reader layout from the Poynter challenge

Any publication can be readable

Any newspaper, however poor, can afford better typography. Any newspaper with a designer on staff can attain it, if the paper stops treating design as a lackey of marketing or editorial or advertising, and sets designers free to create great reading experiences.

In my work, which is still underway (and will continue for some time), I focused on creating what I call “reader” layouts (and probably other designers call them that too; but I just don’t know). Layouts that are branded, authoritative, clean, uncluttered, and easy to read.

I played with type hierarchies and created simple style guides. Most of my little pages began as Typecast templates that I customized. And then Noël Jackson from my studio cleaned up the HTML and CSS to make it more portable. We put the stuff up on GitHub for whoever wants to play with it.

These are only starting points. Any designer can create these kinds of layouts. There’s nothing special about what I did. You can do the same for your paper. (And if you can’t, you can hire us.)

The work I share here is the start of a project that will continue at our studio for a long time. #realnews for the win!

Additional reading

You’re welcome: cutting the mustard then and now.

EVERY TIME I hear a young web developer cite the BBC’s forward-thinking practice of “cutting the mustard,” by which they mean testing a receiving web device for certain capabilities before serving content, I remember when my team and I at The Web Standards Project invented that very idea. It’s a million web years ago, by which I mean fourteenish human years ago, so nobody remembers but me and some other long toothed grayhairs, plus a few readers of the first edition of Designing With Web Standards. But I like you, so I will tell you the story.

Back then in those dark times, it was common practice for web developers to create four or more versions of the same website—one for each browser then in wide use. It was also a typical (and complementary) practice to send server-side queries to figure out which browser was about to access a site’s content, and then send the person using that browser to the site version that was configured for her browser’s particular quirks, proprietary tags, and standards compliance failings.

The practice was called “browser detection.” Nobody but some accessibility advocates had ever questioned it—and the go-go dot-com era had no time or care for those folks.

But we at The Web Standards Project turned everything on its head. We said browsers should support the same standards instead of competing to invent new tags and scripting languages. We said designers, developers, and content folks should create one site that was accessible to everyone. In a world like that, you wouldn’t need browser detection, because every browser and device that could read HTML would be able to feast on the meat of your site. (And you’d have more meat to share, because you’d spend your time creating content instead of crafting multiple versions of the same site.)

To hasten that world’s arrival, in 2001 we launched a browser upgrade campaign. Those who participated (example participant here) employed our code and content to send their users the message that relatively standards-compliant browsers were available for every platform, and inviting them to try one. Because if more people used relatively standards-compliant browsers, then we could urge more designers and developers to create their sites with standards (instead of quirks). And as more designers and developers did that, they’d bump against still-unsolved standards compliance conundrums, enabling us to persuade browser makers to improve their standards compliance in those specific areas. Bit by bit, stone by stone, this edifice we could, and would, erect.

The code core of the 2001 browser upgrade campaign was the first instance of capability detection in place of browser detection. Here’s how it worked. After creating a valid web page, you’d insert this script in the head of your document or somewhere in your global JavaScript file:

if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}

We even provided details for various flavors of markup. In HTML 4 or XHTML 1 Transitional documents, it looked like this:

<script type="text/javascript" language="javascript">
<!-- //
if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}
// -->
</script>

In STRICT documents, you’d either use a global .js file, or insert this:

<script type="text/javascript">
<!-- //
if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}
// -->

You could also just as easily send visitors to an upgrade page on your own site:

if (!document.getElementById) {
window.location =
"http://www.yourdomain.com/yourpage.html"
}

Non-WaSP members (at the time) J. David Eisenberg, Tantek Çelik, and Jim Heid contributed technical advice and moral support to the effort. WaSP sysadmin Steven Champeon, the inventor of progressive enhancement, made it all work—under protest, bless him. (Steve correctly believed that all web content should always be available to all people and devices; therefore, in principle, he disliked the upgrade campaign, even though its double purpose was to hasten the arrival of truly standards-compliant browsers and to change front-end design and development from a disrespected world of hacks to a sustainable and professional craft. ((See what I did there? I’m still respectfully arguing with Steve in my head.)))

Discovering rudimentary DOM awareness or its absence in this fashion was the first time web developers had tested for capabilities instead of chasing the dragon in a perpetual and futile attempt to test for every possible browser flavor and version number. It was the grandparent, if you will, of today’s “cutting the mustard.” And it is analogous as well to the sensible responsive design practice of setting breakpoints for the content, instead of trying to set appropriate breakpoints for every possible device out there (including all the ones that haven’t been invented yet).

Which reminds us that the whole point of web standards was and is forward compatibility—to create content that will work not only in yesterday’s and today’s browsers and devices, but in all the wonderful devices that have yet to be invented, and for all the people of the world. You’re welcome.

—CHICAGO, Westin Chicago River Hotel, 1 September 2015


Hat tip: John Morrison

The Nation, America’s oldest weekly news magazine, launches responsive, large-type redesign.

ON ITS 150th anniversary, The Nation (“a magazine of ideas and values”) relaunches its website, created in partnership with Blue State Digital and Diaspark. As one would expect of an editorially focused web entity in 2015, the new site is responsive, and uses big type and clean layouts designed for readability. It also incorporates social media innovations first seen in Medium, such as the ability to tweet or email any brief passage of text you select.

Executive Editor Richard Kim’s mini-article introducing the new site explains how the editorial process has changed—and how it has stayed the same—since the launch of the magazine’s first site in 1997:

Back then, writing for the magazine was a comparatively monastic experience. You’d work for weeks on an article, defend its arguments against vigorous but loving critiques from the editors, and gratefully accept changes from fact-checkers and copy editors. Finally, the issue would ship to the printer. And then: the vast silence. If you were lucky, a few weeks later, someone might approach you at a party and say how much they liked (or hated) your piece. Some letters from impassioned subscribers would eventually come in via the Postal Service, but encounters with actual readers were rare and cherished events.

We continue to publish the print magazine under these rigorous standards, and it will remain an essential part of our identity, offering readers a considered and curated take on matters of critical interest. The digital revolution, however, has allowed us to connect to vastly more people, and to get to know them better. Today, The Nation publishes about 70 articles a week online, which go out to more than 420,000 Twitter followers, almost 290,000 Facebook fans, and 200,000 e-mail subscribers. And believe me, we always hear back from you….

There’s also a multi-tiered approach to reading and commenting:

For the next few months, there’s no paywall: All of our articles will be free to everyone—our gift to you in The Nation’s 150th-anniversary year. Later, we’ll introduce a metered system that continues to put The Nation in front of new readers, but also asks our regular visitors to contribute to the cost of independent journalism. Finally, only subscribers will be able to leave comments—and they’ll be asked to identify themselves with a first and last name. We realize this will be controversial to some, but keeping the comments free of trolls and bots has taken an increasing amount of effort. We think it’s only fair that commenters stand by what they write, and give something to the community in return.

Who’s Afraid of the Big Bad Medium?

IN 2003, long before he was a creative director at Twitter, Douglas Bowman wrote articles about design, posted case studies about his design projects, and shared his photography on his personal/business site, stopdesign.com.

A year previously, Doug had attained instant fame in standardista circles by recoding Wired.com using CSS for layout. That sounds nonsensical nowadays, but in 2002, folks like me were still struggling to persuade our fellow web designers to use CSS, and not HTML tables, for layout. Leading web designers had begun seeing the light, and there had been a sudden profusion of blogs and personal sites that used CSS for layout, and whose markup strove to be semantic and to validate. But nobody had as yet applied web standards to a large commercial site—giving rise to the charge, among Luddite web designers, that standards-based design was “okay for blogs” but had no business on the “real” web.

Then Doug recoded Wired.com with CSS, Mike Davidson did the same for ESPN.com, and all the old reactionary talking points were suddenly as dead as Generalissimo Franco—and the race was on to build a standards-compliant, open web across all content and application sectors.


IN THE PROCESS of helping to lead this sea change, Douglas Bowman became famous, and anybody who was anybody in web design began passionately reading his blog. And yet.

And yet, when Doug had a really big idea to share with our community, he published it on A List Apart, the magazine “for people who make websites.”

Did he do so because blogging was dead? Because the open web was in trouble? Of course not. He did it because publishing on A List Apart in 2003 allowed Doug to share his innovative design technique with the widest possible audience of his peers.


PUBLISHING in multiple venues is not new. Charles Dickens, the literary colossus of Victorian England, did it. (He also pioneered serial cross-cutting, the serial narrative, and the incorporation of audience feedback into his narrative—techniques that anticipated the suspense film, serial television narratives like Mad Men, and the modification of TV content in response to viewer feedback over the internet. But those are other, possibly more interesting, stories.)

Nobody said the open web was dead when Doug Bowman published “Sliding Doors of CSS” on A List Apart.

Nobody said the blog was dead when RSS readers made it easier to check the latest content from your favorite self-publishing authors without bothering to type their personal sites’ URLs into your browser’s address bar.

Forward thinkers at The New York Times did not complain when Mike Davidson’s Newsvine began republishing New York Times content; the paper brokered the deal. They were afraid to add comments to their articles on their own turf, and saw Newsvine as a perfect place to test how live reader feedback could fit into a New York Times world.

When Cameron Koczon noticed and named the new way we interact with online content (“a future in which content is no longer entrenched in websites, but floats in orbit around users”), smart writers, publishers, and content producers rejoiced at the idea of their words reaching more people more ways. Sure, it meant rethinking monetization; but content monetization on the web was mostly a broken race to the bottom, anyway, so who mourned the hastening demise of the “web user manually visits your site’s front page daily in hopes of finding new content” model? Not many of us.

By the time Cameron wrote “Orbital Content” in April of 2011, almost all visits to A List Apart and zeldman.com were triggered by tweets and other third-party posts. Folks were bookmarking Google and Twitter, not yourhomepage.com. And that was just fine. If you wrote good content and structured it correctly, people would find it. Instead of navigating a front-page menu hierarchy that was obsolete before you finished installing the templates, folks in search of exactly your content would go directly to that content. And it was good.

So just why are we afraid of Medium? Aside from not soliciting or editing most of its content, and not paying most of its authors, how does it differ from all previous web publications, from Slate to The Verge? Why does publishing content on Medium (in addition to your personal site and other publications) herald, not just the final-final-final death of blogging (“Death of Blogging III: This Time It’s Personal”), but, even more alarmingly, the death of the open web?

You may think I exaggerate, but I’ve heard more than one respected colleague opine that publishing in Medium invalidates everything we independent content producers care about and represent; that it destroys all our good works with but one stroke of the Enter button.

I’ve even had that thought myself.

But isn’t the arrival of a new-model web publication like Medium proof that the web is alive and healthy, and spawning new forms of creativity and success?

And when the publisher of a personal site writes for Medium, is she really giving up on her own site? Couldn’t she be simply hoping to reach new readers?

(If she succeeds, some of those new readers might even visit her site, occasionally.)



Thanks to Bastian Allgeier for inspiring this post.

This piece was also published on Medium.

This article has been translated into Chinese.