No matter how attractive a site’s design, if it isn’t practical, it’s not doing its job. Design for the screen involves a new set of requirements to deal with and pitfalls to avoid.
| 1 |
Keep graphics files small. Cyberspace has the unique distinction of being the first medium where you can actually bore your readers by being too exciting.
Design for the World Wide Web is a balancing act between the graphic “wow” and the real-time “now.” The more graphically intense a site, the longer it can take to download. The longer it takes, the higher the probability that the visitor will leave before it’s done.
On intranets, smaller file sizes can help make the system run faster with less overhead. Performance means productivity.
While modems are getting faster, most people on the Web are still connected at 28.8–and even then the Web doesn’t always run at top speed.
With a 28.8k connection, your computer can receive, on average, 2K per second.
No one wants to wait even 30 seconds just to see your site logo–if your graphics are too large people will turn them off or jump to another site. If possible, keep all graphics under 20K. Essential graphics for navigation should be less than 10K. You can do this using reduced color palettes, such as a carefully selected 4-bit palette instead of the full 8-bit palette. In some cases this can reduce graphics in half.
For the most efficient files, you must use the right file type. Here’s the simple rule for deciding which format to choose:
- If your graphics have many colors, save them as JPG files.
- If your graphics have few colors, choose GIF.
- When using GIF, try optimized palettes that contain only the colors used—they can cut file sizes in half.
Use only the resolution you need. Computer screen displays have an average resolution of 96 dpi (dots per inch) for Windows, 72 dpi for the Mac. This means your graphics should be saved at a resolution not greater than 96 dpi—otherwise you’re just wasting your readers’ time.
Here are some Web-centric graphic programs that can help reduce your graphics:
Programs to use by themselves:
- CorelXara – This exceptional Windows-based illustration program comes complete with everything you need to create the smoothest, yet most efficient, Web graphics and animations. The program is lightning fast, extremely powerful, yet features a clean, simple interface that makes it great for new users, and design power and flexibility that’s great for professionals. Graphic previews of all exports help you create the best-looking, fastest-loading Web graphics. Under $100, Windows only.Macromedia FireWorks - A professional-strength illustration program designed specifically for web graphics. Special effects let you enhance text and graphics. Previews help you create the most efficient graphics.
Programs to use in conjunction
with other graphics programs:
- Adobe ImageStyler and ImageReady – These programs are for professionals who already use graphics programs such as Illustrator or Photoshop. Their Web-specific features include animation and export previews. The interface will be familiar to Adobe users but may be overwhelming to newer users. Windows and Mac.Debabblizer – This comprehensive graphics tool helps you optimize Web graphics, reduce palettes and therefore file sizes, and perform batch conversions to and from countless graphics file formats. Windows and Mac.Ulead SmartSaver – Find the best balance between image quality and size using this utility. Windows only.Autofx Webvise totality – This Photoshop-compatible plug-in lets you preview Web exports so you can create the most efficient files for the Web. Windows and Mac.
| 2 |
Keep text files small. Text files rarely need to be longer than 10K. Instead, they should be broken into logical chunks and linked. If a home page doesn’t load quickly, visitors can lose interest and jump else
where.
| 3 |
Design for easy reading. Don’t trade readability for style. Make your backgrounds as light as possible (white or pastels—just make sure they use “Web-safe” nondithered colors). If you use a background image, keep the action on the side, out of the way of the text, or make it very light, low contrast, and nondithered. Use black backgrounds only on pages with large text, such as headings, then switch to dark text on a light background for pages with “normal” size text.
Because most computer screens are wider than they are tall, and good typography for the best readability demands shorter line lengths (between 30 and 70 characters per line), it makes sense to put navigation on the left (or right) side of the screen. This layout is becoming increasingly popular because it’s practical and allows the site to reserve part of the screen (usually between 150 and 200 pixels) for navigation and identity. Use fixed-width tables to assure that lines don’t get too long—no matter the viewer’s resolution or window-size.
| 4 |
Design for 256 colors (8-bit) and 640×480 resolution. That’s the lowest common-denominator for people with older computers. Many people viewing the Web can only see 256 colors at a time on their computer screen, so creating 24-bit photo-realistic files is usually overkill. Create and view your Web site at 640×480 because that’s the screen resolution many of your readers will use.
That said, this is changing. As more people get newer computers, they can see more colors (thousands to millions) and higher resolution. Current statistics say that only about 11% of site visitors have only 640×480 resolution, and only 8% have only 256 colors. That number is also decreasing by about 1% every three months.
That said, it’s still a good idea to design your entire page for 800×600, but keep the text portion of your site within 640×480. That way you get the best of both worlds. People with older computers will still be able to read your content, even if some parts of the page require scrolling.
Also, as LCD display prices drop, more people will buy them. Many LCD displays can “pivot” to show the screen in portrait mode (more like a normal piece of paper). In that mode, the displays show 768 wide by 1024 tall, so designing for 800 wide is too wide. So still don’t design for 800 wide, design for around 740 wide.
