Zeldman Quarterly No. 1

ZEL01

#ZEL01, MY FIRST CURATED gift for Quarterly subscribers, has dropped. It contains a book of classic Blue Note jazz LP record cover designs, a jazz LP record (each recipient gets a different one), a framed Mondrian print inspired by that artist’s first encounter with jazz, and a letter from me telling the story behind the gift box.

ZEL01 is all about constraints, a topic close to my heart. When I began designing websites, we had four fonts, one language (HTML), and 16 colors to play with. It wasn’t much … only enough to make magic.

The gifts in ZEL01 exemplify the magic of constraint, reflected through the lens of jazz: from Reid Miles’s two-font, one-spot-color album cover designs for Blue Note records—classics we still turn to for inspiration, more than 50 years after their release—to Piet Mondrian’s jazz- and street-grid-inspired “Broadway Boogie Woogie,” spun from right angles and primary colors.

Thanks to Nora Johnson and her staff at Quarterly for indulging my curatorial whims, and to you early subscribers for believing. I hope you like the package. Another gift comes soon.

There are still four weeks left to subscribe to ZEL02 and future gift packages.

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.


Redesigning in Public Again

I FINALLY GOT A COUPLE OF HOURS free, enabling me to do something I’ve been itching to try since I first saw the web on a modern mobile device: redesign this website.

First I cranked up the type size. With glorious web fonts and today’s displays, why not?

Then I ditched the sidebar. Multiple columns are so 1990s.

This site has always been about content first. But the layout was a holdover from the days when inverted L shapes dotted the cyber landscape; when men were men, and all websites bragged two columns, laid out with table cells as the Lord intended.

The previous redesign deliberately hearkened back to the old, old days of this site. It was fun (even if I was the only one who got the joke). But my journey down Retro Lane coincided unfortunately with the first big news in web design since the anchor tag (mobile-first, content-first, responsive, etc). Today’s little design exercise here redresses all that.

This is not a finished work. I may make some things squeeze-y that are now rock-hard. I might lock the viewport and play with padding and things. But the site is now much closer to where I’ve wanted it for the past two years.

Page backward, if you wish, to see how it rolls out so far.


Thanks to Tim Murtaugh, who helped me debug more than one maddening straggler.

The maker makes: on design, community, and personal empowerment

THE FIRST THING I got about the web was its ability to empower the maker. The year was 1995, and I was tinkering at my first website. The medium was raw and ugly, like a forceps baby; yet even in its blind, howling state, it made me a writer, a designer, and a publisher — ambitions which had eluded me during more than a decade of underachieving desert wanderings.

I say “it made me” but I made it, too. You get the power by using it. Nobody confers it on you.

I also got that the power was not for me alone: it was conferred in equal measure on everyone with whom I worked, although not everyone would have the time or desire to use the power fully.

The luckiest makers

Empowerment and desire. It takes extraordinary commitment, luck, and talent to become a maker in, say, music or film, because the production and distribution costs and risks in these fields almost always demand rich outside investors and tightly controlling corporate structures. (Film has held up better than music under these conditions.)

Music and film fill my life, and, from afar, I love many artists involved in these enterprises. But they are mostly closed to you and me, where the web is wide open, and always has been. We all know gifted, hard working musicians who deserve wide acclaim but do not receive it, even after decades of toil. The web is far kinder to makers.

To care is to share

Not only does the web make publishers of those willing to put in the work, it also makes most of us free sharers of our hard-won trade, craft, and business secrets. The minute we grab hold of a new angle on design, interaction, code, or content, we share it with a friend — or with friends we haven’t met yet. This sharing started in news groups and message boards, and flowered on what came to be called blogs, but it can also slip the bounds of its containing medium, empowering makers to create books, meet-ups, magazines, conferences, products, you name it. It is tough to break into traditional book publishing the normal way but comparatively easy to do it from the web, provided you have put in the early work of community building.

The beauty is that the community building doesn’t feel like work; it feels like goofing off with your friends (because, mostly, it is). You don’t have to turn your readers into customers. Indeed, if you feel like you’re turning your readers into customers, you’re doing it wrong.

If you see a chance, take it

