Web Design Manifesto 2012

THANK YOU for the screen shot. I was actually already aware that the type on my site is big. I designed it that way. And while I’m grateful for your kind desire to help me, I actually do know how the site looks in a browser with default settings on a desktop computer. I am fortunate enough to own a desktop computer. Moreover, I work in a design studio where we have several of them.

This is my personal site. There are many like it, but this one is mine. Designers with personal sites should experiment with new layout models when they can. Before I got busy with one thing and another, I used to redesign this site practically every other week. Sometimes the designs experimented with pitifully low contrast. Other times the type was absurdly small. I experimented with the technology that’s used to create web layouts, and with various notions of web “page” design and content presentation. I’m still doing that, I just don’t get to do it as often.

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind—although nobody until you has suggested I simply didn’t have access to a computer and therefore didn’t know what I was designing. This design may be good, bad, or indifferent but it is not accidental.

A few people who hate this design have asked if I’ve heard of responsive web design. I have indeed. I was there when Ethan Marcotte invented it, I published his ground-breaking article (and, later, his book, which I read in draft half a dozen times and which I still turn to for reference and pleasure), and I’ve had the privilege of seeing Ethan lecture and lead workshops on the topic about 40 times over the past three years. We’ve incorporated responsive design in our studio’s practice, and I’ve talked about it myself on various stages in three countries. I’m even using elements of it in this design, although you’d have to view source and think hard to understand how, and I don’t feel like explaining that part yet.

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)

This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful. How can passages set in Georgia and headlines in Franklin be anything but beautiful? I love seeing my words this big. It encourages me to write better and more often.

If this were a client site, I wouldn’t push the boundaries this far. If this were a client site, I’d worry that maybe a third of the initial responses to the redesign were negative. Hell, let’s get real: if this were a client site, I wouldn’t have removed as much secondary functionality and I certainly wouldn’t have set the type this big. But this is my personal site. There are many like it, but this one is mine. And on this one, I get to try designs that are idea-driven and make statements. On this one, I get to flounder and occasionally flop. If this design turns out to be a hideous mistake, I’ll probably eventually realize that and change it. (It’s going to change eventually, anyway. This is the web. No design is for the ages, not even Douglas Bowman’s great Minima.)

But for right now, I don’t think this design is a mistake. I think it is a harbinger. We can’t keep designing as we used to if we want people to engage with our content. We can’t keep charging for ads that our layouts train readers to ignore. We can’t focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer.

Most of you reading this already know these things and already think about them each time you’re asked to create a new digital experience. But even our best clients can sometimes push back, and even our most thrilling projects typically contain some element of compromise. A personal site is where you don’t have to compromise. Even if you lose some readers. Even if some people hate what you’ve done. Even if others wonder why you aren’t doing what everyone else who knows what’s what is doing.

I don’t think you will see much type quite this big but I do think you will see more single-column sites with bigger type coming soon to a desktop and device near you. For a certain kind of content, bigger type and a simpler layout just make sense, regardless of screen size. You don’t even have to use Typekit or its brothers to experiment with big type (awesome as those services are). In today’s monitors and operating systems, yesterday’s classic web fonts—the ones that come with most everyone’s computer—can look pretty danged gorgeous at large sizes. Try tired old Times New Roman. You might be surprised.

The present day designer refuses to die.


The Unbearable Lightness of HTML5 – or, the priority of constituencies versus the great dictator

LET’S DIG A BIT DEEPER into the latest conflict between web developers who are passionate about the future of HTML, and the WHATWG. (See Mat Marquis in Tuesday’s A List Apart, Responsive Images and Web Standards at the Turning Point, for context, and Jeremy Keith, Secret Src in Wednesday’s adactio.com, for additional clarification.)

The WHATWG was created to serve browser makers, while its product, HTML5, was designed to serve users first, designers (authors) next, browser makers (implementors) last according to the priority of constituencies, which is one of its founding design principles.

