Ten Years Ago on the Web

2006 DOESN’T seem forever ago until I remember that we were tracking IE7 bugsworrying about the RSS feed validator, and viewing Drupal as an accessibility-and-web-standards-positive platform, at the time. Pundits were claiming bad design was good for the web (just as some still do). Joe Clark was critiquing WCAG 2. “An Inconvenient Truth” was playing in theaters, and many folks were surprised to learn that climate change was a thing.

I was writing the second edition of Designing With Web Standards. My daughter, who is about to turn twelve, was about to turn two. My dad suffered a heart attack. (Relax! Ten years later, he is still around and healthy.) A List Apart had just added a job board. “The revolution will be salaried,” we trumpeted.

Preparing for An Event Apart Atlanta, An Event Apart NYC, and An Event Apart Chicago (sponsored by Jewelboxing! RIP) consumed much of my time and energy. Attendees told us these were good shows, and they were, but you would not recognize them as AEA events today—they were much more homespun. “Hey, kids, let’s put on a show!” we used to joke. “My mom will sew the costumes and my dad will build the sets.” (It’s a quotation from a 1940s Andy Hardy movie, not a reflection of our personal views about gender roles.)

Jim Coudal, Jason Fried and I had just launched The Deck, an experiment in unobtrusive, discreet web advertising. Over the next ten years, the ad industry pointedly ignored our experiment, in favor of user tracking, popups, and other anti-patterns. Not entirely coincidentally, my studio had just redesigned the website of Advertising Age, the leading journal of the advertising profession.

Other sites we designed that year included Dictionary.com and Gnu Foods. We also worked on Ma.gnolia, a social bookmarking tool with well-thought-out features like Saved Copies (so you never lost a web page, even if it moved or went offline), Bookmark Ratings, Bookmark Privacy, and Groups. We designed the product for our client and developed many of its features. Rest in peace.

I was reading Adam Greenfield’s Everyware: The Dawning Age of Ubiquitous Computing, a delightfully written text that anticipated and suggested design rules and thinking for our present Internet of Things. It’s a fine book, and one I helped Adam bring to a good publisher. (Clearly, I was itching to break into publishing myself, which I would do with two partners a year or two afterwards.)

In short, it was a year like any other on this wonderful web of ours—full of sound and fury, true, but also rife with innovation and delight.


As part of An Event Apart’s A Decade Apart celebration—commemorating our first ten years as a design and development conference—we asked people we know and love what they were doing professionally ten years ago, in 2006. If you missed parts onetwothree, or four, have a look back.

 

 

Introducing studio.zeldman

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!

The Design

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:

  1. 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.
  2. 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.
  3. 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.)

Our thanks to the beta testers: Andrew Kirkpatrick (above and beyond the call of duty on matters of web accessibility), Rachel Andrew, Jen Simmons again, Anna Debenham, Jeremy Seitz, and Nicholas Frota. And to Anil Dash, Jessica Hische, Jessica Helfand, and Khoi Vinh, who gave us design feedback prior to launch.

Most of all, thanks to the “Royal Advisors” who put up with my endless changes of mind, and who always acted as if they were pleased to check out my newest brainstorm, or listen to my latest circular argument: Sarah Parmenter, Jason Fried, Fred Gates, Jen Simmons, and Mike Pick.

A Book Apart Briefs!

Introducing A Book Apart Briefs–even briefer books for people who make websites.

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.

As A Book Apart co-founder and publisher, it actually thrills me to bring you the pricing guide our business has needed since forever, by Superfriends founder Dan Mall; and the easily understandable guide to the next generation of CSS layout, by the super-talented and incredibly brilliant Perch co-founder Rachel Andrew.

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.

Dig in!

Front-end devs, An Event Apart is hiring.

An Event ApartAN EVENT APART, the design conference for people who make websites, seeks a freelance, part-time, front-end developer to work with our web designer, creative director, and project manager on ongoing design and UX improvements to our site at aneventapart.com.

You have a mastery of HTML, CSS (including Flexbox), and JavaScript. You’re a thinker who cares about good user experience and knows that the smallest design details matter. Progressive enhancement is your bread; mobile-first responsive design is your butter. Sweating web performance details is your idea of Saturday night; arguing the semantics of blockquote, your idea of Heaven.

For details, and to apply, see our listing on weworkremotely.com.

Job Hunting For Web Designers

Stagnation is fine for some jobs—when I was a dishwasher at The Earth Kitchen vegetarian restaurant, I enjoyed shutting off my brain and focusing on the rhythmic scrubbing of burnt pans, the slosh and swirl of peas and carrots in a soapy drain—but professionals, particularly web professionals, are either learning and growing or, like the love between Annie Hall and Alvy Singer, becoming a dead shark. If you’ve stopped learning on the job, it’s past time to look around.

Source: If Ever I Should Leave You: Job Hunting For Web Designers and Developers · An A List Apart Column

A List Apart № 421 Gets Personal

A List Apart Issue No. 421

THERE’S GREAT reading for people who make websites in Issue No. 421 of A List Apart:

Resetting Agency Culture

by Justin Dauer

Forget Air Hockey, Zen Gardens, and sleep pods: a true “dream” company invests in its people—fostering a workplace that supports dialogue, collaboration, and professional development. From onboarding new hires to ongoing engagement, Justin Dauer shares starting points for a healthy office dynamic and confident, happy employees.


Crafting a Design Persona

by Meg Dickey-Kurdziolek

Every product has a personality—is yours by design? Meg Dickey-Kurdziolek shows you how Weather Underground solved its personality problems by creating a design persona, and teaches you collaborative methods for starting a personality adjustment in your company.


Design Is A Relationship

Mike Monteiro

