Creating Intuitive Web Sites

You’ll want to create a superb site that attracts many visitors. Having an informative site is nice, but the key to make it attractive is through creating quality and quick-loading graphics.

We’ve reviewed many of the free graphics applications that can be legally downloaded from the Internet and we firmly believe LView Pro ranks among the best of them. It supports many Web image formats and has the ability to create transparent GIF images. It’s a nice application and we highly recommend it. The only major downside it has is that it doesn’t have illustration capabilities, which means you will have to draw graphics elsewhere or buy a nice commercial illustration program. But why not draw your graphics in Microsoft Paint (which is bundled with Microsoft Windows) and copy/paste them to LView Pro? You can download a copy of LView Pro at http://www.lview.com. It’s currently available upon a shareware license. If you prefer illustrating your graphics with another program, try Imager. Imager is a nice freeware program available for download at the Tucows Network (just type in “Imager” in the keyword field). Unfortunately, it only has the ability to save in “.bmp” and “.jpg” formats but that should be fairly sufficient for your needs. If not, you might have to do some importing and exporting to save in the format you want (such as “.gif”). If you’re looking to create some outstanding graphics, you should definitely check out CoolText (http://www.cooltext.com), an incredible online graphics generator. With this site, you can easily create colorful graphics that retain a nice professional appearance. And best of all, the service is entirely free of charge and you can create as many graphics as you like.

It’s important to realize the differences between the popular image formats on the Web. The two most commonly used image file formats for the Web are Graphics Interchange Format (.gif) and Joint Photographic Experts Group (.jpg or .jpeg). Although the Portable Networks Graphic format (.png) is somewhat popular, some browsers still cannot display images associated with the format. The explanations given below will discuss the differences between the GIF and JPEG file formats.

GIF file format (.gif)

• Best choice for line drawings and graphics with few colors or sharp edges
• Supported by all graphical Internet browsers
• Supports up to 8-bit color (256 possible colors)
• Stores custom palettes with your image
• Supports transparent background and image interlacing
• Provides lossless compression (saving the file will not change the appearance of your image)
• Limited compression required (which means GIFs display fairly quickly on screen)
• Supports image maps

JPEG file format (.jpg or .jpeg)

• Best choice when saving images with broad tonal ranges, such as photographs or scanned images
• Supports up to 32-bit color (16.7 million colors)
• Excellent for photographs and scanned images
• Supports lossy compression (loses unnecessary information to produce high quality images with a high level of compression)
• The higher the image quality, the larger the file size
• Requires some decompression time when displaying on screen
• Can be displayed progressively
• Supports image maps

