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.
“You don’t get to decide which platform or device your customers use to access your content: they do.”—Karen McGrane, Content Strategy for Mobile
“When a person tells you that you hurt them, you don’t get to decide that you didn’t.”—Louis C.K.
“Discomfort with others’ burdens has no place in good design.”—Mica McPheeters
“Historically, teams simply have not been trained to imagine their users as different from themselves—not really, not in any sort of deep and empathetic way.”—Sara Wachter-Boettcher
“USER CUSTOMIZATION” on the web hearkens back to the deluded old days of portals, when companies imagined you’d start your daily “net browsing” session by “logging on” to their website’s homepage. Customization was among the chief (largely imaginary) inducements for you to return to their “start” page and not others.
The thought was that changing the fonts and color scheme would make their page feel more like your home. After all, Windows 3.1 users seemed to enjoy switching their home computers to “Black Leather Jacket” or other personalized settings—if only as an escape from the computer environment at work, where their bosses enforced a rigid conformist look and feel, and dictated which software and fonts were allowed on your workstation. Surely, the thinking went, pioneering web explorers would demand custom accommodations as plush as those found in the best-selling operating system.
MySpace … and beyond!
This fetish for pointless customization—customization for its own sake—persisted through the MySpace era, where it actually made sense as an early mass offering of page owner personal branding. Its descendants are the WordPress, Tumblr, and Squarespace themes that create a professional appearance for the websites of individuals and small businesses. This is a positive (and inevitable) evolution, and a perfect denouement for the impulse that began life as “user customization.”
But, except on a few quirky personal sites like Jeremy Keith’s adactio.com, where sidebar customization widgets live on as a winking look back to the early days of personal content on the web, user customization for its own sake has long been out of favor—because experience, referrer logs, and testing have long shown that visitors don’t bother with it.
Perhaps that’s because people don’t really visit websites any more. They drop in quickly on a page found by search or referred by social media, scan quickly and incompletely, and leave, mostly never to return.
When you use Google, Bing, or Duck Duck Go to find out what a knocking sound in your radiator or a pang in your gulliver might mean, you scan for the information you sought, find it (if you’re lucky), and leave. The notion that most sites could get you to come back by offering you the ability to change fonts or colors is self-evidently absurd. Why bother?
Readability and font customization
Ah, but there’s another kind of user customization that I’m hoping and betting will make a comeback: a subtle, inclusive sort of customization that doesn’t exist for its own sake, but rather to serve.
Our glowing, high-density screens are great for watching Westworld, but a bit too bright and backlit for prolonged reading compared to the paper they’re intended to replace. But screens have one advantage over printed books (besides storage and portability): namely, they offer accessibility features a printed book never could.
I once received an architecture book written by an important scholar, but I was never able to read it, because the layout was terrible: the type was too small, the leading too tight, and (most of all) the measure far too wide to be readable. If an ebook version had been available, I’d have purchased it; but this was before the mass market availability of ebooks, and the tome is now out of print. I own it, but I shall never be able to read it.
It wouldn’t be a problem with an ebook, because all ebooks offer readers the ability to alter the contrast and the basic theme (white text on black, black text on white, dark text on a light background); all ebooks offer the ability to adjust font size; and most include the ability to change fonts. Why do Kindle and iBooks offer this flexibility? Because it helps readers who might otherwise not be able to read the text comfortably—or at all. This isn’t customization for its own sake. It’s customization for the sake of inclusion.
The grey lady and user customization
Now notice who else provides some of this same inclusive customization function: the mighty New York Times.
People in our industry tend to repeat things they’ve heard as if they are eternal verities—when the real truth is that each digital experience is different, each person who engages with it is different, and each device used to access each experience brings its own strengths and limitations.
A font size widget may smell like the pointless old-fashioned “user customization” to be found on half the unvisited sites in the Wayback Machine, but it is the very opposite of such stuff. Even mighty responsive design benefits from offering a choice of font sizes—because there are just too many complications between too many screen sizes and device features and too many pairs of eyes to ensure that even the best designer can provide a readable experience for everyone without adding a simple text size widget.
Most of the sites we’ve designed in the past few years have not had a text size widget, but I believe this was due to our privileged assumptions and biases, and not to the reality of the needs of those we serve. Going forward on client projects at studio.zeldman, and in my publications like A List Apart, I hope to correct this—and I hope you will think about it, too.
Big Web Show № 150: Giant Paradigm Shifts and Other Delights With Brad Frost
BOY, was this show overdue. For the first time ever on The Big Web Show, I chat with my friend, front-end developer extraordinaire Brad Frost, author of the spanking new book, Atomic Design.
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.
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.
AT HOME, sick with a cold and bored, my daughter buys a single packet of “My School Dance” in a freemium iTunes game. The manufacturer charges her (well, charges me) for ten packets. This same “accidental” 10x overcharge happens across three different games by the same manufacturer in the span of about an hour.
American Express notifies me of the spurious charges, but won’t let me dispute them until they are “posted.” I spend half an hour on the phone with a very nice gentleman at Amex learning this. Why would Amex notify customers about a charge days before they can do anything to resolve it? I don’t know. And I don’t ask the gentleman on the phone. His job is hard enough.
A few days pass. Amex “posts” the false charges and emails me with a link to resolve the problem on Amex’s “dispute a charge” web service.
Amex’s “dispute a charge” web service “encounters an error” when I try to use it to resolve the problem.
This happens every time I try. I try for three days.
So I call Amex, but I can’t resolve the problem because I don’t have the card in my wallet.
So I head to iTunes, where I should have gone in the first place, and click through two or three generations of iTunes “Report a Problem” interfaces: visually different generations of iTunes software, with different user paths, all still being served by Apple. Generations of iTunes software that, when they fail, link to other generations of iTunes software, which also fail.
I click and click my way through five years of iTunes interfaces.
Finally I find an iTunes page where I can manually “Report a problem” for each of the 27 false charges. (Three of the charges, remember, were legitimate. I’m willing to pay for the three items my daughter intended to buy. But not 30.)
If one software product overcharges your kid by a multiple of 10, that could be a software bug. When three products from the same manufacturer all do it, that’s not a bug, it’s a deliberate attempt to defraud families, by overcharging on purpose and hiding behind the opacity of iTunes’s purchase reporting. Simply put, the manufacturer is dishonest, and figures iTunes’s support section is impenetrable enough that you’ll eventually give up trying to get a refund.
But they didn’t count on my tenacity. I’m the Indiana Jones of this motherfucker. I have studied maps and bribed natives and found my way to the hidden iTunes refund page that actually, sometimes, works.
On this page, I inform Apple of the fraud 27 times, in 27 different boxes. Each time, after reporting, I click a blue button, which generally returns an error message that iTunes was unable to process my request. So I enter the data and click the button again. It’s only 27 boxes of shit. I’ve got all the time in the world.
The page tells me that only two refunds went through. Every other request ends with an error message saying iTunes could not process my request, and encouraging me to try again later.
Instead, I leave the page open, and, about ten minutes later, I manually reload it. When I do so, the display updates—I guess this generation of iTunes software preceded “Ajax”—and I learn that most of my refunds have gone through.
So the software actually works about 33% of the time, even though it indicates that it only works 5% of the time. Remember that wait-ten-minutes-then-randomly-reload-to-see-if-anything-changed trick. It’s the sign of excellently designed consumer software.
I’ve put over two hours of my time into this. Going on billable hours, I’ve probably lost money, even if I get all my overcharges refunded. But there’s a principle here. Several principles, actually. Tricking kids is wrong. Stealing is wrong. Building a beautiful front-end but neglecting customer service is wrong. Mainly, I’ve just had enough of 2016’s bullshit.
Val covered guidelines for designing animation that fits your brand, making animation part of your design process, and documenting your animation decisions in your style guide for future use.
It takes a village
Animation works best when the whole team plans for it. If it’s simply a wish—say on the part of the designer—everyone in the chain will be too busy with higher priority tasks, and the animation won’t get made.
Which is a pity, because well-considered animations (such as Val showed) can make interactions much easier to understand. Additionally, if choreographed by the entire team as part of a bigger picture, animations can reinforce your brand. (Done without consideration, and without the support of the entire team, they’re more likely to contradict important brand attributes.)
Better animation requires good communication, comprised of…
Established animation values
Documentation and repeatability
Deliverables – the things that start conversations
The first deliverables for animation are conversation starters: storyboards and sketches that help the team envision where there is potential for animation in their user flow, see how an animation could make the screen easier for users to understand, and begin to plan how to animate between screens. Best of all, anyone can create a sketch or storyboard: artistic talent is not required (these are not Pixar animations but simple conveyors of ideas).
In every storyboard, we should draw or describe a trigger (what starts the action?), an action (what takes place?), and a quality (how does it happen?).
Motion comps and interactive prototypes
Motion comps answer questions about how the animations should look, move, and behave, and allow for quick iteration. When handing them off to the development team, it’s important to include the duration and delay values; details of the easing used; repeat values, and iteration counts.
Define and document – save future you time and effort
Interface animations are most effective when they work in concert as part of the bigger picture. Designing and choreographing your web animation efforts from the top down leads to more effective animations that integrate into your design system. And, defining a motion language for your brand can help your team to develop a shared vision from which to work.
Don’t just create animations—define and document them. Define your brand in motion with the same care you take for your logo, style guide, and pattern libraries. Use design principles to inform motion decisions. Study Brand Pillars, Voice & Tone, and Experience Pillars, and build your animation guidelines from there. Animations are best when they’re brand-appropriate and repeatable.
Get input from everyone
Having brought us through the rationale for animations and a variety of potential workflows, Val took us deeply into the details that make for effective animations, and ended with a game plan enabling everyone on the team to become an undercover animation superhero.
Tomorrow I’ll be back with more top takeaways from another AEA San Francisco 2016 speaker. The next AEA event, An Event Apart St. Louis, takes place January 30-February 1, 2017
Private Parts: unlikely advocate fights for online privacy, anonymity
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.
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.
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.
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.
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.
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.
STUDIO.ZELDMAN is open for business. It’s a vision I’ve been cooking up, a new studio supported by some of the most talented people in our industry and everything I’ve learned in two-plus decades of web and interaction design. And now it’s here. studio.zeldman designs digital experiences and provides strategic consulting. We don’t have a portfolio yet, but we landed our first client before we launched. Come on down!
Heading in this direction meant leaving the studio I founded in 1999 (we’re on the best of terms, and it’s an excellent company in great hands). My rise to an almost purely strategic position there taught me a lot about my business—but it also kept me from designing new projects. And I’ve been itching to get back to my roots. Three factors shaped my design for the new studio’s website:
I wanted to try something different: something that was conceptual and art directional. Jen Simmons’s An Event Apart presentations (like this one from last year) inspired me to break out of the columnar rut of current design and create something that didn’t look like it came pre-baked in a framework.
Because I am contrary, I thought it might be fun to allude to an outdated design approach (like, say, skeuomorphism) in a responsive web layout—if the content supported such a gambit.
Most of all, my design had to come out of content.
Let’s unpack that third point a bit more. Normally, design studio websites discuss the customer’s business problems and posit design (and their particular skills) as the solution. It’s a strategy David Ogilvy pioneered for print advertising in the 1950s (“problem/solution”).
Every mention of an achievement or capability exists to show how it solved a client’s business problem: “our redesign increased conversion by 20%” or “our testing and iterative process reduced shopping cart abandonment by 37%,” and so on. Such sites talk about the company’s expertise, positioning it within a framework of client needs. Almost every design studio says the same two or three things at the top of their home page, leaving the real selling to their site’s case studies section. But studio.zeldman is new. No portfolio yet; no company history.
But first, a little something about me
With no portfolio, our strategy—at least for the launch—couldn’t be about our body of work. At least for now, it had to be about me: what I believe, what I’ve done. I came to that realization very reluctantly: I wanted to create a studio that was bigger than any one person. (My original name for the company was simply “studio,” and my plan for the design was that it should be as clean and basic as water.)
But Jason Fried of Basecamp, who is one of my smartest friends, persuaded me that what was unique about this new studio was me, and that I shouldn’t be afraid to say so. Jason convinced me to write simply and directly, in my own voice, about what I believe design is and does—and to support that message by showing some of the things I’ve done that reach beyond my portfolio.
As if I were sitting down to send you a personal note about this new company I’m starting, the best way to express those thoughts on the site was in a letter. That was the strategy. The letter was the idea. And the idea shaped the design.
A new angle on an old design idea
In 2007, if I were designing a site that began with a letter to the reader, I would have used drop shadows and paper textures to suggest that context. Back in 1995, I’d have made an image of a letter on a table or desk top, and the letter would have been at a slight angle, as if the writer had just left it there. Could I allude to these old-fashioned ideas in a way that was subtle and modern?
The 1995 technique of a photorealistic letter was out. But a slightly angled “paper” was feasible; Jen Simmons had shown me and hundreds of other people how this kind of thing could be achieved in modern CSS.
Of course, whether something is possible in modern browsers and whether it actually reads well can be two different things. So while I was comping in pen and paper and in Photoshop, we also ran tests. My collaborator Roland Dubois set up a CSS3 font-smoothing test for angled text in JSFiddle, while my friend Tim Murtaugh of MonkeyDo put together a quick prototype of the top portion of my initial design. Everything checked out.
Once I knew an angled letter could work, I made the angled placement and angular cropping of images a guiding principle and unifying idea for the rest of the design. On the calendar, it took me from January through April of this year to land on a design idea I liked. But once I had it, the site seemed to design itself in just days.
I confess: yes, I designed in Photoshop. (Don’t tell anyone, but I even started with a grid.) And, yes, to your horror, on this project I designed for big screens first, because that’s where these particular design ideas could be most impactful. I knew we could make the design sing on any size screen, but designing for big-screen-first brought this particular project’s biggest coding challenges to the fore and provided the excitement I needed to get to the finish line. Nothing brings a smile to a designer’s lips like seeing your web idea completely fill a 27-inch screen (and do it responsibly, even).
The best part
The best part of the page is the part I didn’t design. Roland did. It’s that magical form. I could play with that thing forever, and I hope potential clients feel the same.
Some folks who checked out the beta asked why we didn’t focus on specific capabilities or budget ranges. Fair question. We certainly could have launched as, say, a redesign shop, or a web-only studio, or a content-focused studio. Any of those would have been credible, coming from me, and differentiating ourselves right out of the gate would not have been a stupid move. We really thought about it.
But we decided it would be more interesting to be less specific and find out what our potential clients are actually looking for. Consider it research that might sometimes lead to a gig.
studio.zeldman thanks you
Mica McPheeters and Jason Fried checked out my copy and kept me honest. Tim Murtaugh coded an early prototype of the site. Roland Dubois coded the final from scratch. Noël Jackson set up the repository and CDN, and ran sophisticated tests that uncovered everything from bugs to performance issues, rebuilding and re-coding with Roland to squeeze every byte of performance we could out of a site with full-screen Retina images. An article by Roland and Noël on the experiments and techniques they used to code this site would be infinitely more interesting than what you’ve just read.
Hoefler & Co. designed the reliable letter font which you will all recognize as Sentinel; DJR created Forma, which I think of as sexy Helvetica, and let us use it even though it is still in beta. Before launch, to save bandwidth, we tried recreating the site design using system fonts. Wasn’t the same. (And with WOFF and CDNs and subsetting, we were able to deliver these wonderful faces without choking your pipes.)
What follows is a transcription of Has Design Become Too Hard?, which I wrote for Communication Arts in June 2016. I transcribe it here against the day CA takes down its content.
WE DESIGNERS love to complain. It’s our nature. After all, if we were satisfied with the way things work, feel, and look, we wouldn’t have become designers in the first place. But lately, particularly among web and interaction designers, our griping has taken on a grim and despairing flavor. Digital design is not what it used to be, we say. The fun has gone out of it. An endless deluge of frameworks and technologies has leached the creativity out of what we make and do, and replaced the joy of craft with a hellish treadmill of overly complicated tools to master.
Many of us feel this way, but is it true?
Consider responsive web design, proposed six years ago (video) by Ethan Marcotte at An Event Apart, and subsequently turned into an article and then a book. In twenty-plus years, I’ve never seen a design idea spread faster, not only among designers but even clients and entire corporations. Companies brag about having responsive designs for advertising, for crying out loud. Yet, after a euphoric honeymoon, designers soon began complaining that responsive design was too hard, that we’d never faced such challenges as visual people before. But haven’t we?
In the early days of web design, beginning in 1995, pixels were not standardized between PC and Macintosh; monitor aspect ratios were not standardized, period; and when we got a standardized layout language for the web, every browser supported it differently for years.
We tried “liquid layout” to work around the fact that every monitor was different. Our clients demanded we put everything above the fold, and we acted as if there was one—a consensual hallucination, when there were as many folds as there were screens, browsers, and user-adjustable settings.
Later, when standards were better supported in browsers, some of us pretended that “everybody” had a 600 x 400 monitor (and then an 800 x 600, and then ), but these too were consensual hallucinations. And even in those rose-colored fixed-width days, there was always a client or a QA tester whose user preference settings, outdated browser, or wonky operating system blew our carefully constructed fixed-width layouts to hell.
THAT’S WHY THEY CALL IT WORK
Good design was never easy. The difference between now and then is that today, instead of pretending or wishing that everyone used the same platform with the same settings to view print-perfect digital masterpieces, we acknowledge that people will access our content however they choose, and with whatever device they have close at hand—and we design accordingly. For the first time since people first argued over how to pronounced “GIF,” we’re designing with the medium instead of against it.
Designers say, “okay, I’m down with responsive design—in a world of phones and watches, I have to be—but today’s code is too hard.” Yet is it? And was it ever easy?
DESIGNING INVISIBLE STRUCTURES
That has changed, to be sure, but not the way you may think, and not for the worse. Certainly there are a few new elements in HTML5 to learn—elements that add structural semantics to our content precisely when we need them. New elements like aside and article are perfect for a world in which we aren’t designing “pages” so much as systems, and where we’re taking an increasingly modular approach to design as well as content. New standard tools like Flexbox enable designers to separate content from presentation at the atomic level, which can be extremely beneficial to our clients and (more importantly) to the people who want to read and interact with their content. For an example of how this works, turn, again, to our friend Ethan Marcotte, who wrote about this very thing in November of last year.
You should read Ethan’s article, but here’s a quick summary of what he did. In redesigning a large content site, he first focused on creating a host of tiny, reusable patterns—such as headline, deck, and thumbnail. Several of these headline, deck, and thumbnail units were combined into a “teaser” module that promoted internal content elsewhere in the site, a common design pattern on media sites. Ethan then wrote markup based on the pattern he had visually designed—just like we all do.
But then came the fresh insight: what if a user doesn’t access the site’s content the same way Ethan does? For instance, what about blind or low-vision users who navigate web content as non-visual hypertext? Would the HTML structure Ethan had designed work perfectly for them? Or could it be improved?
It turned out the design of the HTML structure could be modified to better serve folks who browse content that way. As a plus—and this almost always happens when we design with the “stress case” user in mind—the site also worked better for other kinds of users, such as folks who access content via watches (on the high end) or not-so-smartphones (on the low end). In the same way you design visual elements to guide people through an experience, you can (and should) design your markup to create a compatible experience, even when this means the HTML does not follow the same order as the visual stream. HTML5 and Flexbox helped Ethan make better design decisions.
THAT FEELING OF INADEQUACY
Okay. So HTML is a bit richer than it used to be. And CSS is more powerful. But does a designer need to learn a lot more than that? Must you master Sass? Must you use Bootstrap or other frameworks? (For this is the source of many designers’ anxiety.) The answer is maybe … and maybe not.
Maybe if you’re specializing more and more in front-end code, it makes sense for you to learn Sass, as it gives your CSS superpowers and makes updating your code easier. For instance, when a client changes their brand colors, it may be easier to change one instance in Sass (and have Sass update all your code), rather than hunt-and-peck your way through hundreds of lines of CSS. Obviously, many designers have adopted Sass because of these benefits. Less obviously, some equally brilliant designers have not. We judge designers by their work, not by the tools they use to do that work, right? If learning something new excites you, go for it. If it’s causing undue anxiety, don’t force yourself to learn it now. You are still a good person.
As to frameworks like Bootstrap, they’re great if prototyping is part of your team’s design process—and in the world of apps, it surely should be. Such frameworks make it very easy to quickly launch a working design and test it on real human beings. But after a few iterations have improved your design, it’s time to dump Boostrap and code from scratch.
That’s a truth that hasn’t changed in 20 years, and probably won’t change in our lifetimes.
So relax. Quit tearing yourself down for not knowing every framework that’s out there. Stop worrying about where the fun went. And go design something useful and beautiful. Same as you always have.