Leo Laporte interviews JZ

IN EPISODE 63 of Triangulation, Leo Laporte, a gracious and knowledgeable podcaster/broadcaster straight outta Petaluma, CA, interviews Your Humble Narrator about web standards history, responsive web design, content first, the state of standards in a multi-device world, and why communists sometimes make lousy band managers.

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.

Keep your site’s type right; let users work offline

IN ISSUE No. 350 of A List Apart for people who make websites: keep your web type looking right across browsers, platforms, and devices; let users do stuff on your site even when they’re offline.

Say No to Faux Bold

by ALAN STEARNS

Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design, and can be especially atrocious with web fonts. Adobe’s Alan Stearns shares quick tips and techniques to ensure that your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. If you’re taking the time to choose a beautiful web font for your site, you owe it to yourself and your users to make certain you’re actually using the web font — and only the web font — to display your site’s content in all its glory.

Application Cache is a Douchebag

by JAKE ARCHIBALD

We’re better connected than we’ve ever been, but we’re not always connected. ApplicationCache lets users interact with their data even when they’re offline, but with great power come great gotchas. For instance, files always come from the ApplicationCache, even when the user is online. Oh, and in certain circumstances, a browser won’t know that that the online content has changed — causing the user to keep getting old content. And, oh yes, depending on how you cache your resources, non-cached resources may not load even when the user is online. Lanyrd’s Jake Archibald illuminates the hazards of ApplicationCache and shares strategies, techniques, and code workarounds to maximize the pleasure and minimize the pain for user and developer alike. All this, plus a demo. Dig in.


Illustration by Kevin Cornell for A List Apart

Big Web Show 69: Chris Cashdollar on fonts.com

HAPPY COG Creative Director Christopher Cashdollar is my guest in Episode No. 69 of The Big Web Show, the weekly podcast on “everything web that matters.”

In 35 lively minutes, Chris and I discuss the joys and challenges of redesigning typography mega-site Fonts.com; nimble versus waterfall; process versus inspiration; running a creative department that is interactive in every sense of the word; the two sides of a design education (learning and teaching); fostering collaboration; and the transition from doodling eight-year-old to graphic design student to interactive creative director.

Chris is a multi-disciplinary graphic designer with twelve years of interaction design experience. He is currently the Creative Director for Happy Cog Philadelphia, and an adjunct instructor for Drexel University’s Westphal College of Media Arts and Design.

Listen to Episode No. 69 of The Big Web Show, featuring Chris Cashdollar.

Links

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:

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.

Designing Apps With Web Standards (HTML is the API)

The Web OS is Already Here… Luke Wroblewski, November 8, 2011

Mobile First Responsive Web Design, Brad Frost, June, 2011

320 and up – prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Andy Clarke and Keith Clark.

Gridless, HTML5/CSS3 boilerplate for mobile-first, responsive designs “with beautiful typography”

HTML5 Boilerplate – 3.02, Feb. 19, 2012, Paul Irish ,Divya Manian, Shichuan, Matthias Bynens, Nicholas Gallagher

HTML5 Reset v 2, Tim Murtaugh, Mike Pick, 2011

CSS Reset, Eric Meyer, v 2.0b1, January 2011

Less Framework 4 – an adaptive CSS grid system, Joni Korpi (@lessframework)

Responsive Web Design by Ethan Marcotte, 2011

Adaptive Web Design by Aaron Gustafson, 2011

Web Standards Curriculum – Opera

Getting Started With Sass by David Demaree, 2011, A List Apart

Dive into Responsive Prototyping with Foundation by Jonathan Smiley, A List Apart, 2012

Future-Ready Content Sara Wachter-Boettcher, February 28, 2012, A List Apart

For a Future Friendly Web Brad Frost, March 13, 2012, A List Apart

Orbital Content Cameron Koczon, April 19, 2011, A List Apart

Web standards win, Windows whimpers in 2012, Neil McAllister, InfoWorld, December 29, 2011

