Zeldman on Web & Interaction Design

Web design news and insights since 1995

FaviconWe need design that is faster and design that is slower. 24 Feb 2018, 2:05 pm

During a recent conversation with  David Sleight, Design Director at ProPublica, I found myself realizing and saying “we need design that is faster and design that is slower.”

Who are we and what is this thing called design?

When I say  “we,” I mean our whole industry, when I say “our whole industry,” I mean design, and when I say “design,” I mean: web design and development; digital product design; digital user experience design; digital user interface design; digital interaction design; “mobile” design (which is the same thing as web design and development); graphic design as part of UX, UI, interactive, digital, and web design; publishing and editorial design; and other  design practices specifically empowered by the internet and digital technology and built largely around reading and interacting with words on screens.


A mouthful, isn’t it? Some people mean all the above when they say “UX.” I generally mean all the above when I say “design” and call myself a designer.

I exclude from the category, for this specific discussion, tactile, conversational, and passive design powered by the internet of things. Not because those practices are uninteresting or unimportant—on the contrary, they are fascinating, exciting, and fraught with critical ethical questions—but because they are not specifically screen- and reading-driven. And it’s our screen- and reading-driven design that needs a reset.

Our whole industry, as I’ve just defined it, needs design that is faster for people who are trying to get things done, for they are our customers and should not be burdened by our institutional surrenders. We need design that is slower for people who are trying to comprehend, for they are our only chance of saving the world.

This porridge is too fast

Our news and information sites have succeeded so well, they are failing. We’ve designed them to be quickly scannable—at a glance, I take in the headline, the key visual, and the lead paragraph. But today’s news is anything but simple. The truth cannot be reduced to visual sound bytes. That’s how we got in this mess in the first place.

As a society, we’ve replaced thinking with slogans, listening with wall-building. Our best news publications are doing a better and better job of reporting beyond headlines—getting down to the details that really matter. But we designers have so trained readers to scan and move on—Pacmans scarfing dopamine hits—that they no longer have the instinct to sit back and take their time with what they’re reading.

Our news designs must work to slow down the reader, engage her more deeply, encourage her to lean back and absorb. The good news is, we’ve long had the tools to do it: typography and whitespace.

Larger type — type that actually encourages the reader to sit back in her chair — plus radically uncluttered interfaces and (when budget permits and the story merits it) art direction are the way to do it. Derek Powazek’s late lamented {fray} (1996 — remnant here) and Lance Arthur’s Glassdog were the first sites to do real art direction on the web. Jason Santa Maria’s personal site was a later, brilliant exponent of art direction on the web. (See “Previous/Embarrassing Editions.”)

You can see these techniques working in the recent designs of The Washington Post (but not its homepage), The New York Times (but not its homepage), ProPublicaSlateSmashing Magazine, and Vox — with inspiration from predecessors including the Readability application, Medium, and A List Apart.

To a great extent, the ability of news publications to pursue slow design depends on their ability to finance themselves without overly relying on race-to-the-bottom advertising. Not all periodicals can free themselves of this dependency.

On the flip side of the news experience, which must be savored and digested slowly, comes the challenge of our corporate and organizational sites, which must become faster—not just technically, but (even more importantly) in terms of their content’s comprehensibility.

In the beginning, there was shovelware

As the once-vital blogosphere recedes from the equation, and as traditional periodical publications struggle to retain solvency and relevancy (and wrestle with readability), the web becomes the turf of stores like Amazon, powerful networks like Facebook, and traditional corporate brochureware. It’s this brochureware that most needs fixing—most needs to be designed to be faster.

In the 1990s, disgruntled computer buyers coined the word “shovelware” to refer to the second-rate games, fonts, and software that came pre-bundled with many PCs. It wasn’t stuff you had to have, carefully curated by software wizards who cared for you—it was garbage presented as value. Early web designers, including your present author, soon used “shovelware” to refer to the reams of corporate copy that got thoughtlessly dumped into the first corporate sites. The corporate overlords thought of the stuff as content. The readers didn’t think of it at all.

Getting easier to publish and harder to communicate

So we spent years preaching that the web was not print, finding ways to design words on screens so they could be scanned and used. We learned to inventory our old content and develop the will and the sales ability to toss the dross. Only content stringently designed to satisfy both customer and business needs would be permitted onto our excellent corporate websites. At least, that was how we did it when it came time for a major redesign (and only when astute stakeholders permitted it).

