4 Time-Saving Tips for Web Designers and Web Developers

I’ve been a professional web developer since 1994 (they didn’t call us that back then, but that’s what we were). We’re the folks that take a concept and turn it into an interactive web project that can be viewed on a computer monitor (of any size and resolution), on any number of operating systems (Windows, Mac, Linux, etc.) using any number of web browsers (Firefox, Safari, Opera, that one browser by Microsoft, etc.). We’re not like a print shop that can turn a design into a printed version pixel for pixel.

Then again… Not even print shops can realize a design exactly like a designer wants. There may be issues with dpi, bleed, color saturation, glossiness, etc. Most of those are due to the medium in which the design will be published.

And there is is: there are limitations to the print media itself; limitations that a designer must be acceptable with. Limitations that a good designer understands and is willing to work around, or just accept.

The web is no different. There are limitations, nuances, and trade-offs that must be made. If you’re a designer and you’re not comfortable with this, you may want to stick with print.

I’ve worked with many a graphic designed through the years many with fancy degree’s like BFA or MFA. Most had substantial portfolios of their collected works (which is like a resume’ crossed with “show and tell”). Most had ego’s a mile high and could never be convinced that they were “wrong” about anything — after all, they had a fancy degree and a substantial portfolio which would apparently prove otherwise.

The root of all problems that I’ve run into when working with designers is that they’re stuck in “print” mode. They’re not entirely to blame. For example, even Photoshop doesn’t let you specify the size of your fonts in pixels (just points).

Getting the project off on the right foot should begin with a solid understanding of how the others involved will be delivering items, and how they should be delivered. Doing so will same time, money, and reduce frustration.

That said, let’s get right to the good stuff.

1. There is no such thing as DPI on the web

This is primarily because there are no standard subunits of measure in an inch on a monitor. No dots, no pixels, nothing; a 15 in monitor may have 640 pixels across, where another may have 1,280 pixels across.

Contrary to popular opinion, monitors don’t display stuff in 72dpi or 96dpi. They don’t display DPI at all. They display pixels. The number of pixels per inch varies by monitor size, resolution, manufacturer, and model.

DPI (or “dots per inch”) is a measurement for level of detail on a printed page; monitors are different.

2. Don’t use “points” or “picas” on the web

According to Wikipedia, there are 72 points to the inch (12 points per pica, and 6 picas per inch). Since there are no standards for dots or pixels per inch across monitors, there similarly can be no standard for points nor picas.

3. Use text for text

If you can read something on the screen, chances are you should use text — not a graphic that has a series of organized dots in it that represent text. There are any number of reasons for this:

• search engines can’t index organized dots inside images;
• screen readers can’t read organized dots inside images;
• to internationalize graphics representing words you’d have to have a number of separate images (or separate sprites within a single image) to represent that word (or phrase) in each language;
• when you need to change a word it’s much easier to do when it’s text, and not a graphic;
• transmitted text is much smaller (and therefore much faster) than graphics;
• text can be machine translated into another language, whereas graphics cannot;
• when a page loads, text shows up right away; graphics can take some time to load in, leaving an empty spot on the page where your text should go.

Obviously, this is not an exhaustive list (and feel free to add your comments below), but the point is clear.

There are some exceptions to this rule, namely:

• when the text is part of a graphical logo, it may be okay to use a graphic;
• when the text is part of a tagline, which logically extends a graphical logo, it may be okay to use a graphic;
• when the text is part of a graphic (a photo or some other picture), it may be okay to put the text inside that graphic.

What are poor arguments for using a graphic instead of text:

• I want the text to look just so, and I can’t guarantee that with plain text;
• I want to use a certain font, and my audience doesn’t have that on their machines, so I want to use a graphic;
• I’m not worried about speed or loading times, it loads fast enough on my machine;
• All our customers can read (insert language here), so I don’t need to worry about internationalization or translation;
• This font helps communicate something to our customers, “default fonts” don’t do that;
• I’m not worried about Search Engine Optimization, that’s your job;
• All of our customers can see, they don’t need screen readers;
• I’ll be happy to create all the images in all the different languages that we need.

Again, not an exhaustive list, just excuses that I’ve actually heard over the years (please add excuses that you’ve heard in the comments below).

4. There is no CMYK

CMYK is for printers, RGB is for monitors. If you get your colors perfect in CMYK, know that we’re only going to have to change them to RGB if you want them to show up on the screen. ‘Nuff said.