RESILIENCE: BUILDING a Robust Web That Lasts by Jeremy Keith. One of twelve hours of essential content at An Event Apart Austin 2015. But if you plan to attend, grab your ticket now. Early bird discount pricing ends Monday, August 10.
The interview was conducted by Nick Sherman at TypeLab on June 13, 2015. The website is part of Typographics TypeLab and is a demonstration of what can be done with web typography within 24 hours.
Remember: the future will come whether you design for it or not. If your company charges $300,000 for a website that won’t work on next week’s most popular device, your company won’t be able to stay competitive in this business. It might not even be able to stay in the business, period. After all, clients who pay for sites that break too soon will look elsewhere next time—leaving your company perpetually hunting for new clients in a downward spiral of narrowing margins and diminishing expectations.
Your company’s survival is tied to the ability of the products it makes to work in situations you haven’t imagined, and on devices that don’t yet exist. This has alwaysbeen the challenge of web design. It’s one A List Apart has taken seriously since we began publishing, and our archives are filled with advice and ideas you can boil down and present to your bosses.
Source: No Good Can Come of Bad Code
TODAY marks the 20th anniversary of Bill Gates’s famous letter about the web, and my first website, batmanforever.com, created with Steve McCarron and Alec Pollak for Donald Buckley of Warner Bros and optimized for Netscape 1.1.
Gates’s memo to employees, published this day twenty years ago and entitled “The Internet Tidal Wave” accurately identified the web as a threat to its kingdom of binary desktop software, and set Microsoft on course to “own” the browser, thereby holding back the threat for about fifteen years. A transcript of Gates’s memo is available at petri.com, along with a mixed bag of then-and-now analysis. (Hat tip to Alan K’necht for the link.)
Today, of course, Microsoft embraces open web standards, while companies that didn’t exist at the time of the memo (like Google) or were insignificant competitors seemingly on their way to the grave (like Apple) enjoy the godlike position Microsoft once held—and used every trick in the book to hold onto.
The Batman Forever site was much shorter-lived and far less influential than the Gates memo, although we did manage to introduce web design ideas like animated entrance tunnels and metaphor-based navigation—things we later abjured. My partner Steve got out of web design and is a VP Creative Director director at Publicis. My partner Alec stuck with web and software design, but from the agency side. I stayed in web design, and I even still call it that…although I also sometimes just call it design. Our first web client Donald Buckley is a huge deal at Showtime.
“Jeffrey Zeldman Presents” turns 20 on May 31.
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.
IN EPISODE NO. 65 of The Big Web Show (“everything web that matters”), I interview Tim Brown of Typekit and Nice Web Type on where we are with web fonts, real web type in real web context, using Dribbble to develop a tone of voice, how saving small snippets of other people’s content can turn you into a blogger, Samantha Warren’s Style Tiles, molten leading orbital content, pages versus chunks, the type-driven design, web font fallbacks, the connection between leading and font family, transitioning from university work to Typekit, and much more.
Listen to The Big Web Show #65: Tim Brown.
Links mentioned in this show are numerous, enlightening, and available for your pleasure.
Subscribe to The Big Web Show
The Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. Get episodes delivered to you automatically:
FacitWeb on Typekit:
Modular scales — meaningful numbers for layout:
More Meaningful Typography:
Web Font Specimen:
Real Web Type in Real Web Context:
How I use Twitter:
On leaving Vassar:
Font Events – Typekit Blog:
Ffffallback – a webfont fallback app:
Nice Web Type:
The Articulate Web Designer of Tomorrow – 24 Ways:
Orbital Content – A List Apart:
Fonts in Use:
Facit web font:
Nice Web Type:
Design by Front:
Style Tiles – Samantha Warren:
Molten Leading – Nice Web Type:
Tim Brown on Dribbble:
Principles of Typography on the Web:
IN The ‘trouble’ with Android, Stephanie Rieger points out the ludicrous number of Android screen sizes on a typical UK client’s website and comes to this conclusion:
If … you have built your mobile site using fixed widths (believing that you’ve designed to suit the most ‘popular’ screen size), or are planning to serve specific sites to specific devices based on detection of screen size, Android’s settings should serve to reconfirm how counterproductive a practice this can be. Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices. Alternatively, attempting to track, calculate, and adjust layout dimensions dynamically to suit user-configured settings or serendipitous conditions is just asking for trouble.
I urge you to read the entire article—it’s brief yet filled with rich chocolatey goodness.
Responding to it, Marc Drummond concludes that responsive web design default breakpoints are dead and urges designers to “use awkwardness as your guideline, not ephemeral default device widths” and return to fluid design. (I believe he may actually be thinking of liquid layout—the kind we practiced back in the early mid-1990s when cross-platform and multi-manufacturer desktop screen sizes and pixel-per-inch ratios—not to mention strong user font, size, and color preference options—made fixed-width layout design challenging if not impossible. As I understand fluid design, it is merely another word for responsive design, in that it relies on CSS3 media queries set to breakpoints.)
We’ve lost our compass
Rieger and Drummond are hardly alone in feeling that “our existing standards, workflows, and infrastructure” cannot support “today’s incredibly exciting yet overwhelming world of connected digital devices” (futurefriend.ly) and that something new must be done to move the web forward. And of course ppk has been warning us about the multiplicity of platforms and viewports on mobile since 2009.
Agreed: that is an exciting and challenging time; that fixed width layouts do not address, and adaptive layouts (multiple fixed-width layouts set to common breakpoints) do not go far enough in addressing, the challenges posed by our current plethora of mobile screen sizes, zoom settings, embedded views (i.e. “browser” windows inside app windows, often with additional chrome) and what Rieger calls “the unintended consequences” that occur as these various settings clash in ways their creators could not have anticipated.
If breakpoints are dead, responsive design is dead
Of course, if breakpoints are dead, responsive design is dead, because responsive design relies on breakpoints both in creative workflow and as a key to establishing user-need-and-context-based master layouts, i.e. a minimal layout for the user with a tiny screen and not much bandwidth, a more fleshed-out one for the netbook user, and so on.
But responsive design is not dead; it has only begun. It is not a panacea but was never intended to be. It is simply the beginnings of an approach.
I respect those colleagues who say breakpoints are dead, understand how they reached this conclusion, and am eager to see where it takes them in the coming months as they experiment with new methods, perhaps developing wonderful and unforeseen best practices. I hope design will be a brilliant part of these new methods, not something that gets abandoned to create a bland but workable lightweight experience for all.
But I also believe it is possible to draw a different conclusion from the same data. It is even possible, I believe, to say the present data doesn’t matter—at least not in the long run.
Tale of the chart
There was a time in the late 1990s when industrious web designers showed how atrocious CSS support was in browsers. Eric Meyer’s Master Compatability Chart for Web Review, formerly at http://www.webreview.com/pub/wr/style/mastergrid.html, was one of the best, but is no longer available for your historical viewing pleasure—not even at the mighty Wayback Machine. That’s too bad, as it would have perfectly illustrated my point. The chart used a variety of colors to show how each detail of the entire CSS specification was or was not supported (and if supported, whether it was supported correctly and completely, partially and correctly, partially and somewhat incorrectly, or completely incorrectly) in every browser which was available at the time, including, if memory serves, close to a dozen versions of Netscape, Explorer, and Opera.
Looking at that chart induced nausea and vertigo. It was easy to draw the conclusion that CSS wasn’t ready for primetime. (That was the correct conclusion at the time.) It was also easy to look at the table and decide that table layouts and font tags were the way to go.
That’s what most designers who even bothered looking at Eric’s chart decided, but a few (Eric and me included) drew a completely other inference. Instead of trying to memorize all the things that could go wrong in each browser, we created general rules for what worked across all browsers (e.g. font-size in px, floats for layout) and advocated design based on the things that work. This, I believe, is exactly what the futurefriend.ly and Move the Web Forward folks are doing now: trying to figure out commonalities instead of bogging down in details. (This is why some in our community have labeled futurefriend.ly and Move the Web Forward “WaSP II.”)
The other inference Eric, I, and others in the 1990s drew from Eric’s chart was that browser makers must be petitioned to support CSS accurately and correctly. We and many of you reading this engaged in said petitioning, and thanks largely to help from with the browser engineering community (from people like Tantek Çelik and Chris Wilson and organizations like Mozilla) it came to pass.
Of mice and markets
We cannot, of course, petition all the makers of, say, Android devices to agree to a set of standard breakpoints, because there are over 500 different Android devices out there, many of which will fail in the coming months—or if not outright fail, simply be replaced in the course of planned obsolescence AKA upgrading that drives the hardware segment. And each new product will in turn introduce new incompatibilities (AKA “features”).
In the short run it’s going to be hell, just as the browser wars and their lack of support for common standards were hell. But it is the short run.
500 standards is no standard. Give a consumer 500 choices and the price-driven consumer picks what comes with her plan, while the selective consumer begins gravitating toward a handful of emerging market leaders. Eventually this nutty market will stabilize around a few winning Android platforms (e.g. Kindle Fire) and common breakpoints will emerge. What The Web Standards Project achieved with browser makers, the market will achieve with phones.
Until that time, designers certain can abandon breakpoints if they can find a way to do good design under purely fluid conditions—design that pleases the user, satisfies the client, and moves the industry forward aesthetically. But designers who persist in responsive or even adaptive design based on iPhone, iPad, and leading Android breakpoints will help accelerate the settling out of the market and its resolution toward a semi-standard set of viewports. This I believe.
When I see fragmentation, I remind myself that it is unsustainable by its very nature, and that standards always emerge, whether through community action, market struggle, or some combination of the two. This is a frustrating time to be a web designer, but it’s also the most exciting time in ten years. We are on the edge of something very new. Some of us will get there via all new thinking, and others through a combination of new and classic approaches. Happy New Year, web designers!
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.