Despite the lucrative business opportunity of the web, many companies create sites that receive such low sales that do not even cover online costs. The problem here though is not the web, but an inability to distinguish web promotion from everything that’s come before it. When some people turn on their computer, they actually think they’re seeing a printed page on their screen. They then assign print strategies to a web layout. But many of the rules of print simply don’t apply to the web, so the end result is usually a mess, and the original promotional message of the business lost.
To avoid these same pitfalls so many businesses have faced, this “Print vs. Web” guide will help you identify some common problems involved in the creation of a web page and how to keep the focus on promoting your business effectively.
RESOLUTION: Resolution is the image quality measured in terms of how many pixels, or “dots” make up your image. It is commonly referred to as “dpi” (dots per inch). Because your images are to be viewed on a screen, all web graphics should be no larger than 72 dpi. Anything higher has no improved effect, and only creates longer download times.
GIFS AND JPEGS: GIF is short for Graphics Interchange Format. GIF’s advantages are that it is supported by practically all web browsers, can include transparent backgrounds, supports interlacing (providing a low-resolution preview of the graphic to the viewer while it downloads), and can be used as an image map (allowing the viewer to click on the graphic as they would a regular link to another site).
JPEG is short for Joint Photographers Experts Group. JPEG is superior in rendering color and detail found in photographs or graphics using blends, gradients, and other tonal variations. Sometimes it’s painfully obvious that a graphic on someone’s web page was saved in the wrong file format. Photos may look too grainy, or flat-color images may look too fuzzy. When selecting GIF or JPEG for your graphics conversion, it is important to consider the type of image you will be working with . Use a GIF format if your graphic consists primarily of line art or flat colors without gradients. JPEG-converted graphics are best for photographs or images with fine tonal variations in colors, such as images with gradients or metallic images. Choosing the right file format is not only important for the quality, but for keeping your image’s file size to a minimum.
FONTS: For your audience to view the same font (an unique set of type characters) you see on your own screen, they must also have the same font installed on their own individual computers. Otherwise, their browser will instead show a substitute font which you have no control. For this reason, be more conservative with your choice of fonts. Display only what the general public already has on their computers. If you’re looking for a contemporary look, use standard fonts like Helvetica or Arial. If you’re looking for a more sophisticated look, use fonts like Times or Verdana. If you absolutely MUST have everybody see your relative font, then convert the selected text into a graphic. Use this option sparingly, though, since it will increase your web page’s download time.
TYPOGRAPHY: The harsh reality of web design is that you simply don’t have the kind of control over how your text appears. It is far less sophisticated than what is possible in print media. The choice of font, the exact size of the text, where the text breaks, and how the text reads – all are aspects of typography. And on a web page, they are mostly determined by the web browser, not by you. At a screen resolution of only 72 dpi, text is nowhere near as sharp on screen as it is on a print publication. For this reason, be very careful not to overload your readers with too much text and allow for some open white space.
PLUG-INS: There are several mistakes designers can make when it comes to adding plug-ins (a software extension that provides added capabilities to the browser) to their site. They may 1) fail to include a warning to the visitor in advance that a plug-in is needed to view the site and where they can download it, or; 2) create a link to the plug-in creator’s web page but the visitor is no longer at the original company’s web site!
Some solutions to keeping your visitors’ attention:
1. Code the link to the plug-in so that when it is clicked a new browser window will appear, rather than losing your web page.
2. Better yet, try to obtain direct access to the plug-ins FTP site so that people will only see your web site while the plug-in downloads.
EASY TO NAVIGATE: The web is a much more interactive experience than a print publication. The viewer controls the sequence of web pages and jumps from page to page using links. As a result, the web designer must organize the content on the web pages very differently from the way one might organize them from a brochure, newsletter, or book. Remember, your web site is not a document your audience can physically hold. You can’t assume the viewer has seen previous pages or will proceed to subsequent pages on your web site. Each page must be able to stand on its own. Your audience always needs to be reminded where they are and how to get to anywhere else on your site.
COLOR: The advantage of color on the web is that it’s cheap. Technically, you can produce millions of colors on your screen, provided your monitor and video display are a decent quality. The disadvantage is that there are actually only 216 Web-safe colors – meaning that these are the only colors that appear the same on all monitors and operating systems without dithering, be they PCs or Macs. It is important to understand that colors from a print piece cannot be effortlessly transferred to a computer screen. Many print variables – paper thickness, texture, color, absorbency; inks – are not available for a computer monitor – a convex glass surface producing a screen flicker to project the image you see. Also, too much color on a web page can be distracting and counterproductive. The most successful strategy is to use color sparingly. Adding too many colorful items can create the visual equivalent of noise. Instead, leave room for white space. This will help your visitors focus on the items that are highlighted in color – a perfect opportunity to showcase your promotional message.
MONITORS: A web site that looks clean on a monitor with millions of colors could look dithered and jagged on a monitor with only 256 colors. Colors that appear bright and sharp on your screen may appear dark and dull on another’s. A web page that appears well suited for a 17″ or larger screen will appear cut-off on a smaller one. Even the operating system can affect your monitor display; Macintosh computers, for instance, have a higher gamma display, and web pages show up brighter on them than on Windows based PCs. Before making any design revisions, first view your web page on several computers. If you only have one computer, go somewhere off-site and view it. See how the web site reads under poor lighting as well. All of these factors can be observed before reaching an acceptable medium.
“LOOKS GREAT, LESS FAILING!”
A successful web site requires not only individuals who are skilled in their own particular field, but a cohesive team effort where everyone performs their work with the other partners in mind. For the client, it means trusting in your designer’s experience and an understanding of what are the realistic possibilities and limits of the web page. For the designer, it requires switching from the mentality of “look what I can do,” to “look what I can do for your business.” We like how Ann Myrna, President of Allegro Computer Concepts, summarizes it: “Graphic design for the web involves not only capturing the look and feel that conveys the client’s image and positioning, but it also involves designing the user interface for a computer application. If the look of a web site conveys the client’s image, but potential customers can’t find the information they’re looking for, then the site ultimately fails. Web design takes a team of creative people to successfully design a site that looks good and is usable.”