Print vs Web Design

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.

• Resolution
• GIFs and JPEGs
• Fonts
• Typography
• Plug-ins
• Navigation
• Colors
• Computer monitors

Resolution

• Resolution is the image quality measured in terms of how many pixels make up your image. It is commonly referred to as "ppi" (pixels per inch). Because your images are to be viewed on a screen, all web graphics should be no larger than 72 ppi. 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 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 designers have no control over.
• 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 creative font, then convert the selected text into a graphic. Use this option sparingly, though, since it will increase your web pages' 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 the creator or owner of a web site.
• 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. create a link to the plug-in creator's web page but the visitor is no longer at the original company's web site.
2. Some solutions to keeping your visitors' attention: 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. 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.
   

Navigation

• 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.

Colors

• 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.
  

Computer 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 Wintel 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.