|
Click here
for Design Tips
Display Size
The variation in browser window size is harder to deal with. However, try viewing your Web site at both 640 5 480 and 1024 5 768 settings and see if you are happy with the appearance. You will find that the graphics and text take up different fractions of the screen at different settings, making layout very difficult. One thing to avoid is having the page so wide that some users will have to scroll horizontally to see it all—this is a sure way to annoy your visitors. The variation in the size of the browser window available for displaying your page comes from the screen resolution, how large the browser window is within the desktop, and on what browser features (buttons, toolbars, “favorites” menu) are displayed at the top or on the side.
I usually make pages that can display nicely at a width of 600 (this allows a few pixels for the scroll bar). Note the screen shot of the DC Tech home page seen at 640 5 480 (see Figure 4.) It is a bit crowded looking, but basically okay.
Below is the same page seen at 800 5 600. (See Figure 5.) The images are now smaller-looking, which allows me to open up a bit more space between images as well as a bigger margin on the right. It now looks less crowded, and is even less crowded at 1024 5 480. I would say it looks best at 800 5 600 (the setting of 60 percent of all visitors), but it looks reasonable at all common settings.
Fonts
When you specify a font to be used on a Web page, you are telling the browser to look up the font and use it to show the text. If that font is not installed on a particular computer, it will show something else. This may lead to a Web page looking very different from what you intended. To be safe, most designers use a small number of fonts and specify them in sets, such as Times, Times New Roman or Times Roman, or for a plain font use Arial, Helvetica or Verdana. These sets of similar looking fonts are specified because most computers will have at least one of them installed.
Do not make presumptions about fonts unless you specify them. People will go into their browser options and reset the font face, size and color to suit their preferences. So if you are not specifying these yourself, be aware that they might display quite differently for many of your visitors.
Even when you specify a font face and size, these can be interpreted differently. For example, Mac computers display any given font description 30 percent smaller than a PC. Recent browser versions for Macs have compensated for this and are making Web pages appear as they would on a PC (leading many Mac users to wonder why their browser upgrade is changing the appearance of Web pages from what they are used to seeing).
The bottom line is that you need to build in some leeway in the space intended for text. The text that nicely fills up a certain area of the page when seen on your computer might underfill or overfill it on another computer. In either case it can mess up the page layout if you have not allowed for it.
New Features And Browser-Specific Features
It would make Web design a lot easier if all new plug-ins, browser versions, and hardware were to be instantly added to every computer on the net— but the reality is that a significant fraction of net users are using computers and browsers that are a few years old. It is nice to make use of Shockwave/Flash/Streaming Video/Java/JavaScript/ActiveX/downloadable fonts, but you need to think realistically about what is going to happen when somebody comes in without these capabilities.
|
For example, consider what will happen with those people who come to your Web site and are greeted with: “To view this Web site click here to download Shockwave.” Occasionally somebody will install the plug-in you suggest, but the vast majority of such visitors will leave the site. Most people stick with whatever Internet software came with their computer, so telling them to upgrade their browser or install a plug-in is telling them to either go into unknown technical territory or to buy a new computer. Of those who know how to download and install whatever you are suggesting, the fact they don’t have the feature you’re suggesting installed probably means they have already decided they don’t want it. Telling them they need to “upgrade their browser” is only going to irk them. As much as you might love the feature, there could be very good reasons for not using it.
For example, many people choose to deactivate ActiveX for security
reasons, or deactivate Java for speed in
|
|
| browsing or due to limitations of a particular computer. Furthermore, a MS-WORD file you make available could be contaminated with a macro virus such as “Melissa,” the video file you make available could contain an “embedded executable” that could contain viruses or “trojan” programs aiming to take over the other computer, and so on. Remember that the “I LOVE YOU” virus did billions of dollars worth of damage within a day, before it was on the news or included in antivirus software. Technically savvy people avoid infection partly by security software, but largely by taking precautions about how they use the Internet. If you want to appeal to everyone who comes to your site, make it possible to use with only basic browser features.
|
Similar advice applies to features supported by only one browser. Remember that “the customer is always right.” If a person comes into your Web site with Netscape Navigator as their browser, s/he will not see your scrolling banner text or other “Internet Explorer Only” features (and vice versa for “Navigator Only” features). Visitors do not need to upgrade their browsers, you need to be aware of the limitations of what you are doing and modify it to avoid losing customers.
A sample of this can be found on the DC Tech home page. Most browsers run some version of JavaScript. The script on this page writes a scrolling message into a set of text boxes in the middle. There really is little concern for what happens when a person visits with JavaScript turned off or not installed. The text boxes come with a short welcome message already in place. A person not running JavaScript will simply see this message instead of the scrolling one, so s/he won’t even know that the page was designed for other users. With a little thought you should be able to develop a design that enhances the Web site for users with your intended plug-in without turning away or offending others.
Graphics
Images on a Web site are usually what make it look great, but they can also be what makes it take a long time to load. It doesn’t matter how great your site will eventually look, if people don’t see content that grabs their attention within five seconds they’re usually gone. Here are a few pointers:
- The total size of all files that need to be loaded to display a page should not exceed 40 KB, and the smaller the better.
- Include height and width attributes of an image. Providing these means that the browser can display the page as intended and fill in the images as they arrive. Not providing the dimensions means the browser might not display part of the page (possibly not any of the page) until all images have been loaded.
- For a highly detailed images (e.g., photographs) use the JPEG format (the file extension is usually .jpg), otherwise save images in GIF (.gif) format. When saving as a JPEG, you can trade off resolution versus file size. Try saving a few versions then open them in your browser. Choose the smallest size that works for you. Decrease a GIF file size by reducing the size of the color palette.
- Provide an alternate text description with the images. It is friendlier to those who do not load the images (e.g., visually impaired people using text readers, or those who turn off image loading for the sake of increased speed). It also provides search engines with information about what is in the image.
Closing Remarks
It would be a good policy to have both Netscape Navigator and Internet Explorer available to check your Web pages, and an older version of one of them (e.g., Navigator 4.0 and IE 5.0). Here’s a simple example of how to cover the basic possibilities with two passes through the Web site:
- Set your desktop to 256 colors and 640 5 480 resolution. Open up Navigator 4.0 and go through your Web site.
- Set your desktop to a higher color depth, 1024 5 768 resolution. Open up IE 5.0 and go through your Web site.
Anything that looks bad in either pass through the site will probably appear that way to at least 10 percent of your site visitors, so it would be a good idea to redesign it.
Doug Craigen is a former physics professor who has been using the Internet since the 1980s, and has been designing Web pages since the mid-1990s. His personal Web pages have become very popular, and cover such areas as educational children’s stories and errata lists for textbooks. While between physics jobs in 1998 he decided that rather than uproot his family again he would stay in Winnipeg and turn his success in Web site design into a new career. DC Tech is the resulting company; it offers various online services, Web site design, consulting and training. He can be reached at:
dctech@dctech.com, or www.dctech.com.
|