Thoughts on Flash – Steve Jobs, April, 2010

Did We Just Win the Web Standards Battle? ppk, July 2006

Web Standards: Wikipedia

The Web Standards Project: FAQ (updated), February 27, 2002

To Hell With Bad Browsers, A List Apart, 2001

The Web Standards Project: FAQ, 1998

The Web Standards Project: Mission, 1998

HTML5 at A List Apart

Mobile at A List Apart

Browsers at A List Apart

CSS & Mobile To The Future | Embrace Users, Constrain Design | An Event Apart Seattle 2012 Day II

TUESDAY, 3 APRIL 2012, was Day II of An Event Apart Seattle, a sold-out, three-day event for people who make websites. If you couldn’t be among us, never fear. The amazing Luke Wroblewski (who leads a day-long seminar on mobile web design today) took excellent notes throughout the day, and shares them herewith:

The (CSS) Future is Now – Eric Meyer

In his The Future is Now talk at An Event Apart in Seattle, WA 2012 Eric Meyer talked about some of the visual effects we can achieve with CSS today. Create shiny new visual elements with no images using progressive enhancement and CSS that is available in all modern browsers.

A Philosophy of Restraint
– Simon Collison

In his A Philosophy of Restraint talk at An Event Apart in Seattle, WA 2012 Simon Collison outlined his design philosophy and how he applies it to web projects. Embrace constraints; simplicity and complexity; design aesthetic; design systems as foundations that prepare us for future projects and complexity; affordances and type; focus and content; audit and pause — prevent catastrophic failures and shine a new light on what you’ve learned with each project.

Touch Events – Peter-Paul Koch (PPK)

In his Touch Events talk at An Event Apart in Seattle, WA 2012 Peter-Paul Koch talked about touch support in mobile browsers and how to handle touch events in web development. Includes a ranking of current mobile browsers; interaction modes in mobile versus desktop (mouse) and keyboard — how do we adjust scripts to work with touch?; touch events; supporting modes; event cascade; and “stick with click.”

Mobile to the Future – Luke Wroblewski

Alas, Luke could not take notes on his own presentation. Here’s what it was about: When something new comes along, it’s common for us to react with what we already know. Radio programming on TV, print design on web pages, and now web page design on mobile devices. But every medium ultimately needs unique thinking and design to reach its true potential. Through an in-depth look at several common web interactions, Luke outlined how to adapt existing desktop design solutions for mobile devices and how to use mobile to expand what’s possible across all devices.Instead of thinking about how to reformat your websites to fit mobile screens, attendees learned to see mobile as way to rethink the future of the web.

What’s Your Problem? – Whitney Hess

In her What’s Your Problem? Putting Purpose Back into Your Projects talk at An Event Apart in Seattle, WA 2012 Whitney Hess outlined the value of learning about opportunities directly from customers. Understand the problem before designing the solution. Ask why before you figure out how. There is no universal solution for all our projects, we need to determine which practices are “best” through our understanding of problems. Our reliance on best practices is creating a world of uniform websites that solve no one’s problem. Leave the desk and interact with people. Rather than the problem solver, be the person who can see the problem.

Properties of Intuitive Pages
– Jared Spool

At An Event Apart in Seattle WA 2012, Jared Spool walked through what makes a design intuitive, why some users need different treatment, and the role of design. Current versus acquired knowledge and how to bridge the gap (how to train users, thus making your site or app “intuitive”). Redesigns and how to avoid disaster. Design skills. The gap between current knowledge and target knowledge is where design happens. Why intuitive design is only possible in small, short iterations.


Day III begins in 90 minutes. See some of you there.

Photos: AEA Seattle Flickr pool or hashtags #aea and #aeasea on Instagram.

Big Web Show No. 65 | Tim Brown of Typekit and Nice Web Type

Tim Brown of Typekit and Nice Web Type

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.

Show Links

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: