Our static tools and linear workflows aren’t the right fit for the flexible, diverse reality of today’s Web. Making prototyping a central element of your workflows will radically change how you approach problem solution and save you a lot of headaches – and money. But most importantly, you will be creating the right products and features in a way that resonates with the true nature of the Web. A discourse on processes, flexibility, the Web as a material, and how we build things.Saving Your Web Workflows with Prototyping – Matthias Ott
Jeremy Wagner’s “Now THAT’S What I Call Service Worker!” provides innovative techniques to harness the power of Progressive Web Apps with smaller HTML payloads and better performance for repeat visitors.
Like 90s hip-hop, The Web We Lost™ retains a near-mystical hold on the hearts and minds of those who were lucky enough to be part of it. Luke Dorny’s recent, lovingly hand-carved redesign of his personal site encompasses several generations of that pioneering creative web. As such, it will repay your curiosity.
Check Luke’s article page for textural, typographic, and interactive hat tips to great old sites from the likes of k10k, Cameron Moll, Jason Santa Maria, and more.
And don’t stop there; each section of the updated lukedorny.com offers its own little bonus delights. Like the floating titles (on first load) and touchable, complex thumbnail highlights on the “observer” (AKA home) page.
And by home page, I don’t mean the home page that loads when you first hit the site: that’s a narrow, fixed-width design that’s both a tribute and a goof.
No, I mean the home page that replaces that narrow initial home page once the cookies kick in. Want to see the initial, fixed-width home page again? I’m not sure that you can. Weird detail. Cool detail. Who thinks of such things? Some of us used to.
And don’t miss the subtle thrills of the silken pull threads (complete with shadows) and winking logo pull tab in the site’s footer. I could play with that all day.
Now, no site exactly needs those loving details. But danged if they don’t encourage you to spend time on the site and actually peruse its content.
There was a time when we thought about things like that. We knew people had a big choice in which websites they chose to visit. (Because people did have a big choice back in them days before social media consolidation.) And we worked to be worthy of their time and attention.
Days of future past
We can still strive to be worthy by sweating details and staying alive to the creative possibilities of the page. Not on every project, of course. But certainly on our personal sites. And we don’t have to limit our creative love and attention only to our personal sites. We pushed ourselves, back then; we can do it again.
In our products, we can remember to add delight as we subtract friction.
And just as an unexpected bouquet can brighten the day for someone we love, in the sites we design for partners, we can be on the lookout for opportunities to pleasantly surprise with unexpected, little, loving details.
Crafted with care doesn’t have to mean bespoke. But it’s remarkable what can happen when, in the early planning stage of a new project, we act as if we’re going to have to create each page from scratch.
In calling Luke Dorny’s site to your attention, I must disclaim a few things:
- I haven’t run accessibility tests on lukedorny.com or even tried to navigate it with images off, or via the keyboard.
- Using pixel fonts for body copy, headlines, labels, and so on—while entirely appropriate to the period Luke’s celebrating and conceptually necessary for the design to work as it should—isn’t the most readable choice and may cause difficulty for some readers.
- I haven’t tested the site in every browser and on every known device. I haven’t checked its optimization. For all I know, the site may pass such tests with flying colors, but I tend to think all this beauty comes at a price in terms of assets and bandwidth.
Nevertheless, I do commend this fine website to your loving attention. Maybe spend time on it instead of Twitter next time you take a break?
I’ll be back soon with more examples of sites trying harder.
Posted here for posterity:
Design kickoff meetings are like first dates that prepare you for an exciting relationship with a person who doesn’t exist.
I’m one of the lucky ones. I have a great doctor and good health insurance.
A boring generic healthcare company bought my longterm doctor’s group practice a few months ago. First thing they did was screw up the online patient portal, changing it from the poorly designed, barely usable mess I’d learned to navigate to a slightly more polished but somehow blander portal that instantly got hacked. In consequence, they seem to have hired an Internet security firm that advised them to make changes they apparently didn’t understand how to execute. Thus, sign-in was broken for two months. Doctors kept sending patient results to the site, but patients couldn’t access them, and nobody told the doctors. You’d try to explain the problem to a phone receptionist, but if it ever got to the doctor, it was likely phrased as “Another one complaining about the website.”
The site’s makers apparently weren’t informed of the problem for some time, and there was no way to find out who they were to contact them, since there was no contact information available until you signed in, which no one could. Healthcare in America, 2019.
Anyway, they seem to have fixed a couple of the nonfunctioning loops that would prompt you to create a new password and then not recognize that you had done so and prompt you to create a new password and then not recognize that you had done so and prompt you to create a new password and then not recognize that you had done so and…
So today I was able to create a password, almost get 2FA to work, and reorder medication I’d been doing without. Yay!
Designing usable websites is an undervalued art.
Recently, Josh Clark, Gerry McGovern and I have been questioning our industry’s pursuit of “engagement.” Engagement is what all our clients want all the time. It’s the ? 1 goal cited in kickoff meetings, the data point that determines if a project succeeded or sucked wind. When our clients muse over their Analytics, they’re almost always eyeing engagement, charting its tiny variances with the jittery, obsessive focus of overanxious parents taking a sick child’s temperature.
Engagement is our cri de coeur. Our products, websites, and applications live and die by it. But should they?
For many of our products, websites, and applications, duration of page visit, number of our pages clicked through, and similar signs of engagement as it is traditionally understood may actually be marks of failure. If a customer spends 30 minutes on her insurance company’s site, was she engaged … or frustrated by bad information architecture?
For these products, websites, and applications, we need a new metric, a new and different ? 1 goal. Think of it as speed of usefulness; and call it content performance quotient—or CPQ if acronyms make you feel all business-y and tingly inside.
The content performance quotient is an index of how quickly you get the right answer to the individual customer, allowing her to act on it or depart and get on with her day. It is a measurement of your value to the customer. For many apps, sites, and products, the content performance quotient offers a new goal to iterate against, a new way to deliver value, and a new way to evaluate success.
For many sites, engagement is still a valid goal
To be fair as well as explicit, spending extra seconds on a web page, and browsing from one page to another and another, remains a desirable thing on deep content sites like A List Apart and The Washington Post?—?sites that encourage slow, thoughtful reading.
A List Apart isn’t a place to grab code and get back to your web development project; it’s a place to ponder new and better ways of designing, developing, and strategizing web content. And pondering means slowly digesting what you have read. The Washington Post isn’t a purveyor of ten-second talking points and memorable but shallow headlines—it’s a place for detailed news and news analysis. That kind of reading takes time, so it makes sense if the owners and managers of those publications peruse their Analytics seeking signs of engagement. For everyone else, there’s the CPQ. Or will be, once someone reading this figures out how to measure it.
There’s also a new design paradigm that goes hand-in-hand with this new goal: shrinking your architecture and relentlessly slashing your content. It’s an approach we’ve begun practicing in my design studio.
But first things first. What exactly is the CPQ?
The content performance quotient (CPQ) is the time it takes your customer to get the information she sought, and here, less is more—or better. From the organization’s point of view, CPQ can be the time it takes to for a specific customer to find, receive, and absorb your most important content.
Come to where the messaging is
Consider the Marlboro Man (kids, check the Wikipedia entry), a silent visual spokesman for Marlboro cigarettes, created by the Leo Burnett agency for an era when Americans expressed their optimism by driving two-ton be-finned convertibles along the new highways that bypassed the old cities and the old urban way of life.
It was a time when Americans looked back on their historical westward expansion un-ironically and without shame. Cowboys were heroes on TV. Cowboys were freedom, the car and the highway were freedom, smoking the right cigarette was freedom.
On TV back then, when commercials had a full 60 seconds to convey their messaging, and nearly all were heavy on dialog and narration, Marlboro TV commercials were practically wordless. They showed a cowboy riding a horse. You saw him in closeup. You saw him in long shot. There were slow dissolves. There was music. There were no words at all, until the very end, when a suitably gravel-voiced announcer advised you to “Come to where the flavor is. Come to Marlboro Country.”
But it was in billboards along the highway and at urban entrance points where the campaign really lived. There was a beautiful shot of the cowboy doing cowboy stuff in the distance. There were four words: “Come to Marlboro Country.” One of them barely counts as a word, and you didn’t have to read any of them to get the message.
The billboards had one or two seconds to tell you everything, and they worked. At a glance, and from repeated glances over time, you knew that Marlboro was the filtered tobacco cigarette of the independent man who loved liberty. It was not the smoke of the neurotic urban dwelling subway rider (even if, in reality, that was the customer). Marlboro was for the libertarian in chaps. For the macho individualist with no crushing mortgage to pay off, no wife and kids to infringe on his horse-loving freedom. You got it all, without even knowing you got it. That’s performance.
Targeting convertibles on the information superhighway
In hindsight, it sounds ridiculous, but the super-fast storytelling worked: when I was growing up, Marlboro was what every child in my middle school smoked.
Remove the cancer and the other ethical problems from this story and hold fast to the idea of conveying information as close to instantaneously as possible. The geniuses behind the Marlboro Man achieved it by reducing their messaging to only what was needed—only what could be conveyed to a person passing a billboard at 60 MPH.
Your customer is not speeding past your messaging in a 1954 convertible, but she is speeding past it, and if you don’t optimize, she will miss it. For her to get your message, you have to work as hard as those evil ad wizards did. You must focus relentlessly on messaging (as well as design and site performance—but we’ll get into all that soon enough). Just as Leo Burnett cut their TV messaging to ten words, and their billboard to four, you must be willing to think twice about every word, every page. Mobile First taught us to focus above all else on the content the customer actually seeks. A better CPQ is what you get when you do that—particularly when you combine it with good design and optimal technical performance.
Most business websites contain dozens of pages that were made to satisfy some long-ago stakeholder. They are pages that nobody visits. Pages that do nothing to help the customer or advance the business’s agenda. Putting all that junk online may have made for smooth meetings ten years ago, but it isn’t helping your business or your customer. Our sites, apps, and products must do both.
Content performance quotient: the secret sauce
Lately in my design practice I’ve been persuading clients to create sites that might superficially appear less effective if you’re going by engagement metrics alone, but which are actually far more successful because they are more instantly persuasive. At my urging, our clients have allowed us to relentlessly cut copy and chop sections nobody looks at, replacing them with a few pages that are there to do a job. We are lucky to have smart clients who are willing to jettison hundreds of hours worth of old work in favor of a streamlined experience that delivers value. Not every client has the courage to do so. But more will as this idea catches on.
(By the way, don’t look for these projects on our studio’s website just yet; they are still in development.)
Serving only the content the customers actually need; streamlining and testing and fine-tuning the interaction to get the right customer to the right content precisely when they want it; wrapping the experience in an engagingly readable but also quickly scannable user interface; and doing everything in our power to ensure that the underlying web experience is as performant as possible—this, I believe, is the secret to increasing CPQ.
CPQ: the story so far
The idea of delivering much less (but much better) first occurred to me while I was looking over a fellow designer’s shoulder. My friend Fred Gates of Fred Gates Design is working on a project for a client in the nonprofit education space. The client’s initial budget was not large, so, to be fair, they suggested Fred only update their homepage. But Fred being Fred, if he was only going to design a single page, he was determined to deliver tremendous value on it.
By focusing relentlessly on the objectives of the entire site, he was able to bring all the principal interactions and messages into a single performant homepage, essentially reducing a big site to a lean, fast, and more effective one.
Far from getting less, his client (and their customers) got much more than they expected.
Inspired by what my friend had achieved, I then proposed exactly the same approach to a client of ours. Not because their budget was a problem, but because streamlining was clearly the right approach … and a redesign is the perfect opportunity to rethink. When you repaint your living room, it gives you a chance to rethink your couch and divan. You’re most likely to consider changing your diet when you’ve begun a new exercise program. Clients are people, and people are most receptive to one form of change when they are already engaged in another.
Positioning CPQ as an aspect of technical performance is another way to overcome stakeholder skepticism. Lara Hogan has more on persuading peers and stakeholders to care about technical performance optimization.
We are a few weeks away from launching what we and the client are calling Phase I, a lean, performant, relentlessly message-focused web experience. But if we’ve done this right, we won’t have much to do in Phase II—because the “mini-site” we’re delivering in Phase I will do more for the company and its customers than a big site ever did.
I’ll be back with updates when we launch, and (more importantly) when we have data to share. Follow @DesignCPQ to stay on top of CPQ thinking.
NEW YEARS bring thoughts of old years, and, to a designer and veteran “blogger,” thoughts of old work. My personal site, begun in 1994, was many things: an interview zine (my first web client, Donald Buckley, named it: 15 Minutes), a newfangled GIF animation playground, a freeware icon factory, an Advertising Graveyard, and more. But eventually, before it was forgotten entirely, it became best known as a blog.
Inspired by Dori Smith’s recent Facebook post about old-school blogging and the possibility of a “20th Anniversary of Blogging” unconference/relaxacon, I thought it might be fun to poke through the old blog a bit with you, gentle reader. My blog began in 1995, but, for now, you can only page through the entries as far back as August, 1997, as I seem to have neglected to build “previous” page links before that, and may also have overwritten my earliest entries (not realizing, at the time, that you and I might ever want to look back at any of this).
Below, I begin the retrospective in 2004 and work backwards to 1997. (After 2004, I stopped hand-coding each entry and began using WordPress, resulting in this sort of thing. Also after 2004, I stopped redesigning the site every few months, partly, but not exclusively, because I got busier designing other people’s sites. I also stopped redesigning the site every few months because I had become more strategic about design—more interested in design as problem solving, less as making pretty pages. Say, remember when we designed “pages”? But I digress.)
Here, for your pleasure, are some pages from the past:
Silence and Noise?—?“Now that some of us have helped bring standards into the mainstream, wouldn’t it be best to keep them there?”?—?12 August 2004 (the iconic green design) http://www.zeldman.com/daily/0804b.shtml
Typical blog entries?—?on web performance and “the new Samaritans” (designers who recode other people’s sites to be standards-compliant)?—?28 July 2004 (the iconic green design) http://www.zeldman.com/daily/0704e.shtml
CSS Validator is Broken?—?5 February 2004 (the creme design) http://www.zeldman.com/daily/0204b.shtml
Don’t Design on Spec?—?26 January 2004 (the creme design) http://www.zeldman.com/daily/0104h.shtml
Chip Kidd & Alfred Hitchcock?—?20 January 2004 (the creme design) http://www.zeldman.com/daily/0104f.shtml
Tears for Istanbul?—?26 November 2003 (rooster design) http://www.zeldman.com/daily/1103a.shtml
Ladies and gentlemen, A List Apart 3.0–22 October 2003 (rooster design) http://www.zeldman.com/daily/1003a.shtml
“Jeffrey Zeldman is good enough for me.” 2 November 2002 (teal swap design) http://www.zeldman.com/daily/1002d.shtml
Typical blog entries?—?16 October2002 (the iconic red design) http://www.zeldman.com/daily/1002a.html
Typical blog entries?—?super secret Charlotte Gray style guide (now offline)?—?26 August 2002 (HTML fist, red design) http://www.zeldman.com/daily/0802c.html
Typical blog entries?—?in the middle of writing Designing With Web Standards, then titled Forward Compatibility?—?30 July 2002 (the iconic red design) http://www.zeldman.com/daily/0802a.html
“The heartbreak of sizing small text with ems”?—?21 May 2002 http://www.zeldman.com/daily/0502c.html
Typical blog entries, 25 January 2002 (the iconic red design?—?liquid variant) http://www.zeldman.com/daily/0102d.html
Daily Report 31 August 1999, liquid orange design (unfinished) http://www.zeldman.com/com0899.html
Daily Report 14 October 1998, liquid orange design (unfinished) with Web Standards Project banner ad at the top of the page http://www.zeldman.com/com1098.html
“Previous Reports” 31 August 1997, ugly yellow bacon strip style, http://www.zeldman.com/came2.html
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.
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?
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.
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!
- To Save Real News
- The Year in Design
- Digital Newspaper Design Challenge: A Report from Poynter – Part 1
- Ad Blocking and the Future of the Web
- In Defense of Font Size Widgets
- Publishing Versus Performance: Our Struggle for the Soul of the Web
- The Nation, America’s oldest weekly news magazine, launches responsive, large-type redesign
- “Design doesn’t matter”
- Understanding Web Design
- A List Apart 4.0
CAN design create a better user experience that engages readers and drives revenue? Can it fight fake news and help save real journalism at a time when news organizations large and small are underfinanced and under attack?
These questions drove the Poynter Design Challenge, “a project to create new visual models for digital news publications” sponsored by William R. Hearst III, hosted by the Poynter Institute, and directed by publication designer Roger Black.
The challenge began October 17–18 in New York, with five pundits and five designers, of whom I was honored to be one, workshopping a project brief during a two-day conference event at the Columbia Journalism School. (You can watch videos of all these sessions courtesy of Fora.tv.)
The next phase took place yesterday in St. Petersburg, Florida, as the four other designers and I presented our work to a live audience. In this short piece, I’ll talk about the designs my colleagues presented; in the next, I’ll discuss my own.
Reconnecting with the people: the challenge for digital news
Roger Black described the difficulties facing digital news publications:
The challenge is serious. Fake news crowds real news. Numbers no longer add up for publishers. Readers jump from site to site without knowing where they are, or staying for long. You can see the brief for this project here.
Can design help? Well, as a I designer, I think it can. I mean, the design of most news pages is not what you’d call attractive. But the solutions proposed at Poynter will be much more strategic than cosmetic. And they’re strategies that can be combined.
—Five design answers that add up, Roger Black, January 20, 2017
“A news publication might think a bit more like Fitbit”
Between us, we designers had about a century of experience designing digital publications—internally, as consultants, or both. This means that, even though an open “design challenge” brief necessarily omits an unknown number of the specific requirements any actual publication design assignment would include, all of us were aware of, and to some degree addressed, typical news publication requirements not included in our brief.
Kat Downs Mulder, Graphics Director at The Washington Post, shared a prototype for a big-brand news site. Kat had just given birth to a healthy baby boy (congratulations!), so her work was presented by two of her colleagues from The Post. Kat did not design with the avid, committed news reader in mind (since those folks are not the problem for most publications). Instead, she pondered how to engage the typically fragmented attention of today’s distracted and passive news reader:
“A big-brand news site [should be] aware that people have a lot more to do in their lives than read the news,” Kat posited. Thus, “A news publication might think a bit more like Fitbit. That is, it should make you feel like it’s working for you. A reader should say, ‘I’m reading everything I need to know.’”
Keep that dopamine pumping
Kat presented a multi-paned prototype. The wider pane on the right contained news content; the narrower pane at left was navigation. As I’ve just described it, this isn’t much different from the current Post website, but Kat’s prototype was very different, because it prized reader control over editorial director control; kept track of what you read; encouraged extra reading the way Fitbit encourages extra steps, and rewarded it the same way Fitbit does, with an accumulation of points that give the reader dopamine hits and create the perception that the “news app” is working for her—as a rewarding part of her busy lifestyle.
An Operating System for your city
Mike Swartz, Partner at Upstatement, a design and engineering studio in Boston, took on the challenge to smaller publications (such as his original hometown paper, the Pittsburgh Post-Gazette) which lack the resources of a Washington Post or New York Times.
Mike’s presentation, “information OS for a city: redefining the opportunity for local media,” turned the journalistic prowess of a good local paper into a superpower, connecting readers to their city the way the “terrible towel” stunt concocted in desperation by radio announcer Myron Cope in 1975 reconnected Pittsburghers to their hometown football team, and helped the Steelers win Super Bowl X over the Dallas Cowboys.
There’s a potential for an operation like the [Post Gazette] to rebrand itself as more of an “informational operating system” for its city. With different types of products that are focused and useful and not necessarily bundled into a traditional news format, we can create more enjoyable experiences and more useful products readers will love.
Building reader interest and finding a way to pay for it all
Where the rest of us avoided the elephant in the room, in her design Lucie Lacava, president of Lacava Design Inc., boldly confronted the challenges of advertising and monetization. Algorithm-driven advertising frustrates users, who, in desperation, block it. Choked for income as a result, publications and advertisers create more and more intrusive forms of unwanted advertising. Nobody wins.
And while subscription models have worked, at least partly, for some of the very top news publications, such models are not likely to help most news publications in the near term.
Digital publication as digital application
Lucie’s design addressed these challenges by recasting the news as a hyper-customized application targeted at younger users, who get to choose news streams and ads that are relevant to them. “The elusive millennial” was Lucie’s target. I cannot do her idea justice with a couple of paragraphs and a single screen shot.
Affordable, immersive VR is here
Jared Cocken, brand and product designer for hire and co-founder of STYLSH.co., approached the “attention war” by showing how any size publication could create “video or VR driven stories that enrich a user’s understanding of the world around them.”
Because VR video is immersive, it holds viewer attention. Because it is reality-based, it fights fake news. (It’s hard to call bullshit on a scene you can explore from any angle.) VR also, potentially, builds compassion. It’s one thing to read about conditions in a Syrian refugee camp, another to visually experience them in VR.
Until now VR and video have been cost-prohibitive, but, working (and co-presenting) with VR startup founder Anna Rose and Hollywood producer/actor Banks Boutté, Jared showed how even woefully under-financed newsrooms can use newly designed, super-affordable tools to create “video or VR-driven stories that enrich a user’s understanding of the world around them.”
Parting thought for now
Blogging about a conference is like tweeting about a sexual experience. You had to be there. I wanted to record and share the outlines of what my fellow designers presented, but these few paragraphs should in no way be considered authentically representative of the deep thinking and work that went into every presentation.
You may see holes in some of the arguments presented here. In some cases, I might agree with you—some ideas, while dazzlingly creative, did not seem to me like the right way to save news. But in most cases, if an idea seems wrong, blame my telling. If you had been there and heard and seen everything, the value of the proposal would have far more apparent than it can be here.
I love that each of us took on a quite different aspect of the problem, and addressed it using very different tools. I’ll be back soon with a short write-up of the design approach I took. Meanwhile, I want to thank all the pundits, designers, and attendees in New York and St. Petersburg—and the Poynter Institute, Roger Black, and William R. Hearst III for making it all possible.
IN a world where newspapers are dying and half the public believes fake news, what online news experiences need is design that is branded, authoritative, and above all, readable:
Branded, because we need to convert the current hummingbird model (where readers flit from flower to flower) back to the idea that your news source matters—and that it is worth your time to return to a source you trust.
Brand helps the social-media-driven seeker notice that they’re returning time and again to a certain resource, facilitating a mental model shift back toward destination web browsing. When every site looks the same, it’s easy to see all content as equal—all spun from the same amorphous mass. A strong brand, which is individual to the given newspaper, can cut through that amorphousness, which is the first step in building (or rebuilding) loyalty.
Authoritative, because combating fake news means visually cueing the reliability of a particular source—one staffed by real journalists and editors, with real sources in real countries. In the coming years this will be more important than ever.
Readable, because an informed public needs to grasp stories that can’t always be reduced to headlines or sound bytes. Readability means even longer articles actually get read, sometimes even all the way through. Readability requires a combination of typeface, type size, leading, measure, hierarchy, contrast, etc.—as well as the introduction of visual information, both to break up the flow of text, and to further illuminate what is being said.
Related news keeps readers reading
Additionally, this branded, authoritative, readable content needs to become (to use an ancient word) sticky: through a combination of editing and algorithms, related content must be presented at the appropriate time in the reading experience, to engage the visitor in continued reading.
Currently two publications—nytimes.com and medium.com—achieve all these goals better than any other publications on the web. One is the newspaper of record; the other is a vehicle for anyone’s content. Yet both really do the job all newspapers will need to do to survive—and to help the Republic survive these next years. I particularly admire the way both publications surface related content in a way that practically demands additional reading.
Design won’t solve all the problems facing newspapers, but it will help. And unlike more “immersive” approaches such as WebVR, original full-screen imagery, and original embedded video, the basics of solid, readable design should not be out of budgetary reach for even the most cash-strapped news publisher—budget being a problem for any business at any time, but especially for newspapers now.
In my studio, we’ve been pondering these problems for content sites of all types (not only newspapers). At the Poynter Digital Design Challenge next month, I hope to share designs that nudge the conversation along just a bit further.
We have fun. We go way over time. We kept talking after the show stopped. There was just so much to discuss—including Pattern Lab and style guides, being there for the iPad launch, working with big brands, how to say no and make the client happy you said it, avoiding antipatterns, mobile versus “the real web” (or the way we saw things in 2009), dressing for success, contributing to open source projects, building a community, the early days of Brad’s career, and that new book of his.
Sponsored by Braintree and Incapsula.
Brad Frost URLS
AT FIRST GLANCE, November 2016 has bigger fish to fry than a small, cult holiday celebrated by web developers and designers.
Each day since November 8, 2016 has brought new, and, to some of us, unimaginable challenges to the surface. Half of America is angry and terrified. The other half is angry and celebrating. At a time like now, of what possible use is an annual holiday celebrated mainly on social media by a tiny posse of standards- and accessibility-oriented web developers and designers?
From Blue Beanies to Black Hats
Many web developers have “moved on” from a progressive-enhancement-focused practice that designs web content and web experiences in such a way as to ensure that they are available to all people, regardless of personal ability or the browser or device they use.
Indeed, with more and more new developers entering the profession each day, it’s safe to say that many have never even heard of progressive enhancement and accessible, standards-based design.
The trouble with this top-down approach is threefold:
Firstly, many new developers will build powerful portfolios by mastering tools whose functioning and implications they may not fully understand. Their work may be inaccessible to people and devices, and they may not know it—or know how to go under the hood and fix it. (It may also be slow and bloated, and they may not know how to fix that either.) The impressive portfolios of these builders of inaccessible sites will get them hired and promoted to positions of power, where they train other developers to use frameworks to build impressive but inaccessible sites.
Only developers who understand and value accessibility, and can write their own code, will bother learning the equally exciting, equally edgy, equally new standards (like CSS Grid Layout) that enable us to design lean, accessible, forward-compatible, future-friendly web experiences. Fewer and fewer will do so.
Thirdly, and as a result of the first and second points, more and more web experiences every day are being created that are simply not accessible to people with disabilities (or with the “wrong” phone or browser or device), and this will increase as standards-focused professionals retire or are phased out of the work force, superseded by frameworkistas.
#a11y is Code for “Love Your Neighbor”
This third point is important because people with disabilities are already under attack, by example of the U.S. president-elect, and as part of of a recent rise in hate crimes perpetrated by a small but vocal fringe. This fringe group of haters has always been with us, but now they are out of the shadows. They are organized and motivated, and to an unmeasured degree, they helped Donald Trump win the White House. Now that he’s there, people of good will ardently hope that he will condemn the worst bigots among his supporters, and fulfill his executive duties on behalf of all the people. I’m not saying I expect him to do this today. I’m saying I hope he does—and meantime it behooves us to find ways to do more than just hope. Ways to make change.
One small thing designers and developers can do is to make accessibility and usability Job 1 on every project. And to take a broad view of what that means. It means taking people’s messy humanity into account and designing for extreme ends of the bell curve, not just following accessibility authoring guidelines. (But it also means following them.)
In doing those things, we can love our neighbors through action. That—and not simply making sure your HTML validates—is what designing with web standards was always about.
On November 30, I will put on my blue hat and renew my commitment to that cause. Please join me.
MESMERIZED as we have been by the spectacle of the flaming garbage scow of U.S. election news, it would have been easy to miss this other narrative. But in the past few days, just as Google, AT&T, and Time-Warner were poised to turn the phrase “online privacy” into a George Carlin punchline, in marched an unlikely hero to stop them: the American Federal Government. Who have just…
approved broad new privacy rules on Thursday that prevent companies like AT&T and Comcast from collecting and giving out digital information about individuals — such as the websites they visited and the apps they used — in a move that creates landmark protections for internet users.
— Broadband Providers Will Need Permission to Collect Private Data, by Cecilia Kang, The New York Times, Oct. 27, 2016
Given the increasingly deep bonds between corporate overlords and elected officials, this strong assertion of citizens’ right to privacy comes as something of a surprise. It’s especially startling given the way things had been going.
On Friday, Oct. 21, shortly before a massive DDOS attack took out most U.S. websites (but that’s another story), ProPublica reported that Google had quietly demolished its longstanding wall between anonymous online ad tracking and user’s names. I quote ProPublica’s reporting at length because the details matter:
When Google bought the advertising network DoubleClick in 2007, Google founder Sergey Brin said that privacy would be the company’s “number one priority when we contemplate new kinds of advertising products.”
And, for nearly a decade, Google did in fact keep DoubleClick’s massive database of web-browsing records separate by default from the names and other personally identifiable information Google has collected from Gmail and its other login accounts.
The change is enabled by default for new Google accounts. Existing users were prompted to opt-in to the change this summer.
The practical result of the change is that the DoubleClick ads that follow people around on the web may now be customized to them based on your name and other information Google knows about you. It also means that Google could now, if it wished to, build a complete portrait of a user by name, based on everything they write in email, every website they visit and the searches they conduct.
The move is a sea change for Google and a further blow to the online ad industry’s longstanding contention that web tracking is mostly anonymous.
—Google Has Quietly Dropped Ban on Personally Identifiable Web Tracking, by Julia Angwin, ProPublica, Oct. 21, 2016
Et tu, Google
Google has long portrayed itself as one of the good guys, and in many ways it continues to be that. I can’t think of any other insanely powerful mega-corporation that works so hard to advocate web accessibility and performance—although one of its recipes for improved web performance, making up a whole new proprietary markup language and then using its search engine dominance to favor sites that use that language and, of necessity, host their content on Google servers over sites that use standard HTML and host their own content, is hardly a white hat move. But that, too, is another story.
On privacy, certainly, Google had shown ethics and restraint. Which is why their apparent decision to say, “f–– it, everyone else is doing it, let’s stop anonymizing the data we share” came as such an unpleasant shock. And that sense of shock does not even take into account how many hundreds of millions of humans were slated to lose their privacy thanks to Google’s decision. Or just how momentous this change of heart is, given Google’s control and knowledge of our searches, our browsing history, and the contents and correspondents of our email.
Scant days after ProPublica broke the Google story, as a highlight of the proposed merger of AT&T and Time-Warner, came the delightful scenario of TV commercials customized just for you, based on combined knowledge of your web using and TV viewing habits. And while some humans might see it as creepy or even dangerous that the TV they’re watching with their family knows what they were up to on the internet last night, from an advertiser’s point of view the idea made $en$e:
Advertisers want … to combine the data intensity of internet advertising with the clear value and ability to change peoples’ perceptions that you get with a television ad. If you believe in a future where the very, very fine targeting of households or individuals with specific messaging makes economic sense to do at scale, what this merger does is enable that by making more audience available to target in that way.
—Individualized Ads on TV Could Be One Result of AT&T-Time Warner Merger by Sapna Maheshwari, The New York Times, Oct. 26
An unlikely privacy advocate
Into this impending privacy hellscape marched the U.S. Government:
Federal officials approved broad new privacy rules on Thursday that prevent companies like AT&T and Comcast from collecting and giving out digital information about individuals — such as the websites they visited and the apps they used — in a move that creates landmark protections for internet users. …
The new rules require broadband providers to obtain permission from subscribers to gather and give out data on their web browsing, app use, location and financial information. Currently, broadband providers can track users unless those individuals tell them to stop.
The passage of the rules deal a blow to telecommunications and cable companies like AT&T and Comcast, which rely on such user data to serve sophisticated targeted advertising. The fallout may affect AT&T’s $85.4 billion bid for Time Warner, which was announced last week, because one of the stated ambitions of the blockbuster deal was to combine resources to move more forcefully into targeted advertising.
—Broadband Providers Will Need Permission to Collect Private Data, by Cecilia Kang, The New York Times, Oct. 27
What happens next
The consequences of these new rules—exactly how advertising will change and networks will comply, the effect on these businesses and those that depend on them (i.e. newspapers), how Google in particular will be effected, who will cheat, who will counter-sue the government, and so on—remain to be seen. But, for the moment, we’re about to have a bit more online privacy and anonymity, not less. At least, more online privacy from advertisers. The government, one assumes, will continue to monitor every little thing we do online.
2006 DOESN’T seem forever ago until I remember that we were tracking IE7 bugs, worrying about the RSS feed validator, and viewing Drupal as an accessibility-and-web-standards-positive platform, at the time. Pundits were claiming bad design was good for the web (just as some still do). Joe Clark was critiquing WCAG 2. “An Inconvenient Truth” was playing in theaters, and many folks were surprised to learn that climate change was a thing.
I was writing the second edition of Designing With Web Standards. My daughter, who is about to turn twelve, was about to turn two. My dad suffered a heart attack. (Relax! Ten years later, he is still around and healthy.) A List Apart had just added a job board. “The revolution will be salaried,” we trumpeted.
Preparing for An Event Apart Atlanta, An Event Apart NYC, and An Event Apart Chicago (sponsored by Jewelboxing! RIP) consumed much of my time and energy. Attendees told us these were good shows, and they were, but you would not recognize them as AEA events today—they were much more homespun. “Hey, kids, let’s put on a show!” we used to joke. “My mom will sew the costumes and my dad will build the sets.” (It’s a quotation from a 1940s Andy Hardy movie, not a reflection of our personal views about gender roles.)
Jim Coudal, Jason Fried and I had just launched The Deck, an experiment in unobtrusive, discreet web advertising. Over the next ten years, the ad industry pointedly ignored our experiment, in favor of user tracking, popups, and other anti-patterns. Not entirely coincidentally, my studio had just redesigned the website of Advertising Age, the leading journal of the advertising profession.
Other sites we designed that year included Dictionary.com and Gnu Foods. We also worked on Ma.gnolia, a social bookmarking tool with well-thought-out features like Saved Copies (so you never lost a web page, even if it moved or went offline), Bookmark Ratings, Bookmark Privacy, and Groups. We designed the product for our client and developed many of its features. Rest in peace.
I was reading Adam Greenfield’s Everyware: The Dawning Age of Ubiquitous Computing, a delightfully written text that anticipated and suggested design rules and thinking for our present Internet of Things. It’s a fine book, and one I helped Adam bring to a good publisher. (Clearly, I was itching to break into publishing myself, which I would do with two partners a year or two afterwards.)
In short, it was a year like any other on this wonderful web of ours—full of sound and fury, true, but also rife with innovation and delight.
As part of An Event Apart’s A Decade Apart celebration—commemorating our first ten years as a design and development conference—we asked people we know and love what they were doing professionally ten years ago, in 2006. If you missed parts one, two, three, or four, have a look back.
NOT UNLIKE what Mattel has done with Barbie, the typographic geniuses at The Font Bureau are working on a humanist geometric sans-serif that could almost be thought of as Helvetica with curves.
Forma is the name of the as-yet unreleased font family, and you can get a peek at one weight of it in the above image, which is taken from my slide deck for “Designing With Web Standards in 2016,” which is the presentation I’ll premiere next month at An Event Apart Nashville.
This new presentation examines the seemingly ever-deepening complexity of designing for our medium today—a complexity that has driven some longtime web designers I know to declare that web design has become “too hard,” or that “the fun has gone out of it”—and asks what our traditions of designing with web standards can teach us about crafting web experiences for a multi-device, mobile-first world.
Given that my original (unpublished) title for Designing With Web Standards was going to be Forward Compatibility—and given that Forward Compatibility is not so different in concept from today’s phrase, Future-Friendly—I’m guessing that structured, semantically marked-up content, progressive enhancement, and the separation of style from structure and behavior still have a huge role to play in today’s day-to-day web design work.
Oh, dear, I hope that wasn’t a spoiler.
I look forward to sharing these ideas with you in greater detail at An Event Apart. Now celebrating our tenth year of bringing great ideas to our community, and creating a space where the smartest folks in web design and development can meet, mingle, bond, network, and learn together. Follow @aneventapart for show announcements, links to useful web resources, and free giveaways on the 10th of every month in 2016. (This month’s giveaway, ten beautiful fleece comforters monogrammed with the A Decade Apart logo, went to ten lucky winners on February 10th. Keep watching the skies.)