There are also other programs that can filter your graphics to make them more Web-ready for the pressing download time requirements of Internet. We recommend purchasing a copy of WebVise to compress your graphics. This is a great investment toward the quality and value of your site. A great graphics program, WebVise (http://www.autofx.com)optimizes JPEG and GIF files for the Web and is an invaluable tool when speed is important.

Another popular program, Photo Soap (http://www.metacreations.com/products/soap), developed by MetaCreations, is primarily used to make regular graphics have the appearance of being designed by professional graphic designers.

Reptile 2, a program developed by Sausage Software, has the ability to create colorful textures that can be used for Web page backgrounds. It’s available as freeware and can be downloaded at http://www.sausage.com/reptile.

If you really want to make an investment towards the final appeal of your site, you may want to look into commercial graphic editors. We’ve listed some of the most popular graphic editors and illustration software available on the market today. Many of these software programs area available with a trial version so you can “try before you buy” and decide which program fits best for your needs.

Recommended Software

• Adobe Illustrator – The industry-standard illustration software offering increased productivity and superior integration.
• Adobe Photoshop – The world-standard image-editing solution for print and the Web.
• Corel Photo-Paint – From precision editing to original painting, Corel Photo-Paint gives you the creative freedom you need to design extraordinary images for print or the Web.
• Corel Draw – The CorelDraw Graphics Suite delivers powerful integrated tools for illustration, page layout, photo editing and painting.
• Macromedia Freehand – The tool of choice for designers creating and producing illustrations and layouts for print and the Web.

Creating an easy-to-use interface that’s both quick-loading and visually appealing can be a fairly tedious task. The navigation bar is really the solitary element that designates the easy of use for your site. Make your buttons large enough to click on and place crisp, readable text on them. If you’re site isn’t easy to navigate thorough and gives your visitor a hard time, he or she probably won’t return no matter how useful the information is. They almost always have the option to obtain the same information from other resources. People also expect efficiency, which means you shouldn’t make just a few elements easy to use. Spend some time creating an excellent interface to make your visitor happy and make them come back. In short, design your interface carefully… with your visitor in mind.

A Web interface should retain the following qualities:

• All interfaces should reflect the interests of your target audience. Add the level of interactivity and balance of graphics and text appropriate to your visitors.
• Avoid pointed corners and straight lines whenever possible. Generally speaking, people prefer curved lines to the basic appearance. If you’re Web site is aimed at promoting your business practices, however, you may want to consider going for the pointed corners and straight lines to satisfy all the hard-pressed, straight collar business people out there.
• Make the interface colorful. Definitely avoid using simply black and white. You may want to consider referring to the “Color schemes” section on page 38 to assist you in creating an aspiring visual.
• Make it no larger than 20-25% of your Web page unless your site is based on an image-map.
• Keep the navigational elements consistent throughout your Web site. You don’t want to cause a lot of confusion.
• Most Web page interfaces appear on the left side of the screen. So how do you get it there if you want something on the right side? Create a table (with a 100% width) and place your navigation bar/user interface in the first <TD> cell (if you base your site on 2 cells) or the 3rd cell if its 4. See the diagram illustrated below.

Either way is fine, its up to you to decide which way would be easier for you to organize your web page data. Please don’t think you need to use one of these two illustrated methods. There are many more common layouts and we encourage you to look into them (or design your own!)

Side Note: Avoid creating a background image inside the navigation <TD> cell area. The reason for this is it creates a blank area around the table’s parameter, which deducts the appeal of your site’s layout. Instead, create a new image about 2000×1000 pixels (width x height) in length and place your navigation bar’s background element to the left. The reason for the large image set-up is that it spans across a typical monitor’s screen so the background image won’t tile. Unfortunately, you will need to sacrifice saving download time, but the final result is worth more than having a user wait a few extra seconds (sometimes milliseconds) to load. Generally, the more white space an image contains, the faster it loads.

We suggest creating a savvy curvy navigation bar (for informal Web pages) because it looks neat and it’s very popular. These navigation bars are typically rectangular but have a curvy right edge. If you choose to create this type of navigation bar, avoid sharp pointed rectangles and squares. Circular graphics look best for use with curvy navigation bars.

Now that you’ve got a site map all laid out for you, creating your site and organizing pages is a simple task. Your map will tell you how to design your navigation bars by knowing the primary navigational links to other pages. It will also tell you how to piece your pages together–which will be discussed towards the end of this chapter.

If you look at your pages that stem from your home page, they will designate the names of your hyperlinks (or graphic hyperlinks) that are normally placed in your navigation bar. For every one of these pages, it’s recommended that you provide a small string of text that refers back to the home page. Although this is not entirely necessary for navigation purposes (they can always hit the back arrow in the browser’s taskbar) some Web surfers find it more convenient to use in-page navigational features. And if you support this particular group of people’s likes, it will add points to the overall value of your site, encouraging them to return to it later on.

To refer back to the home page, many Web developers commonly link back by placing the words “Home Page” in brackets, placing a graphical depiction of a small house or a back arrow, or through a hyperlink saying “Click here to return home.”

Imagine you’re surfing the Net and you come to this huge Web site with flashy graphics that take a long time to show up on your screen. Although this may look like a great site, it doesn’t demonstrate the rules of common Net etiquette. A visitor may be forced to leave if he or she experiences too much inconvenience with the site.

We’ve given you a list of common etiquette practices a good Web designer implements to their entire site. If you follow these examples, you’ll produce a better site that would have greater potential at winning a nice award.

• Make sure every Web page is less than 100 kilobytes. Producing a page larger than this general standard will produce a rather irritating visit. To check individual file sizes, right click on the associated Web page files and go to “Properties”. Add the file sizes together using a calculator (you can use the Windows calculator by going to “Start”, “Programs”, “Accessories”, and clicking on the “Calculator” icon.
• Make sure your links go to the areas specifically labeled by the hypertext or graphical hyperlink. Nobody likes to be misled (especially to promote some other product or service). If you hate receiving phone calls from sale people, then you’ll have a sense of knowing how it feels to be misdirected for the purpose of promoting something.
• If you use the META redirect feature, be careful how you use it. Most people like to surf the Net on their own without any automatic assistance. Most common uses of this tag is for a) redirecting users to a new Web page if the previously existent page is no longer available and b) displaying a splash screen and linking the user to the home page.
• If you have a photo album on your site, for example, provide a thumbnail image no larger than 100×100 pixels so the user can sample what the full image looks like without investing too much download time.
• Make sure this is a separate image. Don’t reduce the graphic’s display dimensions because this will still be the whole image. Its also nice to provide a short description of the image followed by a description of the file size.
• If you offer on-site downloads, supply the file size and the approximate download time, if known. Approximate download time is most often calculated for 28.8 Kbps modems.
• Try refraining from using the latest technology unless its appropriate to your target audience and you believe there’s a good chance that they have the knowledge to install the necessary plug-in.