The corollary to all this empowerment is that it’s up to each of us to do something positive with it. I sometimes become impatient when members of our community spend their energy publicly lamenting that a website about cats isn’t about dogs. Their energy would be so much better spent starting bow-wow.com. The feeling that something is missing from a beloved online resource (or conference, or product) can be a wonderful motivator to start your own. I created A List Apart because I felt that webmonkey.com wasn’t enough about design and highfive.com was too much about it. If this porridge is too hot and that porridge is too cold, I better make some fresh, eh?

I apologize if I sometimes seem snippy with whiners. My goal is never to make anyone feel bad, especially not anyone in this community. My message to my peers since the days of “Ask Dr Web” has always been: “you can do this! Go do it.” That is still what I say to you all.

A Better Franklin

I’VE TWEAKED the layout here with ITC Franklin Condensed from Webtype.

It’s funny. My daughter always asks what’s my favorite color, and I can never answer, ’cause I love them all. With color, it depends on context and it’s all about combination. But a favorite font? You bet I’ve got one. It’s Franklin Gothic, and especially Franklin Gothic Condensed. Has been for years.

For several years now I’ve used a licensed Franklin Gothic web font by someone other than Webtype here. It was good but not perfect.

Webtype’s Franklin Condensed is as close to perfect as web fonts can come in October, 2011. (And as they improve it, the look and feel here will improve as well.) The font is so good that it emboldened me to apply it to other parts of the page that formerly had to make do with Helvetica. See, for instance, my footer. It’s not a work of art, but it’s now much more pleasant to read in every environment I’ve tested.

I’m still conservative about web fonts (primarily because of bandwidth issues); this site’s body text is still set in Georgia, one of the world’s most beautiful screen fonts as we all agree. This morning, simply to break away from the herd, I tried replacing Georgia with Palatino, an engaging, readable, widely available font that comes with Windows 2000/XP (“Palatino Linotype”) and the Macintosh (“Palatino”). On its own, the Palatino was lovely. But it couldn’t stand up to the heavier elements of this site’s somewhat cartoonish look and feel. So back to Georgia I went.

The site is overdue for a redesign: the last redesign (e.g. the current look and feel) was a retro tribute to the site’s 1990s look. A new look is coming, but for the interim, I’m grateful to my friends at Webtype for their craftsmanship.

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.

Webvanta Video: Jeffrey Zeldman on the State of Web Design

From the floor of An Event Apart Seattle 2011:

Jeffrey Zeldman at An Event Apart Seattle 2011.

“Mobile is huge. The iPhone, iPad, and Android are huge. On the one hand, they are standards-facing, because they all support HTML5 and CSS3, so you can create great mobile experiences using web standards. You can create apps using web standards. On the other hand, there is also the temptation to go a proprietary route. In a strange way, although the browsers are much more standards compliant, it seems like we are redoing the browser war. Only now, it’s not the browser wars, it’s platform wars.”

Video interview, plus transcript: Interview with Jeffrey Zeldman on the State of Web Design. Thank you, Michael Slater.

Jeffrey Zeldman’s Awesome Internet Design Panel at SXSW

WE KICKED OFF WITH a discussion on web platforms, perhaps the most widely-changing aspect of the web in the past 18 months. Zeldman began with a story about his efforts to check in to his upcoming flight to SXSW from a taxi cab in New York. He entered his details into his airline’s mobile app and clicked the ‘log in’ button, only to be taken to their desktop website which required Flash to log in, which inevitably, his iPhone didn’t support. How did this kind of user experience failure occur? …

“Moving on, the panel began to discuss publishing. The advent of plugins like Readability and a new product Roger Black is working on called TreeSaver allow readers to specify how they want to see content, and the advent of web standards means that content is generally separated from presentation, to the benefit of the reader. Zeldman made the point that the entire platform is for content, which makes it odd when some products are designed with the content being the last thing in mind.”

“The paywall quickly came up and the overwhelming ethos from the panel was “if you have exclusive great stuff, people will pay for it”. Dan Mall suggested that traditional publishers didn’t understand alternative modes of publishing and were attempting to price them at the same rate as their paper-and-ink versions. Mandy Brown joked that many publishers saw the iPad as their saviour, just like they did with the CD-ROM back in the 90s. She also made the point that despite its web-savvy audience, the A Book Apart project’s sales were 75% print. …

Jeffrey Zeldman’s Awesome Internet Design Panel (13/03 @ 5PM)


Paul MacInnes is the editor of the Guardian Guide and Matt Andrews is a client side web developer at the Guardian. Full coverage of SXSW 2011 at guardian.co.uk/sxsw