Garth Hagerman Photo/Graphics
Garth Hagerman Photo/Graphics

Stop Thinking Like a Print Designer!

Ruminations on the important differences between print design and web design.

Of the many categories of bad web sites, perhaps the easiest to spot are the sites designed and developed by print designers. The world is full of good, experienced print designers who are expanding their skills by venturing into the web world. Unfortunately, many of them fail to grasp the important differences between the media. They wind up producing very pretty sites which load slowly, are not optimized for the search engines, don't work on certain browser/operating system combinations, and have major usability problems.

This doesn't have to happen to you. Let's look at the major differences between the web and print media and find ways to expand our minds to utilize the strengths of the web.

Print design constants

Look around you. Find any printed document... a poster, a catalog, junk mail, whatever. Look at it closely. Its creators probably made thousands just like it, same exact page size, same fonts, same colors, same paper stock, same same same right down to the kerning spaces between individual letters.

With a web site, all of those constants become variables. The designer doesn't know what size the page is, since computer monitors come in many sizes and users can re-size their browser windows. If the web designer specifies a particular font, only users who have that font installed will see the site using that font, unless the font is embedded, which opens another can of worms (OK, not as big a can of worms as it used to, but still...). Users can change the size of the type, drastically altering the appearance of the page. Differences in monitors and their color and contrast settings obliterate consistent color rendition. And then there are the innumerable differences between browsers and operating systems which add many more variables to the equation.

Extra tools for web sites

The web also gives the designer a whole extra set of tools. With a web site, you can have animation, mouse-over effects, pull down menus, cross-referencing links, instant reader feedback, and on and on. The key to using these tools is not only knowing how to use them, but knowing when to use them. Often, print designers will become so enthralled by a cute web trick that they'll use it even when it serves no communicative purpose on their site, when it makes the site inaccessible to a large potion of their intended audience, or when it renders their site un-indexable. Keep in mind the classic web maxim, "just because you can do something doesn't mean you should do it."

Web design and print design are fundamentally different games, with different sets of rules. By acknowledging the differences between the different media and utilizing the tools at our disposal in the web world, we can create sites which are visually attractive, work well on a wide range of browsers and operating systems, are search engine friendly, and—most importantly— communicate the content's message to its target audience.

My first rule of web design is "don't think like a print designer". If you try to exercise the degree of control you'd have in print in a web site, you're doomed. Even if you rasterize everything to protect your precious fonts and letter spacing, it's still going to look different on different monitors. Plus, it'll be slow loading from all of those extra graphics files, and it won't look as nice—rasterized type is a bit fuzzy around the edges regardless of anti-aliassing. Worst of all, hardly anyone will visit your site, as it will be gloriously un-indexable and nobody will find you on Google.

To design a successful site, you need to embrace the medium, not fight it. Many of the "problems" with designing for the web are really good things in disguise. Those pesky users who change the type size aren't trying to ruin your design; they are making it easier to read your content. Mostly, those few basic fonts that everyone has installed on their computers (such as Verdana and Times) just happen to be good screen fonts. Legally embeddable fonts such as those in Google's library give us more (but still limited) options, but be careful. Many fonts which are lovely printed at 600dpi look like poo-poo on screen where the resolution is much lower. Delicate, pointy serifs are fine in print, icky on screen. Variations in stroke width ("contrast" in its typographic definition) are fine in print, icky on screen. So, fonts such as Bernhard Modern or Bodoni are still lousy choices for the body type on a web site.

Liquid design versus fixed width pages

One trap which many print designers fall into is the quest for pixel perfect layout. In the rigidly controlled world of print, that kind of precision is fine and dandy, but in the web world, it's an appealing fantasy, a mirage, a myth. Remember: you don't know how wide your page is. Your page can be as tall as it needs to be. Your type will be displayed differently on different user's computers. Get over it. Deal with it. Embrace it. Cherish it.

Since you don't know how wide your page is, there's little to be gained by forcing your content into a fixed-width box. Using "liquid design", you can define your content as a percentage of the width of the browser window. In a wider window, the lines are longer, in a narrower window, they're shorter. If the user re-sizes the window, the browser re-wraps the text to fit the new size. You can set limits to establish minimum or maximum widths.

With a fixed width box, you can center your content, or align it to one side of the page, but you never know how much blank background will be showing, or whether folks with small monitors will have to do the dreaded horizontal scroll thang. With liquid design, the page can adapt to a much wider range of viewers.