But most of the time, and constantly between redesigns, junk still got shoveled into our websites. We even made it easier for the shovelers. We developed CMS systems and gave everyone in the organization the power to use them. It was easier for us to let people publish the stuff their little group cared about than to stop and ask what mattered to the customer. And it was also easier for the organization, as it enabled warring fiefdoms to avoid difficult meetings.

It was easier. But not better.

And the CMS systems multiplied, and the web-savvy middle managers were fruitful, and the corporate site was filled with documents nobody but those who posted them ever read. And the corporate site sucked. It sucked harder than it had even in the earliest shovelware days of the 1990s. It sucked deeper and wider and more frequently and with better algorithms. For all our talk of user journeys and mental models, most corporate sites are mostly pretty garbage.

Shhh! Don’t tell the client. They still owe us a payment.

Beyond pretty garbage

Gerry McGovern’s “Top Tasks” method showed how to prioritize the information the customer seeks over the darlings of Management. Ethan Marcotte’s responsive web design and Luke Wroblewski’s mobile-first strategies pointed the way to restoring the focus on what’s most essential. There’s no room for pretty garbage on the small screen. Now, before it’s too late, we must fulfill the promise those visionaries and others have shared with us. If we want to save our brochure sites, we must make them not just faster, but relevant faster.

Designing with the content performance quotient (CPQ) in mind is how we will take the next step. We’ll ruthlessly prune the inessential, cut our sitemaps down to size, slash our bloated pathways, removing page after unloved page, until there’s nothing left but near-neural pathways from the user to the information she seeks.

In short, we will sculpt the design, presentation, and amount of content in our brochure sites with the same scalpel we take to the shopping carts in our e-commerce sites.

Evaluating speed or relevancy for your site’s content

How can we tell which sites should be faster, and which should be slower? It’s easy. If the content is delivered for the good of the general public, the presentation must facilitate slow, careful reading. If it’s designed to promote our business or help a customer get an answer to her question, it must be designed for speed of relevancy.

I’ll continue to explore both these themes in future articles here. My thanks to ProPublica’s David Sleight for the remarkable conversation that helped give birth to this piece. David is a web designer, creative director, and leader at the intersection of publishing and digital technology. ProPublica is an independent, nonprofit newsroom that produces “investigative journalism with moral force.” To hear the complete conversation, don your headphones and listen to Episode № 171: Art Directing the News — with ProPublica Design Director David Sleight on The Big Web Show.

Read more

Beyond Engagement: the Content Performance Quotient

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

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

To Save Real News

Redesigning in Public Again

The Year in Design

 

Also published at medium.

studio.zeldman is open for business. Follow me @zeldman.

The post We need design that is faster and design that is slower. appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconBeyond Engagement: the content performance quotient 19 Feb 2018, 10:30 am

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

Designer Fred Gates, kicking it in Central Park, NYC.

 

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.

 

Also published at Medium.

studio.zeldman is open for business. Follow me @zeldman.

The post Beyond Engagement: the content performance quotient appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconA beginning consultant brings skills, an experienced consultant brings value. 7 Feb 2018, 10:04 am

A beginning consultant brings skills, an experienced consultant brings value.

Early in a good career, you establish that you write the best code on your team, have the deftest touch in UI design, produce more good work more quickly than others.

You’re the person who resolves disputes about which typeface was used on an old poster. Or who knows more frameworks, has used more tools. Or who can fix the server when everyone else around you is panicking. Or all the above.

God is in the details. You sweat them.

You are incredibly skilled and you work to stay that way. You read design books and blog posts when your friends are out drinking or home watching TV. You keep a list of things to fix on your company’s website, and you make the changes whether anyone instructs you to or not.

Often, you make a site more accessible, or more performant, or easier to understand not only without being asked, but without being thanked or acknowledged. You do good in secret. You quietly make things better. You inspire good colleagues to learn more and work harder. Lazy or less talented colleagues secretly hate you. You’re the tops. You got mad skillz.

But the organization doesn’t treat you like the incredibly motivated, supremely talented, highly intelligent, deeply passionate professional you are.

The organization rewards something different. The organization looks for leadership, not among the most skilled, but among the most strategic.

