Jen Robbins: web designer, vlogger (before that was a thing), and bestselling tech book author.
Today my daughter Ava and I had brunch with my old friend Jen Robbins at P.S. Kitchen, a vegan restaurant in the Theater District/Hell’s Kitchen. Jen was present for, and actively participated in, the very beginnings of the creative and blogging web, and her famous book, now in its umpteenth edition, is still the best introduction to web design I know—probably the best that will ever be written.
One of Jen’s early sites, “Cooking With Rock Stars,” consisted of short video interviews she made with the likes of Jack Black, Rufus Wainwright, and others. Her show predated YouTube by five to ten years and podcasts by fifteen. It was way ahead of its time while also being a great reminder of what the web, in its infancy, was like. The rock star interviews are also fun and fascinating and deserve to be seen again.
By arrangement with the director, we show our audience Gary Hustwit’s “Rams”—a documentary about product design icon Dieter Rams—during the extended lunch hour on Day II of our three-day UX & front-end conference event. I just finished watching it for the fifth time.
We’ve shown Gary’s film in every city of our tour this year, and each time I’ve watched it with our attendees, I’ve seen new things in the film, and been ever more deeply moved by it.
Rams’s work, and his message to designers seems more important now than ever before. Not only should every designer see this film; I wish every human being would see it.
Brian Eno’s ambient minimalist score feels like an audio correlative to Rams’s design principles. Although it’s used sparingly, every sound counts.
The film’s final shot, where Dieter walks off into the woods, always makes me tear up.
TEACHING is a great way to find out what you know, and to connect with other human beings around a shared passion. It’s an energy exchange as well as an information one, and the energy and information flow both ways.
I’ve been a faculty member in the MFA in Interaction Design program at New York’s School of Visual Arts since my colleague Liz Danzico cofounded the program with Steven Heller in 2009. As with all programs and departments at School of Visual Arts, the MFA IXDprogram is run by a faculty of busy, working professionals who teach one three-hour class per week, one semester per year.It’s the kind of gig that doesn’t interfere with your full-time job, and even makes you better at it.
(Fun facts: In 1988, I moved back to New York, the city of my birth, specifically so my then-girlfriend could study computer graphics at SVA; the highlight of my advertising career, which preceded my ascension into web and UX design, was spent working for top SVA advertising instructor Sal DeVito; and I subsequently enjoyed a long romantic relationship with an artist who’d moved to New York to study painting at SVA. So you could say that my eventuallyteaching at the place was overdetermined. When Liz told me of her new program and invited me to teach in it, it was as if half the prior events in my life had been whispers from the future. But I digress.)
Helping students have better careers
Since the program began, I’ve taught a class called “Selling Design,” which helps students completing their Masters thesisdecide what kind of work they’d like to do when they leave with their MFA, a few months after the class begins. There are so many opportunities now for people who design experiences, digital or otherwise. What should they do? Where will they be happiest? Inside a big company or a small one? A product company or an agency/studio? Should they start their own business?
And there are so many kinds of workplaces. In some, it’s your work that matters most. In others, it’s politics. How can you tell the difference before taking a job? We illuminate the right questions to ask and the clues in a student’s own personality that can lead to a great career or a blocked one.
The main teaching method is discursive: I invite designers who’ve had interesting and varied careers to come into the studio and have a conversation in front of the class. Mainly I ask questions and the guest speaker answers; then the class asks questions. Over time the speakers’ experiences and the takeaways I synthesize from them for the class create a picture of everything from how to tell if someone’s lying to you in a job interview to the signs that you’ve come to the right place.
A blaze of glory
This Thursday, May 2nd, at 10:00 AM, I teach my last class of the year, and I’m thrilled that my guest speaker will be Alexis Lloyd, Head of Design Innovation at Automattic, and previously Chief Design Officer at Axios, and Creative Director of The New York Times R&D Lab. In my initial months at Automattic, I’ve reached out to Alexis many times for help and insight, and she’s always generous, patient, and illuminating. It will be an honor and a pleasure to end my teaching year in what will surely be a great conversation with this experienced design leader.
For more about the MFA IXD program at School of Visual Arts, follow @svaixd on Twitter and visit https://interactiondesign.sva.edu/ . And for those who don’t yet know Alexis, here are some points of reference:
Every once in a while, life gifts you with a genuine moment. “>Here’s my friend designer/author Justin Dauer and his newborn, exchanging important information during, of all things, a business conference call. (By the way, Justin is now hard at work on the second edition of his book, Cultivating a Creative Culture, which I recommend for anyone leading a team: www.the-culturebook.com/.)
For your viewing pleasure…
We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen Simmons shows you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever.
Big Web Show ? 158: Old Men Shake Fists at the Cloud – with Jim Coudal
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.
Digital newspaper design challenge: a report from Poynter, part 1
CAN design create a better user experience that engages readers and drives revenue? Can it fight fake news and help save real journalism at a time when news organizations large and small are underfinanced and under attack?
The challenge began October 17–18 in New York, with five pundits and five designers, of whom I was honored to be one, workshopping a project brief during a two-day conference event at the Columbia Journalism School. (You can watch videos of all these sessions courtesy of Fora.tv.)
The next phase took place yesterday in St. Petersburg, Florida, as the four other designers and I presented our work to a live audience. In this short piece, I’ll talk about the designs my colleagues presented; in the next, I’ll discuss my own.
Reconnecting with the people: the challenge for digital news
Roger Black described the difficulties facing digital news publications:
The challenge is serious. Fake news crowds real news. Numbers no longer add up for publishers. Readers jump from site to site without knowing where they are, or staying for long. You can see the brief for this project here.
Can design help? Well, as a I designer, I think it can. I mean, the design of most news pages is not what you’d call attractive. But the solutions proposed at Poynter will be much more strategic than cosmetic. And they’re strategies that can be combined.
—Five design answers that add up, Roger Black, January 20, 2017
“A news publication might think a bit more like Fitbit”
Between us, we designers had about a century of experience designing digital publications—internally, as consultants, or both. This means that, even though an open “design challenge” brief necessarily omits an unknown number of the specific requirements any actual publication design assignment would include, all of us were aware of, and to some degree addressed, typical news publication requirements not included in our brief.
Kat Downs Mulder, Graphics Director at The Washington Post, shared a prototype for a big-brand news site. Kat had just given birth to a healthy baby boy (congratulations!), so her work was presented by two of her colleagues from The Post. Kat did not design with the avid, committed news reader in mind (since those folks are not the problem for most publications). Instead, she pondered how to engage the typically fragmented attention of today’s distracted and passive news reader:
“A big-brand news site [should be] aware that people have a lot more to do in their lives than read the news,” Kat posited. Thus, “A news publication might think a bit more like Fitbit. That is, it should make you feel like it’s working for you. A reader should say, ‘I’m reading everything I need to know.’”
Keep that dopamine pumping
Kat presented a multi-paned prototype. The wider pane on the right contained news content; the narrower pane at left was navigation. As I’ve just described it, this isn’t much different from the current Post website, but Kat’s prototype was very different, because it prized reader control over editorial director control; kept track of what you read; encouraged extra reading the way Fitbit encourages extra steps, and rewarded it the same way Fitbit does, with an accumulation of points that give the reader dopamine hits and create the perception that the “news app” is working for her—as a rewarding part of her busy lifestyle.
An Operating System for your city
Mike Swartz, Partner at Upstatement, a design and engineering studio in Boston, took on the challenge to smaller publications (such as his original hometown paper, the Pittsburgh Post-Gazette) which lack the resources of a Washington Post or New York Times.
Mike’s presentation, “information OS for a city: redefining the opportunity for local media,” turned the journalistic prowess of a good local paper into a superpower, connecting readers to their city the way the “terrible towel” stunt concocted in desperation by radio announcer Myron Cope in 1975 reconnected Pittsburghers to their hometown football team, and helped the Steelers win Super Bowl X over the Dallas Cowboys.
There’s a potential for an operation like the [Post Gazette] to rebrand itself as more of an “informational operating system” for its city. With different types of products that are focused and useful and not necessarily bundled into a traditional news format, we can create more enjoyable experiences and more useful products readers will love.
Building reader interest and finding a way to pay for it all
Where the rest of us avoided the elephant in the room, in her design Lucie Lacava, president of Lacava Design Inc., boldly confronted the challenges of advertising and monetization. Algorithm-driven advertising frustrates users, who, in desperation, block it. Choked for income as a result, publications and advertisers create more and more intrusive forms of unwanted advertising. Nobody wins.
And while subscription models have worked, at least partly, for some of the very top news publications, such models are not likely to help most news publications in the near term.
Digital publication as digital application
Lucie’s design addressed these challenges by recasting the news as a hyper-customized application targeted at younger users, who get to choose news streams and ads that are relevant to them. “The elusive millennial” was Lucie’s target. I cannot do her idea justice with a couple of paragraphs and a single screen shot.
Affordable, immersive VR is here
Jared Cocken, brand and product designer for hire and co-founder of STYLSH.co., approached the “attention war” by showing how any size publication could create “video or VR driven stories that enrich a user’s understanding of the world around them.”
Because VR video is immersive, it holds viewer attention. Because it is reality-based, it fights fake news. (It’s hard to call bullshit on a scene you can explore from any angle.) VR also, potentially, builds compassion. It’s one thing to read about conditions in a Syrian refugee camp, another to visually experience them in VR.
Until now VR and video have been cost-prohibitive, but, working (and co-presenting) with VR startup founder Anna Rose and Hollywood producer/actor Banks Boutté, Jared showed how even woefully under-financed newsrooms can use newly designed, super-affordable tools to create “video or VR-driven stories that enrich a user’s understanding of the world around them.”
Blogging about a conference is like tweeting about a sexual experience. You had to be there. I wanted to record and share the outlines of what my fellow designers presented, but these few paragraphs should in no way be considered authentically representative of the deep thinking and work that went into every presentation.
You may see holes in some of the arguments presented here. In some cases, I might agree with you—some ideas, while dazzlingly creative, did not seem to me like the right way to save news. But in most cases, if an idea seems wrong, blame my telling. If you had been there and heard and seen everything, the value of the proposal would have far more apparent than it can be here.
I love that each of us took on a quite different aspect of the problem, and addressed it using very different tools. I’ll be back soon with a short write-up of the design approach I took. Meanwhile, I want to thank all the pundits, designers, and attendees in New York and St. Petersburg—and the Poynter Institute, Roger Black, and William R. Hearst III for making it all possible.
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.
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.)
FROM THOSE WONDERFUL people who brought you Responsive Web Design, Design Is A Job, Mobile First, plus thirteen additional instant classics of web design and development, here come A Book Apart Briefs: even briefer books for people who make websites. Starting with the immediately useful and illuminating Get Ready For CSS Grid Layout by Rachel Andrew (foreword by Eric Meyer), and Pricing Design by Dan Mall (foreword by Mike Monteiro).
Web design is about multi-disciplinary mastery and laser focus, so we created A Book Apart to cover the emerging and essential topics in web design and development with style, clarity, and, above all, brevity. Every title in our catalog sheds clear light on a tricky subject, and fast, so you can get back to work.
With sixteen classics under our belt, and buoyed by your support over the years, today we take that mission one step further with our new, ebook-only guides to essential fundamentals, of-the-moment techniques, and deep nerdery.
There are no better writer/designers to present these topics. And there are no needless words to waste your time, because these are A Book Apart Briefs: same great writing, even more brief.
A Helvetica For Readers
ACUMIN by Robert Slimbach is a new type family from Adobe that does for book (and ebook) designers what Helvetica has always done for graphic designers. Namely, it provides a robust yet water-neutral sans-serif, in a full suite of weights and widths. And unlike the classic pressing of Helvetica that comes on everyone’s computers—but like Helvetica Neue—Acumin contains real italics for every weight and width.
Reading about the design challenges Slimbach set himself (and met) helps you appreciate this new type system, whose virtues are initially all too easy to overlook, because Acumin so successfully avoids bringing a personality to the table. Enjoying Acumin is like developing a taste for exceptionally good water.
Nick Sherman designed the website for Adobe, and its subtly brilliant features are as easy to miss at first look as Acumin’s. For starters, the style grid on the intro page dynamically chooses words to fit the column based on the viewport size. Resize your browser and you’ll see how the words change to fill the space.
Heaps of behind-the-scenes calculation allow the page to load all 90 (!) fonts without breaking your pipes or the internet. Developer Bram Stein is the wizard behind the page’s performance.
Nick uses progressively enhancedCSS3 Columns to create his responsive multi-column layout, incorporating subtle tricks like switching to a condensed font when the multi-column layout shrinks below a certain size. (This is something A List Apart used to do as well; we stopped because of performance concerns.) In browsers like IE9 and earlier, which do not support CSS3 Multiple Column specification, the layout defaults to a quite readable single column. Nick adds:
It’s the first time I’ve used responsive CSS columns for a real-world project. This was both frustrating and fun because the CSS properties for controlling widows and orphans are very far behind what’s possible in InDesign, etc. It also required more thinking about vertical media queries to prevent a situation where the user would have to scroll up and down to get from the bottom of one column to the top of the next. If the viewport is too short to allow for easy reading across columns, it stays as a single column.
We had to do some behind the scenes trickery in order to get the sliders to work for changing widths and weights. It’s a good way to allow people to type their own text and get a feeling for how the family can be used as a system for body text and headlines (unlike Helvetica, which is more limited to the middle range of sizes). Chris Lewis helped out a lot with getting this to work. It even works on a phone!
Book designers have long had access to great serif fonts dripping with character that were ideal for setting long passages of text. Now they have a well-made sans serif that’s as sturdy yet self-effacing as a waiter at a great restaurant. Congratulations to Robert Slimbach, Adobe, and the designers and developers mentioned or interviewed here. I look forward to seeing if Acumin makes it into new website designs (perhaps sharing some of Proxima Nova‘s lunch), especially among mature designers focused on creating readable experiences. And I pray Acumin makes its way into the next generation of ebook readers.
(Just me? In both iBooks and Kindle, I’m continually changing typefaces after reading any book for any period of time. All the current faces just call too much attention to themselves, making me aware that I am scanning text—which is rather like making filmgoers aware that they are watching projected images just when they should be losing themselves in the story.)