Website Design Tips

Compatibility

Why this is Important

Compatibility is the easiest issue in website design to overlook. Everything works great when you look at your site! Most people don't have multiple browsers on their PCs, and even that won't spot all the possible problems. Don't try to make your site look fantastic on every possible platform [practically impossible], but there are a few things that can be done to make sure it is at least presentable.

How to Fix It

Resolution: There are a lot of people out there with laptops, or older PCs with not-so-good video cards and puny 14" monitors. So it is best to design your site to fit on the screen at 640x480 resolution. If you avoid using PRE tags and BR at the ends of lines, then your text will naturally wrap and it will still look good at larger resolutions. Specify your table widths as percentages instead of pixels [maximum about 96% to allow a little leeway] and the table will also expand to look good at any resolution. Few things annoy visitors more than having to constantly scroll back and forth to read each line of text. You can test by either altering the settings on your video driver, or resizing your browser to 640x480.

Non-graphical browsers: Besides those who are completely blind who use text-only browsers, most people with slow modem connections surf the net with their images turned off. So it is best to design your site to be presentable without images. This means choosing a BGCOLOR that is similar to the main color of your background image to avoid having things such as white text on a white screen.

Also, you should specify the height= width= and alt= parts of the img tag. Height and width specifies the size the image appears in your browser, either by pixel or percentage. ALT tells non-graphical browsers what text to show. This last is extremely important for images which are links - otherwise a visitor with his images turned off doesn't know how to navigate your site! For example:

It's okay to have images that include text, but the same text should appear for non-graphical browsers. This can be as part of the ALT= or as regular text near the image. Another way to handle this is to have a link to a "text only" page. See also Images.

If you use image maps there should be alternate ways for visitors with non-graphical browsers to navigate. A simple list of plain text links below the image map will do the trick, or a single text link to a separate site map page.

Java and JavaScript: Not everybody has the latest browser. And many people leave their JavaScript turned off for safety. [In my own case, my browser freezes or crashes much more often when my Javascript is turned on.] It's perfectly okay to have Java and/or Javascript, DHTML, or whatever the latest thing is on your site. Just make sure that those with older browsers can at least read your content and navigate the site. So if you use Javascript jumpboxes, provide HTML links as well - at least a single text link to a separate site map page.

Version problems: HTML is evolving, with new commands being added, and others taken away. Which leads to a lot of confusion at times. You can ask NetMechanic, WebsiteGarage and similar places to check your page for browser compatibility and HTML errors.