18 Apr 2014 3 pm eastern

The Practice

Filed under: Design, Typekit, Typography

Comments off.

29 Jun 2012 3 pm eastern

Responsive Typography

Responsive Typography: The Basics | Information Architects

“NOT EVERYTHING always works in your favor when you design for the screen. Interaction design is engineering: it’s not about finding the perfect design, it’s finding the best compromise.”

Responsive Typography: The Basics | Information Architects

Filed under: Responsive Web Design, type, Typography, Web Design, Web Design History, Web Standards, webfonts

Comments off.

18 May 2012 9 am eastern

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.


Filed under: Ideas, State of the Web, The Essentials, The Profession, Typekit, Typography, Usability, User Experience, UX, Web Design, Web Design History, webfonts, Websites, webtype, Zeldman, zeldman.com

Comments off.

24 Aug 2011 11 am eastern

The Web Comes of Age – DIBI Keynote Address by Jeffrey Zeldman

18 Aug 2011 8 am eastern

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!

Filed under: business, creativity, CSS, CSS3, style, The Profession, Tools, twitter, Typography, Usability, User Experience, UX, Zeldman

Comments off.

28 Mar 2011 7 pm eastern

An Event Apart Seattle 2011

I’m enjoying An Event Apart Seattle 2011 and you’re not. Despair not, help is available:

Filed under: An Event Apart, Code, content, content strategy, CSS, CSS3, Design, HTML, HTML5, mobile, Platforms, Seattle, The Profession, Typography, Usability, User Experience, UX, Web Design, Web Design History, Web Standards, Websites, webtype

Comments off.

27 Jan 2011 7 am eastern

Franklin Goes Dutch (Fonts In Use)

Dutch design studio Experimental Jetset carried out the graphic design for Pioneers of Change—a festival of Dutch design, fashion, and architecture which took place on New York’s Governors Island in September 2009. The design system, which included a website, printed programs, and wayfinding elements, made prominent use of Franklin Gothic Extra Condensed

Nick Sherman discusses a smart application of my favorite font, Franklin Gothic, in the virtual pages of what might be my new favorite design website, Fonts in Use.

Fonts in Use: Pioneers of Change

Filed under: Design, Fonts, type, Typography

Comments off.

13 Jan 2011 6 am eastern

Big Web Show Episode 34: Craig Mod on the Form of the Book

Craig Mod

CRAIG MOD is our guest today January 13, 2011 in Episode No. 34 of The Big Web Show (“Everything Web That Matters”), co-hosted by Dan Benjamin and recorded at 12:00 PM Eastern (new time!) before a live internet audience.

Mod (craigmod.com, @craigmod) is a writer, designer, publisher, and developer concerned with the future of publishing and storytelling. Based in Tokyo for a decade, he is co-author and designer of Art Space Tokyo, an intimate guide to the Tokyo art world. Since October 2010 Craig has been working in the California Bay Area helping sculpt the future of digital publishing with Flipboard.

Craig speaks frequently on the future of books, publishing, and digital content design. In this week’s A List Apart he presents the initial release of Bibliotype, an HTML baseline typography library for tablet reading released under the MIT License.

The Big Web Show records live every Thursday at 12:00 PM Eastern (new time).

Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!

Filed under: Best practices, Big Web Show, CSS, CSS3, Design, E-Books, editorial, HTML, HTML5, State of the Web, The Big Web Show, Typography

Comments off.

31 Dec 2010 1 pm eastern

2010: The Year in Web Standards

WHAT A YEAR 2010 has been. It was the year HTML5 and CSS3 broke wide; the year the iPad, iPhone, and Android led designers down the contradictory paths of proprietary application design and standards-based mobile web application design—in both cases focused on user needs, simplicity, and new ways of interacting thanks to small screens and touch-sensitive surfaces.

It was the third year in a row that everyone was talking about content strategy and designers refused to “just comp something up” without first conducting research and developing a user experience strategy.

CSS3 media queries plus fluid grids and flexible images gave birth to responsive web design (thanks, Beep!). Internet Explorer 9 (that’s right, the browser by Microsoft we’ve spent years grousing about) kicked ass on web standards, inspiring a 10K Apart contest that celebrated what designers and developers could achieve with just 10K of standards-compliant HTML, CSS, and JavaScript. IE9 also kicked ass on type rendering, stimulating debates as to which platform offers the best reading experience for the first time since Macintosh System 7.