The tragedy of great designers and developers

The tragedy of great designers and developers is when they get promoted to positions of leadership where they can no longer design or develop. And the other tragedy is when they don’t.

You can stay an ace coder, a design whiz, a brilliant copywriter well into your 40s and remain a valuable, employable team member. You will not go hungry. You will not be without work.

(By your 50s, finding jobs becomes tougher no matter how brilliant and experienced you may be, due to capitalism’s preference for hiring younger people and paying them less, but the multidimensional, interlocking problems of agism and economic injustice exceed the scope of this little commentary. Typically the solution to prematurely aging out of the market, even though you have much to contribute, is to go off on your own—hence the plethora of consultants in their late 40s. But here again, merely having skills will not be enough.)

To survive as an independent consultant at any age, and to remain meaningfully employable in digital design, you must bring something different to the table. You must bring value.

You must be able to demonstrate, in every interaction with management, how your thinking will help the organization recruit new members, appeal to a new demographic, better assist its customers, increase its earnings.

Consulting in a nutshell

As a professional with skills, you are a rock star to other designers and coders.

As a professional who brings value, you are a star to decision makers.

Both paths are valid—and, truthfully, a great designer, writer, or coder adds incredible value to everything she touches. But the value she adds may not be one management deeply understands. Just as developers understand development, managers understand management.

If you can speak that language—if you can translate the precocious gifts of your early, skills-based career into a seasoned argot of commerce—you can keep working, keep feeding yourself and your family, keep contributing meaningfully to society and your profession.

###

Also published at Medium.

studio.zeldman is open for business. Follow me @zeldman.

The post A beginning consultant brings skills, an experienced consultant brings value. appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconPulled Over (My Glamorous Life) 9 Jan 2018, 10:36 am

MOST mornings my daughter Ava and I easily navigate the path across and down Manhattan to her middle school. This morning was not most mornings.

There was the bus driver who chose to block 35th Street between 1st and 2nd Avenues. Followed by the congestion of every car on 1st Avenue trying to take 37th Street instead. And the dead eyes of the bored, white city worker who pulled over every vehicle that did so—because someone at City Hall decided this morning that it’s now illegal to turn onto 37th Street from 1st Ave. Or use the right lane. Or something. The nature of the crime wasn’t clear.

The street was filled with cars that had been pulled over, and drivers who had exited their vehicles and were standing around in the cold, awaiting punishment of some kind. Most were people of color. After five minutes, we apologetically paid our cab driver, even though he hadn’t really taken us anywhere, and sprinted across to 2nd Avenue, hoping to beat the late bell of Ava’s school, two miles downtown from and west of us. We had eight minutes to get there.

“This is a little adventure,” I said to Ava, as we stepped into a fresh cab.

“Not to the driver,” Ava said sadly, looking back.

 

Also published on Medium.

studio.zeldman is open for business. Follow me @zeldman.

The post Pulled Over (My Glamorous Life) appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconLook back in anchor tags 3 Jan 2018, 9:46 am

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

 

Also published in Medium.

studio.zeldman is open for business. Follow me @zeldman.

The post Look back in anchor tags appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconMy Glamorous Life: The True Story of My Thanksgiving 24 Nov 2017, 1:59 pm

TRAVELED 1400 miles to end up in the same place.

Flew my daughter Ava from NYC Laguardia to Chicago Midway in the morning so she could spend Thanksgiving with her mom. To expedite boarding, Southwest Airlines does not assign seats, and there is only one class—Coach. The sooner you board, the better your chance of securing a decent seat; the more you pay for your ticket, the better your boarding position.

Additionally, line position depends on how quickly you check in online the day before your flight. Check in the first moment you can, and you’ll be first in line. Check in a minute later, and someone else may be in front of you. Hours later, you’re at the end of the line.

I love a pointless challenge. You can bet I’d set alarms to go off 24 hours before our flight so I could be the first to check in. And you know Ava and I were at the front of the line, so we could sit in the front row. I love an aisle seat, but I sat in the middle so Ava could sit by the window. It’s the little things that give you the chance to show someone how much you love them.

Southwest got us to Chicago 40 minutes early. Ava’s mom kindly met us at the gate, and off they went. I turned around to go home. My flight back to Laguardia was not scheduled to leave for another four and a half hours, but Southwest let me switch to an earlier flight with no penalty. There was just enough time to suck down some rice and beans at a fast food burrito stand in the airport’s food court—my first meal of the day—and dash to the gate in time for boarding. I flew back to New York on the same jet I’d flown in on, with the same crew, and sat in the same row: aisle seat this time.

Back home by 3:00, I fed the cats, watched “Jaws” on my iPad (somehow I’d never seen it), and fell asleep during the climactic fight to the death that ends the picture. Hours later, I woke up, confused, and made myself the traditional feast: leftover tofu on quinoa.

And that’s the true story of my Thanksgiving.

Follow me @zeldman. A version of this article appears on Medium.

The post My Glamorous Life: The True Story of My Thanksgiving appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconFaux Grid Tracks by Eric Meyer 21 Nov 2017, 10:15 am

JOIN An Event Apart’s Eric Meyer on a journey through the inner workings of CSS Grid as he tests various techniques to build a tic-tac-toe board filled with content. Hearkening back to the early days of CSS and A List Apart, these playful hacks rekindle a spirit of experimentation.

Faux Grid Tracks by Eric Meyer

 

Illustration by Dougal MacPherson

The post Faux Grid Tracks by Eric Meyer appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconA Dao of Responsive Liquid 19 Nov 2017, 1:18 pm

A liquid page will resize to fit whatever size browser window (within reason) that the user has available. … the real goal in building a website is to provide the user with a seamless interface to information. The site should not intrude on the user’s thought processes, but should gently guide them to their desired destination. If a site doesn’t look right because it doesn’t fit the user’s browser window, then the design has become intrusive to the user. — Glenn Davis, quoted in 15 Minutes, sometime in 1997.

TWO DECADES before Responsive Web Design, we dipped our toes in Liquid Layout — a similar but necessarily less refined concept. Glenn Davis of Project Cool fame coined the phrase in 1995 or 1996. (Glenn also came up with“Ice” to describe fixed-width layouts, and “Jello” for layouts that combined some fixed with some flexible elements.)

Liquid Layout was mainly what John Allsopp had in mind when he wrote A Dao of Web Design for A List Apart (quite possibly the most influential article we ever published). The most famous paragraph in that famous article explains…

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”

Everything new is old

Modern designers look back at Allsopp’s article and think John must have been a time traveler who had seen the future of responsive design and mobile devices. In fact, though, John was simply a highly skilled (and extremely articulate) mainstream developer. As such, he was familiar with Liquid Design and frequently used it in his work, along with other ideas mentioned in “Dao,” such as not forcing users to see a particular type size or typeface. To a good developer in those days, what mattered was making something that worked for everyone. (That should still be what good developers care most about, right?)

Liquid design was part of a “works for everyone” approach to web design, but it had limitations. For one thing, breakpoints hadn’t been invented. CSS layout was in its infancy, used by almost no one, except in experimental work. The ability to separate content and behavior from presentation was nonexistent, unless you limited “presentation” to setting type in a single column, letting the user override the type setting, and letting the column reshape itself to fit any viewport.

With so few controls available, Liquid design tended to become unusable in certain settings, and was almost always ugly.

Liquid design was Responsive design’s rough draft

Liquid design was immediately popular with developers when they were given permission to just make stuff — i.e. when they weren’t constrained by overly rigid Photoshop layouts. Designers almost never used Liquid design because the layouts moved so quickly into ugliness and unusability — too wide to read, or too narrow, or with overlapping columns in early CSS layouts. Designers also disdained Liquid layouts because most of us see our job as imposing brilliant order on ugly chaos, and fixed proportions always seemed to be part of that order.

The Web Standards Project – a liquid layout as seen on a wide computer screen.

Fig 1. The Web Standards Project: a liquid layout as seen on a wide computer screen. Designed by Andy Clarke in the early 2000s.

 

Fig 2. The Web Standards Project: a liquid layout as seen on a narrow computer screen. On the narrow screen, type overlaps and the page becomes unusable.

 

Ugly on one side. Unusable on the other. It took a special breed of designer to forge ahead with Liquid Layout anyway.

Were it were not for the iPhone and the phones and tablets that rose quickly in its wake, the W3C would likely not have invented breakpoints. And without breakpoints, there could be no Responsive Web Design. And without Responsive Web Design, created by a visually gifted designer and with tools to satisfy his peers, the idea that drove Liquid design back in the 1990s would not, at long last, have caught on.

