Building A Better Web Site (continued)

Grab 'Em with Graphics

You may think that your innovative product or riveting writing will be enough to keep people at your site. But it usually isn't. Putting some effort into creating attractive pages, with graphics that look nice and download fast, can really pay off. Luckily, you don't have to be a Van Gogh or Picasso to add graphics to a page.

You can obtain graphics for your site from a variety of sources: you can buy clip art packages at most software stores, scan photos or drawings with a low-cost scanner, or pick up a digital camera and shoot photos for your site yourself. There's also lots of art that comes included with Web-editing software.

How can you use art that you find on the Web? Just as you can view the HTML of any page on the Web, you can download any image by right clicking it and choosing "Save Picture As." Of course, just because you can download it doesn't mean you can legally use it on your own pages. Always check with the web site you grabbed an image from to make sure the artwork is in the public domain, and that you have the right to display that graphic on your own site. Once you've downloaded an image file, you add it to a page using the <img> HTML tag. (Web editors usually have shortcuts for inserting images into pages.)

There are primarily two types of images that you'll use on your pages: JPEG files (which end in .jpg) and GIF files (which end in .gif). JPEG and GIF are known as compressed file formats because they shrink image information into tiny files that download fast (which is important on the Web). JPEGs support a greater number of colors than GIFs and are great for saving continuous-tone images such as photographs. GIFs excel at compressing flat-color art, and are great for illustrations that have a lot of solid colors. If you're creating graphics from scratch or optimizing images from a camera or scanner, it's good to bone up on some of the finer points of saving GIFs and JPEGs (see the links below).

Image Resources
EarthWeb Image Tutorials
Adobe Photoshop Elements
Adobe Fireworks

All Pages Are Not Created Equal

The great thing about the Web is that it's based on open standards. Web pages are built with HTML (a standard formatting language) and are transmitted to browsers by HTTP (a standard networking protocol). These standards mean that different users on different computers all around the world can easily view the same Web pages.

Unfortunately, this universality doesn't completely carry over into browsers and operating systems. The two main Web browsers-- Netscape® Navigator and Microsoft® Internet Explorer -- sometimes display HTML commands differently. And some Web pages look different depending on whether you're viewing them on a Macintosh or a PC.

What this means for Web designers is that it's critical to check how pages look on a variety of browsers and platforms before putting a site live. Examining your pages in the latest versions of Netscape® and Microsoft® Internet Explorer on both a Mac and PC is a must. Viewing your pages on several older browsers (those that don't support the most recent HTML commands) is also a good idea.

There are work-arounds for browser and platform incompatibilities. As you get more HTML savvy, you can learn ways of creating pages that "fail gracefully" in browsers that can't interpret certain HTML commands. For instance, there are ways to code HTML tables such that the information is still somewhat organized when they are viewed on older browsers that don't do tables. Another good HTML programming practice is to include descriptive ALT information for all of your images. This "alternate" information is displayed in browsers that can't view images or have images turned off.

Color is another issue to think about when creating pages. Some image-rich pages can look less than perfect on 256-color monitors. This is because browsers running on such monitors can only display the so-called "Web-safe" palette of 216 colors. If a pixel isn't Web safe, it gets converted to one that is. Fortunately, most computer systems now come with monitors that display thousands or millions of colors, and in such cases Web-safeness is not an issue. To learn more about using Web-safe colors, see the links below.

Web Accessibility Resources
WDG HTML Validator
The Browser-Safe Color Palette

BACK TO INTRODUCTION

** Based on annual agreement