Even outside the newest, best browsers, things were better than ever. Modernizr and eCSStender brought advanced selectors and @font-face to archaic browsers (not to mention HTML5 and SVG, in the case of Modernizr). Tim Murtaugh and Mike Pick’s HTML5 Reset and Paul Irish’s HTML5 Boilerplate gave us clean starting points for HTML5- and CSS3-powered sites.

Web fonts were everywhere—from the W3C to small personal and large commercial websites—thanks to pioneering syntax constructions by Paul Irish and Richard Fink, fine open-source products like the Font Squirrel @Font-Face Generator, open-source liberal font licensing like FontSpring’s, and terrific service platforms led by Typekit and including Fontdeck, Webtype, Typotheque, and Kernest.

Print continued its move to networked screens. iPhone found a worthy adversary in Android. Webkit was ubiquitous.

Insights into the new spirit of web design, from a wide variety of extremely smart people, can be seen and heard on The Big Web Show, which Dan Benjamin and I started this year (and which won Video Podcast of the Year in the 2010 .net Awards), on Dan’s other shows on the 5by5 network, on the Workers of the Web podcast by Alan Houser and Eric Anderson, and of course in A List Apart for people who make websites.

Zeldman.com: The Year in Review

A few things I wrote here at zeldman.com this year (some related to web standards and design, some not) may be worth reviewing:

iPad as the New Flash 17 October 2010
Masturbatory novelty is not a business strategy.
Flash, iPad, and Standards 1 February 2010
Lack of Flash in the iPad (and before that, in the iPhone) is a win for accessible, standards-based design. Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first.
An InDesign for HTML and CSS? 5 July 2010
while our current tools can certainly stand improvement, no company will ever create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.” The assumption that a such thing is possible suggests a lack of understanding.
Stop Chasing Followers 21 April 2010
The web is not a game of “eyeballs.” Never has been, never will be. Influence matters, numbers don’t.
Crowdsourcing Dickens 23 March 2010
Like it says.
My Love/Hate Affair with Typekit 22 March 2010
Like it says.
You Cannot Copyright A Tweet 25 February 2010
Like it says.
Free Advice: Show Up Early 5 February 2010
Love means never having to say you’re sorry, but client services means apologizing every five minutes. Give yourself one less thing to be sorry for. Take some free advice. Show up often, and show up early.

Outside Reading

A few things I wrote elsewhere might repay your interest as well:

The Future of Web Standards 26 September, for .net Magazine
Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a new web?
Style vs. Design written in 1999 and slightly revised in 2005, for Adobe
When Style is a fetish, sites confuse visitors, hurting users and the companies that paid for the sites. When designers don’t start by asking who will use the site, and what they will use it for, we get meaningless eye candy that gives beauty a bad name.

Happy New Year, all!

Filed under: A Book Apart, A List Apart, Adobe, An Event Apart, Apple, architecture, art direction, Authoring, Best practices, Big Web Show, client services, Code, content, content strategy, creativity, CSS, CSS3, Dan Benjamin, Design, DWWS, E-Books, editorial, Education, eric meyer, Fonts, Formats, Free Advice, Happy Cog™, Haters, industry, Information architecture, interface, ipad, iphone, IXD, javascript, links, maturity, New Riders, peachpit, Publications, Publishing, Real type on the web, Respect, Responsibility, Responsive Web Design, Standards, State of the Web, tbws, The Big Web Show, The Essentials, The Profession, This never happens to Gruber, Typekit, Typography, Usability, User Experience, UX, W3C, Web Design, Web Design History, Web Standards, webfonts, webkit, Websites, webtype, work, Working, writing, Zeldman, zeldman.com

Comments off.

7 Dec 2010 1 pm eastern

Cure for the Common Webfont, Part 2: Alternatives to Georgia

For nearly fifteen years, if you wanted to set a paragraph of web text in a serif typeface, the only truly readable option was Georgia. But now, in web type’s infancy, we’re starting to see some valid alternatives for the king of screen serifs. What follows is a list of serif typefaces that have been tuned—and in some cases drawn from scratch—for the screen.

Stephen Coles, December 6, 2010:
Cure for the Common Webfont, Part 2: Alternatives to Georgia

Filed under: Design, Fonts, Tools, type, Typekit, Typography, webfonts, webkit, Websites, webtype

Comments off.