MIKE MONTEIRO is a man on a mission. He wants to improve design by fixing the core of it, which is the relationship between designer and client. Too many of us fear our clients—the people whose money keeps our lights on, and who hire us to solve business problems they can’t solve for themselves. And too many clients are even more frustrated and puzzled by their designers than the designers are by the clients.

It’s the designer’s job to fix this, which is why Mike first wrote Design Is A Job, and spent two years taking the message into conference halls and meeting rooms from New Zealand to New York.

I wish every designer could read this book. I can’t tell you how many friends of mine—many of whom I consider far better designers than I am—struggle every day with terrible anxieties over how a client will react to their work. And the problem isn’t limited to web and interaction designers. Anybody who designs anything burns cycles in fear and acrimony. I too waste hours worrying about the client’s reaction—but a dip into Mike’s first book relaxes me like a warm milk bath, and reminds me that collaboration and persuasion are the essence of my craft and well within my power to execute.

If the designer’s side of things were the only part of the problem Mike had addressed, it would be enough. But there is more:

  • Next Mike will help clients understand what they should expect from a designer and learn how to hire one they can work with. How he will do that is still a secret—although folks attending An Event Apart San Francisco this week will get a clue.
  • Design education is the third leg of the chair, and once he has spread his message to clients, Mike intends to fix that or die trying. As Mike sees it (and I agree) too many design programs turn out students who can defend their work in an academic critique session among their peers, but have no idea how to talk to clients and no comprehension of their problems. We are creating a generation of skilled and talented but only semi-employable designers—designers who, unless they have the luck to learn what their expensive education didn’t teach them, will have miserably frustrating careers and turn out sub-par work that doesn’t solve their clients’ problems.

We web and interaction designers are always seeking to understand our user, and to solve the user’s problems with empathy and compassion. Perhaps we should start with the user who hires us.

Think Outside The Silo

IN TODAY’S A List Apart for people who make websites, we are pleased to present…

Designing for Services Beyond the Screen

by ANDY POLAINE

You redesign the website for an airline, but who is designing the check-in machines, the CRM systems used by call center staff, the print materials, or the policies the cabin crew must adhere to? Like it or not, these channels are part of the overall user experience. Your website or mobile app might be great on its own, but customers experience services in totality, and base their judgments on how well everything works together. Learn to design beyond the screen. By creating visual and tangible artifacts that can be experienced and tested, you can build a bridge between business and design.

Don’t Poke the Bear: Creating Content for Sensitive Situations

by KATE KIEFER LEE

Delivering bad news is hard, but it’s part of life and business. We notify customers when we’re out of a product they want to buy, and we send warnings when people violate our companies’ terms of service. God forbid we have to send a system alert because our database was hacked, affecting every one of our users. But these things happen to the best of us. Can you be the bearer of bad news in a way that respects your customers? Learn how to create empathetic content for tricky situations, and shape your internal culture to foster human values of support, respect, and empathy.


Illustration: Kevin Cornell

Coastermatic’s Tash Wong and Tom Harman on The Big Web Show Episode No. 92

Tash Wong and Tom Harman, co-founders of Coastermatic.

AMERICAN DESIGNER Tash Wong and British designer Tom Harman are the co-founders of Coastermatic and my guests in Episode No. 92 of The Big Web Show (“everything web that matters”).

Tash and Tom recently resided in Brooklyn, NY and completed their MFAs in Interaction Design at New York’s School of Visual Arts, where I was one of their admiring teachers; they are now bound for Hawaii, where they will expand their web-based product empire. Coastermatic, their first joint product, converts your Instagram photos into stone coasters, and was conceived during their time at SVA. (More in the August 2, 2012 issue of Dwell.)

In a fast-paced hour-long podcast, we discuss design, product, and business strategy; finding the right manufacturing and fulfillment partners; the division of labor in a small startup; and other juicy UX and entrepreneurial topics.

Enjoy Episode No. 92 of The Big Web Show.

Adobe Love

I CAME to AdobeMAX in Los Angeles to give a talk to a room full of designers. Before arriving, I thought of Adobe as a historically important 20th century company that was slowly leaking relevance—a company web designers in the era of responsive design have begun to think of with a combination of fondness and embarrassment, like a beloved but somewhat shameful old uncle.

I came to LA with those perceptions, but I leave with the impression of an exciting 21st century company in emergence.

Realistic products for a magical age

The products I saw were both amazing and realistic. It was amazing to see a responsive design prototyping application that works independently and inside Photoshop, created by passionate people who actually work in our field and who consulted with Ethan Marcotte, for Pete’s sake.

That was the amazing part, but the equally important realistic part was that nobody was pretending this tool would be used to deliver final code on your website. It was not a responsive Dreamweaver I saw, but a prototyping tool, to help designers figure out how their responsive design should work (and maybe show the prototype to a boss or client for approval). Just prototyping. Nobody pretending they had a product that would make the difficult craft of front-end design redundant. No such intention behind the product. A product for the real work-flow of 21st century design teams. No marketing puffery, no inflated claims to set designers’ teeth on edge.

We are now them

More than that. Every Adobe employee I saw seemed to be excited, happy, and on-board with the mission. I see that kind of energy at good startups and small studios. I never see it in big corporations. It sometimes seemed to me that Adobe hadn’t so much acquired Typekit as the reverse: that the people and thinking behind Typekit are now running Adobe (which is actually true), and that the mindset of some of the smartest consultants and designers in our industry is now driving a huge corporation.

I never expected to see that in my lifetime, and to me, it is even more impressive than the amazingness and realism of the new product line or the transformation of the company from a shrink-wrapped product manufacturer to an inventor of cloud-based services. I never expected to see people like us running companies like that.

It makes me feel good about the future, when so many other things conspire to make us feel the opposite.