websitesAbandon five obsolete habits

If Leo Tol­stoy were alive and work­ing in San Fran­cisco as a web de­vel­oper, he might tell us that poorly de­signed web­sites are all alike; each well-de­signed web­site is well-de­signed in its own way. And, hav­ing watched the web evolve over its first 20 years, I would agree.

We’ve seen how type­writer habits have main­tained a pe­cu­liar in­flu­ence on the ty­pog­ra­phy of to­day’s doc­u­ments (e.g., re­search pa­pers). These habits arose from the me­chan­i­cal lim­i­ta­tions of the type­writer. When the type­writer dis­ap­peared, so did the lim­i­ta­tions. But the habits re­mained. De­tached from their orig­i­nal jus­ti­fi­ca­tion, they’ve be­come point­less obstructions.

Like­wise, the web-de­sign habits of the mid-’90s con­tinue to in­flu­ence to­day’s web. These habits also arose from the tech­no­log­i­cal lim­i­ta­tions of a pre­vi­ous era. The lim­i­ta­tions are ob­so­lete. But the habits are still with us. Five have been es­pe­cially tenacious:

  1. Tiny point sizes for body text. This prac­tice was made nec­es­sary by small dis­plays, which oth­er­wise couldn’t fit much text. But to­day’s dis­plays are large.

  2. Huge point sizes for head­ings. These arose from the ele­phan­tine de­fault styling of HTML head­ing tags in old browsers. But to­day’s CSS al­lows finer control.

  3. Re­liance on a small hand­ful of sys­tem fonts, like Ar­ial, Geor­gia, and Ver­dana. This arose from a lack of tech­nol­ogy for down­load­able fonts. But to­day, we have webfonts.

  4. Page edges crammed with in­scrutable wads of nav­i­ga­tional links. These emerged on the early web be­cause con­tent was so sparse. Links gave read­ers some­thing else to do—click and move. (Hence the id­iom be­came surf­ing the web, not read­ing the web.) But to­day, get­ting con­tent onto the web is rel­a­tively easy, and nav­i­ga­tional con­fu­sion tends to be a greater risk than boredom.

  5. Lay­outs built with large blocks of color. These were made nec­es­sary by the band­width lim­i­ta­tions of the early web. (They also filled space on those con­tent-de­prived web pages.) But to­day, high-speed con­nec­tions are com­mon, even on mo­bile devices.

Hav­ing out­lived their orig­i­nal ra­tio­nale, these habits are no more jus­ti­fi­able for to­day’s web than type­writer habits like un­der­lin­ing are for to­day’s printed documents.

Yet not only are these habits still with us, they’ve hard­ened into en­trenched web-de­sign id­ioms. Don’t take my word for it. Go to any ma­jor web­site with this check­list. You’ll count at least four. These habits are everywhere.

But bad habits don’t be­come good habits through rep­e­ti­tion. We know this to be true of spelling, gram­mar, and us­age in Amer­i­can Eng­lish. Sure, our lan­guage changes. But slowly. Not by pop­u­lar vote. Cer­tainly not by pop­u­lar error.

So it is with typography.

And that’s the odd wrin­kle we have to over­come when we talk about the web. Be­cause to con­vince you to aban­don the type­writer habits in printed doc­u­ments, I’m able to cite a per­sua­sive body of ev­i­dence: namely, the pro­fes­sional ty­po­graphic prac­tices of the last 500 years, as re­flected in the books, news­pa­pers, and mag­a­zines we read daily.

The web, how­ever, has no equiv­a­lent tra­di­tion. We can’t fill this gap merely by hold­ing the web to print tra­di­tions. That would be lim­it­ing and il­log­i­cal. But it’s equally il­log­i­cal to refuse to com­pare the web to any bench­mark on the grounds that it’s sui generis (be­cause it’s not—the web is pri­mar­ily a ty­po­graphic medium), or that it’s new tech­nol­ogy (be­cause it’s not—the web is 20 years old), or that it’s still evolv­ing (be­cause that’s true of every tech­nol­ogy, in­clud­ing print).

Nev­er­the­less, we’ve kept web de­sign hov­er­ing in an odd state of nei­ther here nor there. How? Like the poor worker of proverb—by blam­ing the tools. If you ask a web de­signerwhy aren’t we do­ing bet­ter with web ty­pog­ra­phy?” you’re likely to hear ei­therwe can’t, be­cause such-and-such won’t work in the old browsers” orwe can’t, un­til such-and-such works in the new browsers.” The cul­ture of web de­sign en­cour­ages us to rely on the past and the fu­ture as ex­cuses for why we can’t take ac­count­abil­ity for the present. These ex­cuses keep to­day’s web de­sign in a bub­ble, con­ve­niently im­per­vi­ous to criticism.

But im­per­vi­ous to crit­i­cism also means im­per­vi­ous to progress. When ex­pec­ta­tions are held ar­ti­fi­cially low, there’s no in­cen­tive to do bet­ter. Thus next year’s web­sites end up look­ing much like last year’s. And the in­er­tia sus­tains it­self in­def­i­nitely. Again, don’t take my word for it—the on­go­ing ubiq­uity of ob­so­lete web-de­sign habits is the proof.

There­fore, my ty­po­graphic ad­vice for web­sites is more a prin­ci­ple than a prescription.

We can dis­agree about what de­sign ex­cel­lence will even­tu­ally mean on the web. In fact, we should dis­agree, be­cause that’s what stim­u­lates ex­per­i­men­ta­tion and dis­cov­ery. Do­ing it wrong is a pre­req­ui­site to do­ing it right.

But with the web, we can’t have it both ways. We can’t ac­cept the ben­e­fits of web tech­nol­ogy with­out rais­ing the bar for our­selves. We can’t use the web for 20 years as a de­sign medium yet ex­empt it from de­sign crit­i­cism. We can’t blame the tools for our fail­ure to over­come our own in­er­tia. And we can’t ex­pect the web to grow up while we cling to ju­ve­nile and ob­so­lete habits.

We must set these habits aside. Es­pe­cially the five listed above. Any­one who is still re­ly­ing on those habits is ei­ther lazy or care­less. You are neither.

  1. Small point size for body text (that doesn’t change with win­dow size)

  2. Enor­mous head­ings, re­dun­dantly high­lighted with gray.

  3. All fonts are sys­tem fonts—Ar­ial, Tre­buchet, and Courier.

  4. Nav­i­ga­tion links dom­i­nate the fore­ground; body text rel­e­gated to the background.

  5. Lay­out filled with col­ored rec­tan­gles—the large green rec­tan­gle at left, and far­ther down the page, rec­tan­gles of pink, green, gray, yel­low, and two shades of purple.

  1. Big­ger point size for body text (that changes to suit the win­dow size)

  2. Head­ings that are smaller while still be­ing distinct.

  3. Bet­ter fonts (Eq­uity, Con­course, and Trip­li­cate).

  4. Nav­i­ga­tion less promi­nent and in­te­grated into the body text.

  5. Col­ored rec­tan­gles used spar­ingly to de­note spe­cial sections.

  6. Lib­eral use of white space.

What we get from tech­nol­ogy tends to be a mat­ter of ex­pec­ta­tions, not pa­tience. So we should ex­pect more of the web. Be­cause when we do, we nec­es­sar­ily ex­pect more of our­selves. And when we ex­pect more of our­selves, we ex­pand pos­si­bil­i­ties for everyone.

Let’s not set­tle for less.