There is a tension between this principle of HTML5 (to serve users above designers above browser makers) and the reality of who is the master: namely, browser makers – especially Google, which pays Hixie, the editor of HTML5, his salary. That’s not a knock on Hixie (or Google), it’s just the reality.

One way the tension between principle and reality plays out is in not uncommon incidents like the one we’re reacting to now. According to the priority of constituencies, designer/developer feedback should be welcomed, if not outright solicited. In principle, if there is conflict between what designer/developers advise and what browser makers advise, priority should be given to the advice of designer/developers. After all, their needs matter more according to the priority of constituencies — and designer/developers are closer to the end-user (whose needs matter most) than are browser makers.

Solicitiation of and respect for the ideas of people who actually make websites for a living is what would happen if the HTML5-making activity had been organized according to its own priority of constituencies principle; but that kind of organization (committee organization) echoes the structure of the W3C, and the WHATWG arose largely because browser makers had grown unhappy with some aspects of working within the W3C. In reality, there is one “decider” — the editor of HTML5, Ian Hickson. His decisions are final, he is under no obligation to explain his rationales, and he need not prioritize developer recommendations above a browser maker’s — nor above a sandwich maker’s, if it comes to that. By design, Hixie is a free agent according to the structure he himself created, and his browser maker end-users (masters?) like it that way.

They like it that way because stuff gets done. In a way, browser makers are not unlike web developers, eager to implement a list of requirements. We designer/developers don’t like waiting around while an indecisive client endlessly ponders project requirements, right? Well, neither do browser makers. Just like us, they have people on payroll, ready to implement what the client requires. They can’t afford to sit around twiddling their digits any more than we can. In 2007, the entire world economy nearly collapsed. It is still recovering. Don’t expect any surviving business to emulate a country club soon.

So, has this latest friction brought us to a tipping point? Will anything change?

In theory, if we are frustrated with Mr Hickson’s arbitrary dictates or feel that they are wrong, we can take our ideas and our grievances to the W3C, who work on HTML5 in parallel with the WHATWG. We should probably try that, although I tend to think things will continue to work as they do now. The only other way things could change is if Hixie wakes up one morning and decides benevolent dictator is no longer a role he wishes to play. If I were in charge of the future of the web’s markup language, with not just final cut but every cut, I’m not sure I’d have the courage to rethink my role or give some of my power away. But perhaps I underestimate myself. And perhaps Hixie will consider the experiment.

My Glamorous Life: The Power Compels You

I DREAMED that my friend Jason Santa Maria took a job at a popular new startup that had exploded onto the world scene seemingly overnight. A fascinating visual interface was largely responsible for the popularity of the company’s new social software product. It was like a Hypercard stack that came toward you. A post full of exciting social significance just for you would appear in a self-contained deck with rounded corners. The next post would pop up on top of the first. The next, on top of that one. And so on. In my dream, people found this back-to-front pop-up effect thrilling for some reason.

Having imagined the interface, I next dreamed that I went to visit the startup. There were so many cubicles, so many shiny people running around, holding morning standups and singing a strange company song, that I could not locate my friend Jason’s desk. Someone grabbed me and told me the founder wanted to see me.


THE FOUNDER was an ordinary looking white guy in his late twenties. I was surprised that he wore beige chinos with a permapress crease. With all the TV and newspaper hubub around his product, I guess I’d expected a more stylish and charismatic presence.

The founder told me he was concerned because his mother, apparently a cofounder or at least an officer of the company, was of the belief that I had contempt for their product and disliked her personally. I assured him that I liked the product. Further, I had never met his mother, never read or heard a word about her, and felt only goodwill toward her, as I bear toward all people in the abstract. I don’t hate people I don’t know.

“It would be cool if you told mom that yourself,” he said. And suddenly two assistants were whisking me off to speak to her directly.


THE AUDITORIUM-SIZED waiting room outside the founder’s mother’s office was filled with at least a thousand people who had come to talk to her before me. They seemed to have been waiting for hours. There was an air of boredom and rapidly thinning patience, mixed with excitement and the kind of carnival atmosphere that surrounds things that blow up suddenly in the press. It felt like the jury selection room for a celebrity murder case. Only much, much bigger.

The two assistants escorted me to the very front of the auditorium, to an empty row of seats abutting the door to the founder’s mother’s private office. “Special treatment,” I thought. I was thrilled to be cutting to the front of the line, apparently as a result of the founder’s directive to his assistants. The front row chairs were reversed, facing back to the rest of the auditorium, so I was put in the somewhat uneasy position of staring out at the mass of people who had been waiting to see the founder’s mother since long before I arrived.

After a while, Ian Jacobs of the W3C was brought to the front of the room and seated near me.

We waited as other people were shown into the founder’s mother’s presence.


AFTER FIVE or six hours of drowsy waiting, I realized that the room was set up to mirror the software’s interface: people from the very back of the auditorium were first in line, and were shown into the founder’s mother’s presence first. Gradually, the hall of applicants emptied from the back to the front. Those of us in the very front of the line were actually the last people of all who would be admitted to the holy presence. It was a smart marketing touch that apparently permeated the company: everything real people did in the building in some way echoed the characteristics of the software interface — from the end of the line coming first, to the way the rounded conference tables echoed the shapes of individual news posts in the software’s back-to-front news deck.

What a smart company, I thought. And what a good joke on me, as I continued to sit there forever, waiting to see someone I’d never met, who held a baseless grudge against me, which it would one day be my task to talk her out of.

Selling Design – an online reading list

TOMORROW, WHICH IS also my birthday, I begin teaching “Selling Design” to second-year students in the MFA Interaction Design program at School of Visual Arts, New York. Liz Danzico and Steve Heller created and direct the MFA program, and this is my second year teaching this class, whose curriculum I pull out of my little blue beanie.

In this class we explore collaboration and persuasion for interaction designers. Whether you work in a startup, studio, or traditional company; whether you design print, products, purely digital experiences, or any combination thereof; whether you’re the sole proprietor, part of a tightly focused team, or a link in a long chain of connected professionals, it is only by collaborating skillfully with others—and persuading them tactfully and convincingly when points of view differ and yours is right—that you can hope to create designs that make a dent in the universe.

During this spring semester, we’ll explore collaboration and persuasion from many points of view, and hear from (and interact with) many accomplished designers who will serve as special guest speakers. For our opening get-acquainted session, we’ll focus on texts that explore the some of the most basic, traditional (and rarely taught) aspects of design professionalism from the worlds of web, interaction, and print design:

Demystifying Design

by Jeff Gothelf – A List Apart

  1. Draw together
  2. Show raw work (frequently)
  3. Teach the discipline
  4. Be transparent
  5. Take credit for your wins

Design Criticism and the Creative Process

by Cassie McDaniel – A List Apart

  • Critique as collaborative tool
  • Presenting designs
  • What is good feedback?
  • Negotiate criticism
  • The designer as collaborator

Personality in Design

by Aarron Walter – A List Apart

  • Personality is the platform for emotion
  • A history of personality in design
  • Personas
  • Creating a design persona for your website [or other project]
  • Tapbots: Robot love
  • Caronmade: octopi, unicorns, and mustachios
  • Housing Works: a name with a face
  • The power of personality

Design Professionalism

by Andy Rutledge

You should read this entire brief book, but for now, sample these bits:

Do You Suck at Selling Your Ideas?

by Sam Harrison – HOW Magazine

Dyson is used as an example of a product that currently dominates the market, even though nobody initially believed in the inventor’s idea. Lessons:

  1. Tell a personal story
  2. Create emotional experiences for decision makers
  3. See what’s behind rejections

How to sell your design effectively to the client