It’s easy to view our current design thinking as more evolved than what we practiced in the past. And in some ways, it is. But if you read between the lines, it’s fair to say that our thinking was always advanced. It’s only now that our tools are beginning to catch up.

Read more about Liquid and Responsive Web Design

 

☞ Illustration by Justin Dauer. Follow me @zeldman. A version of this article appears on Medium. The 11th Annual Blue Beanie Day in support of web standards takes place November 30 on the internet.

 

SaveSave

The post A Dao of Responsive Liquid appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconAdvice for designers 6 Nov 2017, 9:17 am

Start by asking questions. Sketch, share your sketches, ask more questions. Don’t be precious with your work. Don’t hurry to finish.

The post Advice for designers appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconWhy don’t nonprofit sites convert? 18 Sep 2017, 3:08 pm

Living in New York and working in media, I talk to nonprofit organizations a lot. Big or small, they all say the same. No matter how much work they put into their apps and websites, they just don’t get enough new members. No matter how many expensive redesigns they undertake, they still don’t convert. Why is this?

Generally, it’s the same reason any site with a great product doesn’t convert: the organization spends too much time and effort on the pages and sections that matter to the organization, and too little on the interactions that matter to the member. (“Member” is NGOese for customer.)

Of course there are sites that don’t convert because they have a crappy product. Or an inappropriately priced product. Or because their content attracts people who are never going to be their customers, and gets missed by people who might want what they’re selling. Or because their content attracts nobody. Failure has a thousand fathers, and most businesses fail, so the fact that a website doesn’t convert could mean almost anything. (To know what it actually means, you need data, and you need to watch users interact with it.)

But with nonprofit sites, the product is almost always great, and the person visiting is almost always interested. So what goes wrong?

Never mind the user, here’s the About page

What goes wrong is that nonprofit stakeholders are so passionate about their mission—a passion that only deepens, the longer they work there—that they design an experience which reflects their passion for the mission, instead of one which maps to a member’s mental model.

NGOs lavish attention on their About page and mission statement and forget to work on their members’ immediate, transactional needs. And this is true even for those members who are as passionate about the cause, in their own way, as the stakeholders are in theirs. In the wake of a hurricane, a passionate member thinks of your site in hopes of donating food or giving blood. But nothing on the site calls out to that member and addresses her needs. All she sees are menus, headlines, and buttons trying to lead her to what matters to the organization — namely, the things it says about itself.

How to satisfy the user and convert at the same time

First, decide what one single action you, as the organization, want the user to perform. Should they sign up for your mailing list? Make a donation? Keep it singular, and make it simple. One form field to fill out is better than two; two is better than four.

Next, put yourself in the member’s shoes. What does that member wish to achieve on your website? Have you created transactions and content that allow her to do what she came to do? Have you designed and written menus, links, and headlines that help her find the content that matters to her? Forget the organization, for now. Pretend the only thing that matters is what the user wants. (Because, ultimately, it is.)

Do these things, and weave your singular, simple conversion opportunity into each screen sequence with which your user interacts. To optimize your chance of success, place the conversion opportunity at the very point where the user successfully finishes transacting the business that mattered to her. Not before (where it is only a distraction). Not in another part of the site (which she has no interest in visiting). She’s a lot likelier to sign up for your mailing list after you’ve helped her donate food to her neighbors than she is to sign up in an unsolicited popup window.

Thank you, Captain Obvious

All the above suggestions are obvious common sense, and have been known since transactional web design was in its infancy in the 1990s. And yet, because of organizational dynamics, internal politics, and our getting so close to our own material that our eyes go out of focus, we forget these simple ideas more often than we use them—and fail when success is so easy, and so close to hand.


I’ll be leading a panel discussion, Dispatches from the Future: Nonprofits and Tech, on Wednesday, 20 September, in Brooklyn.

The post Why don’t nonprofit sites convert? appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconMedium to pay writers; program similar to Readability 23 Aug 2017, 12:53 pm

INTERESTING. Medium will now pay writers. The revenue to pay writers will derive, not from advertising—Medium scorns it—but from member contributions.

How Medium will pay writers