One of my biggest pet peeves when I'm visiting web sites is long fixed-width text boxes. My eyes make the long trek across the column, and by the time I find my place on the left side of the next line, I've forgotten what I was reading about. I re-size the window, only to get a horizontal scroll bar. Admittedly, an experienced print designer is unlikely to make that exact mistake, since readable line length is an important aspect of print design, too. But remember, the type will look different on different monitors, browsers, operating systems, and user-controlled settings. If you're using liquid design, your readers will be able to resize the viewing window to adjust for their machines and preferences. If you want people to actually read your content, make it easy for them.

Type-background contrast

Another problem I frequently encounter on print designers' web sites is type that is hard to read due to inadequate contast or a mottled background. In print, one can often cut the margin of legibility pretty thin; every copy of that particular document will look exactly the same, so maybe blue type on a teal background will be reasonably legible. In the web world, monitors vary widely. A background that is forest green on one monitor may be black on another, and lime green on a third. Hues that seem clearly distinct on your monitor may form a nearly solid blob on somebody else's. And remember, whippersnappers, that everybody doesn't have 24 year old 20-20 eyes. It may be legible to you, but what about someone who is colorblind?

So play it safe. If you really want your content to get read, make sure the type contrasts with its background in both hue and brightness. Save the fancy mottled background for the margins, and give your content a simple solid color background.


Several years ago, at my local community college, I took a few courses in print design, then a basic HTML class. Several intelligent, artistic students—who had excelled in PhotoShop and PageMaker (OK, stop laughing, I'm old)—almost literally ran away screaming when they got their first whiff of HTML. Relax, folks. It's not that hard. While it may seem daunting at first, you must learn HTML and CSS to design and develop web sites which work on the widest range of browsers, load quickly, rank highly for appropriate search terms, are easy to read, and look good.

The world is full of WYSIWYG (what you see is what you get) HTML editors and website-in-a-box abominations. With one of these, and a little self-delusion, you can create spiffy, state of the art websites without ever looking at that pesky, confusing code. Maybe. Sorta. With a WYSIWYG editor or a template-driven platform, you can drag and drop images onto your page, make the type bigger or smaller with a mouse click, use prefab JavaScripts easily, and wind up with code that's an incomprehensible hodgepodge of font tags, non-structural CSS, JavaScript, and proprietary pseudo-html gobbledeegook. When it turns out that the page blows up in some particular browser, you'll have no clue as to how to begin to troubleshoot the dangnabbed thing. When the search engines spider your site, they'll have a hard time finding the content amongst the detritus. They won't know which terms are important, because you didn't use headline tags. Your rankings and traffic will suffer. Maintaining such a site can be a nightmare, too. There is no substitute for knowing what you are doing.

In print, your project only has to work once, on the machine that is doing the printing. It doesn't matter much how efficient the underlying computer code is, or whether you've used your paragraph styles logically and consistently. The final printed document is the product; if it printed correctly, then all is well. In the web world, the code is the product. The way a site looks on your particular computer/browser configuration is only one aspect of the success of the design. The code of that site will be interpreted by many different browsers, on laptops, desktops, phones, tablets, and by search engine spiders. The only way to get your site to work for the widest possible variety of viewers is to make sure the code is rock solid. Learn HTML and CSS well. Even if you wind up using Wordpress or Drupal or whatever, at least you'll be able to troubleshoot and modify the code when you inevitably need to. Learn the major browser bugs. Keep your code simple and standards compliant. Test your sites on as many different machines as possible.

Know your audience

Since a bewildering multitude of tools are out there, available for use on web sites, how do you know which ones to use on your site? A critical portion of the answer to that question comes from analyzing your target audience. Is the overwhelming majority of your audience likely to have a super fast internet connection? Are they likely to have nice new computers with the newest browsers and a complete set of plug-ins? Do people already know about you and your wonderful site, or will they need to find you through the search engines? Is your site appealing to people in rural areas where genuinely fast connections are still far from universal?

For an awful lot of sites, you'll need to design for a least common denominator. While the brand new technologies are often really cool and stuff, substantial segments of your audience may not have them available. Once you start slicing off significant chunks off your audience base, you run serious danger of a big cumulative impact. Does your site use new HTML5 tags which are not supported by last year's browsers? Does that Javascript run correctly in Safari? Does that fancy-pants animation leave your links where a bot can't find your content?

Perhaps the most important thing for print designers to realize when they move to the web world is this: the web is not primarily a visual medium; it is a means of exchanging information. It's all about text content; the visual artistry is embellishment. The web started as a way for academics to share the results of their research. Now, the web is driven by users' queries to the search engines. Logically structured, original text content rules.