by Arfa Mirza, Smashing Magazine

  1. Understand the nature of your client
  2. Have a rationale for every part of your design
  3. Show the best design options only
  4. Defend your design, but don’t become defensive
  5. Solicit good feedback and benefit from it

Money: How to sell the value of design – an email conversation

by Jacob Cass – Just Creative

Narrative of standing up to new-client pressure to do something against the designer’s self-interest, or which devalues design. Story told here is about money but it could be about any designer/client conflict in which the designer needs to gently educate the client. (Some designer/client conflicts require the client to educate the designer, but that’s another matter.)

How to choose a logo designer

by Jacob Cass – Just Creative

Basic article outlines ten background materials any designer (not just logo designers) should prepare to encourage confidence on the client’s part:

  1. Experience
  2. Positive testimonials
  3. A thorough design process
  4. Awards won/published work
  5. A strong portfolio
  6. Price
  7. Design affiliations
  8. Great customer service
  9. Business Professionalism
  10. Appropriate questions

Advanced web design links

FROM MY TWITTER STREAM of late:

Okay, that last one isn’t a web design link and the Apple comment could go either way, but that’s how I roll. Follow me on Twitter for more snarkeractive funucation!

An Event Apart Atlanta 2011

YOU FIND ME ENSCONCED in the fabulous Buckhead, Atlanta Intercontinental Hotel, preparing to unleash An Event Apart Atlanta 2011, three days of design, code, and content strategy for people who make websites. Eric Meyer and I co-founded our traveling web conference in December, 2005; in 2006 we chose Atlanta for our second event, and it was the worst show we’ve ever done. We hosted at Turner Field, not realizing that half the audience would be forced to crane their necks around pillars if they wanted to see our speakers or the screen on which slides were projected.

Also not realizing that Turner Field’s promised contractual ability to deliver Wi-Fi was more theoretical than factual: the venue’s A/V guy spent the entire show trying to get an internet connection going. You could watch audience members twitchily check their laptops for email every fourteen seconds, then make the “no internet” face that is not unlike the face addicts make when the crack dealer is late, then check their laptops again.

The food was good, our speakers (including local hero Todd Dominey) had wise lessons to impart, and most attendees had a pretty good time, but Eric and I still shudder to remember everything that went wrong with that gig.

Not to jinx anything, but times have changed. We are now a major three-day event, thanks to a kick-ass staff and the wonderful community that has made this show its home. We thank you from the bottoms of our big grateful hearts.

I will see several hundred of you for the next three days. Those not attending may follow along:

16 years online

ON MAY 31, 2011, this website turned sixteen years old. Thank you for indulging me. (And thanks to Sean M. Hall for reminding me.)

Here is a reflection written when the site turned 13.

And here, from 2007, is a mini-retrospective of The Daily Report beginning with 31 August 1997 (entries from 1995–1996 are gone due to overwriting), and continuing through years of constant writing and strange design such as daily/0303a.shtml, daily/0103a.shtml, and daily/0902b.html. (Of course to really see these pages as the world saw them then, you’d need a non-antialiased operating system, a non-standards-compliant browser, and a dingy TV tube monitor. But I digress.)

More of this site’s juicy Web 1.0 goodness may be unearthed here.

If you like, you can also peruse a small gallery of my article header images from the early days of A List Apart Magazine.

Here’s to plenty more years ahead, inventing the web and modern design together.

HTML5, CSS3, UX, Design: Links from An Event Apart Boston 2011

Meeting of the Minds: Ethan Marcotte and AEA attendee discuss the wonders of CSS3. Photo by the incomparable Jim Heid.

Meeting of the Minds: Ethan Marcotte and AEA attendee discuss the wonders of CSS3. Photo by the incomparable Jim Heid.

THE SHOW IS OVER, but the memories, write-ups, demos, and links remain. Enjoy!

An Event Apart Boston 2011 group photo pool

Speakers, attendees, parties, and the wonders of Boston, captured by those who were there.

What Every Designer Should Know (a)

Jeremy Keith quite effectively live-blogs my opening keynote on the particular opportunities of Now in the field of web design, and the skills every designer needs to capitalize on the moment and make great things.

The Password Anti-Pattern

Related to my talk: Jeremy Keith’s original write-up on a notorious but all-too-common practice. If your boss or client tells you to design this pattern, just say no. Design that does not serve users does not serve business.

What Every Designer Should Know (b)

“In his opening keynote … Jeffrey Zeldman talked about the skills and opportunities that should be top of mind for everyone designing on the Web today.” Luke Wroblewski’s write-up.

Whitney Hess: Design Principles — The Philosophy of UX

“As a consultant, [Whitney] spends a lot of time talking about UX and inevitably, the talk turns to deliverables and process but really we should be establishing a philosophy about how to treat people, in the same way that visual design is about establishing a philosophy about how make an impact. Visual design has principles to achieve that: contrast, emphasis, balance, proportion, rhythm, movement, texture, harmony and unity.” In this talk, Whitney proposed a set of 10 principles for UX design.

Veerle Pieters: The Experimental Zone

Live blogging by Jeremy Keith. Veerle, a noted graphic and interaction designer from Belgium, shared her process for discovering design through iteration and experimentation.

Luke Wroblewski: Mobile Web Design Moves

Luke’s live awesomeness cannot be captured in dead written words, but Mr Keith does a splendid job of quickly sketching many of the leading ideas in this key AEA 2011 talk.

See also: funky dance moves with Luke Wroblewski, a very short video I captured as Luke led the crowd in the opening moves of Michael Jackson’s “Thriller.”

Ethan Marcotte: The Responsive Designer’s Workflow (a)

“The next talk here at An Event Apart in Boston is one I’ve really, really, really been looking forward to: it’s a presentation by my hero Ethan Marcotte.”

Ethan Marcotte: The Responsive Designer’s Workflow (b)

Ethan’s amazing talk—a key aspect of design in 2011 and AEA session of note—as captured by the great Luke Wroblewski.

An Event Apart: The Secret Lives of Links—Jared Spool

“In his presentation at An Event Apart in Boston, MA 2011 Jared Spool detailed the importance and role of links on Web pages.” No writer can capture Jared Spool’s engaging personality or the quips that produce raucous laughter throughout his sessions, but Luke does an outstanding job of noting the primary ideas Jared shares in this riveting and highly useful UX session.

An Event Apart: All Our Yesterdays—Jeremy Keith

Luke W: “In his All Our Yesterdays presentation at An Event Apart in Boston, MA 2011 Jeremy Keith outlined the problem of digital preservation on the Web and provided some strategies for taking a long term view of our Web pages.”

Although it is hard to pick highlights among such great speakers and topics, this talk was a highlight for me. As in, it blew my mind. Several people said it should be a TED talk.

An Event Apart: From Idea to Interface—Aarron Walter

Luke: “In his Idea to Interface presentation at An Event Apart in Boston, MA 2011 Aarron Walter encouraged Web designers and developers to tackle their personal projects by walking through examples and ways to jump in. Here are my notes from his talk.”

Links and Resources from “From Idea to Interface”

Compiled by the speaker, links include Design Personas Template and Example, the story behind the illustrations in the presentation created by Mike Rhode, Dribble, Huffduffer, Sketchboards, Mustache for inserting data into your prototypes, Keynote Kung Fu, Mocking Bird, Yahoo Design Patterns, MailChimp Design Pattern Library, Object Oriented CSS by Nicole Sullivan and more!

An Event Apart: CSS3 Animations—Andy Clarke

“In his Smoke Gets In Your Eyes presentation at An Event Apart in Boston, MA 2011 Andy Clarke showcased what is possible with CSS3 animations using transitions and transforms in the WebKit browser.” Write-up by the legendary Luke Wroblewski.

Madmanimation

The “Mad Men” opening titles re-created entirely in CSS3 animation. (Currently requires Webkit browser, e.g. Safari, Chrome.)

CSS3 Animation List

Anthony Calzadilla, a key collaborator on the Mad Men CSS3 animation, showcases his works.

Box Shadow Curl

Pure CSS3 box-shadow page curl effect. Mentioned during Ethan Marcotte’s Day 3 session on exploring CSS3.

Multiple CSS Transition Durations

Fascinating article by Anton Peck (who attended the show). Proposed: a solution to a key problem with CSS transitions. (“Even now, my main issue with transitions is that they use the same time-length value for the inbound effect as they do the outbound. For example, when you create a transition on an image with a 1-second duration, you get that length of time for both mousing over, and mousing away from the object. This type of behavior should be avoided, for the sake of the end-user!”)

Everything You Wanted to Know About CSS3 Gradients

Ethan Marcotte: “Hello. I am here to discuss CSS3 gradients. Because, let’s face it, what the web really needed was more gradients.”

Ultimate CSS3 Gradient Generator

Like it says.

Linear Gradients Generator

By the incomparable John Allsopp.

These sessions were not captured

Some of our best talks were not captured by note-takers, at least not to my knowledge. They include:

  1. Eric Meyer: CSS Anarchist’s Cookbook
  2. Mark Boulton: Outing the Mind: Designing Layouts That Think for You
  3. Jeff Veen: Disaster, DNA, and the Fathomless Depth of the Web

It’s possible that the special nature of these presentations made them impossible to capture in session notes. (You had to be there.)

There are also no notes on the two half-day workshop sessions, “Understand HTML5 With Jeremy Keith,” and “Explore CSS3 With Ethan Marcotte.”

What have I missed?

Attendees and followers, below please add the URLs of related educational links, write-ups, and tools I’ve missed here. Thanks!

Our Jobs In Cyberspace: Craft Vocabulary vs. Storytelling

AFTER ALL THESE YEARS designing websites and applications, I still don’t think in words like “affordance.” And when my colleagues use a word like that, my mental process still clatters to a halt while I seek its meaning in a dusty corner of my brain. (When someone says “affordance,” there’s always a blank where thought stops, and then I see a mental image of a finger pushing a button or stroking a surface. Somehow that one image stands in for everything I know about what “affordance” means, and I’m able to jump back into the discussion and catch up with everyone else.)

Should you ask B.B. King if the lick he just played was in Lydian Mode, he could probably answer you after stopping to think about it. But after all these years playing blues guitar, B.B. King doesn’t say to himself, “I’m going to switch to a Lydian scale here,” he just plays blues. Scales and vocabulary are necessary when we are learning the craft behind our art. But the longer we practice, the more intuitive our work becomes. And as it becomes more intuitive, it disconnects further and further from language and constructs.

This is why young practitioners often argue passionately about theory while older practitioners tell stories and draw pictures.

Of course any practitioner, green or experienced, can create a word to describe the work we are inventing together, just as anyone, young or old, can have the next great idea. And it is most often the young who come up with exciting new ideas in UX and design and on the internet—possibly because they are still exploring theories and trying on identities, while those who work more intuitively may shut themselves off from the noise of new ideas, the better to perfect a long-term vision.

But the nice thing about the experience arc I’m proposing is that it allows younger practitioners to use words like “affordance” when working together to create a website or application (and soon we will stop distinguishing between those two things), while the older, storyteller practitioners use simpler, down-to-earth language to sell the work to clients, investors, or users.

We need both kinds of practitioners—theorists and those for whom everything has become intuitive second nature—just as we need both kinds of communication (craft vocabulary and storytelling) to do Our Jobs in Cyberspace.™ Don’t you think?

Where are you on this arc? Are you the kind of designer who gets fired up from reading a new theory? Or do you sketch and stumble in the dark, guided only by some Tinker Bell twinge in the belly that tells you no, no, no, no, hmm, maybe?