Medium now publishes two kinds of content: public content, viewable by anyone; and private, members-only content. Medium members pay a small monthly fee; in return they get access to members-only content.

As in the past, writers who write public content will not be paid, but they will have access to a potentially large audience. Only writers who write members-only content will have the potential to earn.

Payments will be based on “claps,” a UI experiment Medium introduced seemingly only a few days ago; readers are supposed to indicate how much they like a story by how hard (or how long) they press on the clap widget. None of this is explained to readers in context, but it’s pretty easy to figure out. At least, it is easy to figure out that clapping indicates approval, and that the longer you lean on the clapper, the higher the numeric approval level you can share.

The “clap” widget also appears on public stories, where it has no effect on how much the author will get paid—since writers of public stories will not get paid. On public stories, it’s just there for fun, and/or the make the author feel good. You can’t clap for your own story, which helps prevent the most obvious types of system gaming.

Initially, the payment program will be open only to a select group of writers, but if it succeeds, more and more writers will be included.

Why it matters

As the publisher of A List Apart, which has relied on advertising revenue in the past but is about to stop doing that; as a writer, reader, and passionate devotee of web-delivered content; and as a blogger at zeldman.com since 1995, I will be watching this experiment and hoping for its success. I became a Medium member as soon as the publication offered it, even though I have no interest in reading “exclusive,” members-only content. I did it to support Medium, which I see as one web pioneer’s attempt to keep the web a vital content ecosystem.

It’s the same reason I cheered for the Readability app invented by my friend Rich Ziade and his team, back in the day. I even served on Readability’s advisory board, for which I was paid—and asked—nothing. I did it because I believed in Readability’s mission to find a way to pay for content. That particular experiment died, but in many ways its spirit lives on in Medium, whose readable visual layout Readability helped to inspire.

I will not apply to be a paid Medium writer since I have my own magazine’s content and finances to figure out, and since I choose to publish my content publicly. But I applaud what Ev and his teammates are doing, and I will be watching.

Source: Expanding the Medium Partner Program – 3 min read

Also published on Medium.

The post Medium to pay writers; program similar to Readability appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconIt’s just lunch. 8 Aug 2017, 8:16 am

A nice bowl of ramen.

I HADN’T heard from her in years. Suddenly, there she was in my in-box. Tentatively proposing coffee. Maybe lunch. A dam broke inside me, releasing a flood of warm memories. Our first, tentative contact ten years or more ago. Getting to know each other. Endless, happy discussions about where this thing was going. Coming together on goals and brand; on voice and tone. Finally, the joy of designing and launching her website. And then, abruptly, the last invoice and the hurried departure.

My former client. She had a new job now. She wanted to catch up. And, sheepishly, she admitted, she might want something more. Advice about a design problem.

Over an unassuming wooden table laden with summer lunch—mine was Ramen, hers was salad—we shared personal updates. Kids, relationships, projects. And then we got down to the real agenda: an issue at work that was stumping her. Desire for an outside perspective.

Former clients often feel slightly embarrassed about reaching out for a little free advice. They shouldn’t. As a designer, one of my greatest joys is to reconnect with good people whose projects I loved working on. Design is a job, but it’s also a relationship. When design is going well, the exchange of ideas is almost addictively exciting. And then, all too soon, the project ends, and, if you’re a consulting designer, and you’re lucky enough to have a steady stream of business, you move on to the next gig.

We designers have built-in forgetters: super powers that enable us to care passionately about the problem we’re solving and the people we’re solving it for, and then, absurdly, to discard those feelings as we move on to the next client and design problem.

Clients have a built-in forgetter too. They forget that our relationship, although partly monetary, was also very real. Many clients are self-conscious about reconnecting personally and asking for a small favor in the same breath. But I couldn’t welcome that more. If I can help people, it’s a joy to me. Collaborating on the discovery and solution to a problem isn’t just a stimulating mental exercise and a profession: it’s also a codependent rush.

Between the cracks of my studio’s bigger projects, I’m always looking for ways to help people. So, in the spirit of Ask Dr Web, I’m taking this opportunity to issue an invitation to folks located in or visiting New York. If you’re someone in my network—a former client or old friend or both—with a design problem to mull over, you don’t have to do the mulling alone. Ping me. And let’s do lunch.

Also published on Medium.

The post It’s just lunch. appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconBig Web Show № 159: If You Can’t Stand the Heatmaps, Stay Out of the Conversion, with @nickd 16 Jun 2017, 12:36 pm

Nick Disabato AKA @nickd

NICK Disabato (@nickd) and I discuss heat maps, conversion rates, design specialization, writing for the web, Jakob Nielsen, and the early days of blogging in Episode № 159 of The Big Web Show – “everything web that matters.” Listen and enjoy.

Sponsored by ZipRecruiter, Blue Apron, User Interviews, and Hotjar.

URLS

The post Big Web Show № 159: If You Can’t Stand the Heatmaps, Stay Out of the Conversion, with @nickd appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconBuy a piece of studio.zeldman 12 May 2017, 3:59 pm

Jessica Hische enjoys the ball chair at A Space Apart.

We’ve got some exciting news to share. Web and interaction design studio.zeldman is moving, from our digs at 148 Madison Avenue to a new location on Fifth Avenue. As of June 1, we’ll be designing, creating, and consulting out of our beautiful new studio space at The Yard: Flatiron North.

Closing our co-working design studio

This means we’re closing A Space Apart, the Madison Avenue co-working design studio we opened in January, 2012. A Space Apart was a fun experiment, and we loved learning from the design studios, product companies, publications and startups with whom we shared it. Companies like Font Bureau, Monkey Do, Shopify Partners, Danilo Black, Been (RIP), Promedia, Byte Dept, Nick Sherman, Fred Gates Design, Wayward Wild and The Great Discontent and have all shared our water cooler at one time or another during the whirligig of the past five years. Creatively, it’s been amazing.

But we’re tired of playing landlord. Instead of debugging the internet router, tending to the recycling, hiring HVAC repair people, and seeking suitable replacement studio mates when a company moves out, we’d rather spend our time solving our clients’ design problems and making cool stuff like A List Apart, A Book Apart, The Big Web Show, and An Event Apart. And The Yard’s the perfect place for us to ply our trade and make our goods. (Plus we still get to rub shoulders with other creative business folk.)

We can’t take it with us: furnish your office with our stuff!

Running a co-working studio space meant buying a lot of furniture and equipment. Beautiful stuff, still in great condition. Elegant stuff, because we’re designers. Stuff we won’t need any more, now that we’re moving to new digs where somebody else does landlord duty. So we’re selling it, for a lot less than we paid. And that’s where (maybe) you come in.

Most everything must go, including our famous Eero Aarnio (style) ball chair (if its red cushions could talk!), custom Bo Concept shelving, Eames Desk Units from Design Within Reach, Herman Miller Aeron chairs (ditto), midcentury tulip table and side chairs, black glass desks, Nespresso espresso maker, file cabinets, icemaker, microwave oven, see-through glass mini-fridge, and more. These are beautiful things that inspire good design, and they deserve good homes.

View all our goods and prices—and even order the ones you want!—via this lovely WebVR Walk-through prepared by our own Roland Dubois. (If you’re not into the whole WebVR thing, you can also just browse our store at Apartment Therapy. The VR experience also links directly to the store items, so you’re good either way.)

We leave May 31, and these goods are first-come, first-served, so don’t wait too long. Grab your piece of web and interaction design history today.

☛  Also published at Medium

The post Buy a piece of studio.zeldman appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

FaviconBig Web Show № 158: Old Men Shake Fists at the Cloud – with Jim Coudal 5 May 2017, 5:32 pm

IN Big Web Show № 158: internet veterans Jim @Coudal & Jeffrey @Zeldman on the death of blogging, the birth of Field Notes, the virtues of a subscription model, and much more. Begins in tears, ends in triumph. One of the most fun (and inspiring) episodes ever. Sponsored by Hotjar & Blue Apron.

Enjoy Big Web Show № 158.

URLs

Field Notes
coudal.com
coudal video archive
Layer Tennis

The post Big Web Show № 158: Old Men Shake Fists at the Cloud – with Jim Coudal appeared first on Zeldman on Web & Interaction Design.

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati

Page processed in 0.714 seconds.

Powered by SimplePie 1.2.1-dev, Build 20111015034325. Run the SimplePie Compatibility Test. SimplePie is © 2004–2018, Ryan Parman and Geoffrey Sneddon, and licensed under the BSD License.