While you can prepare printed material with a great deal of certainty on what the viewer will see, that is not the case with Web Design. Viewers have different computers and operating systems, different web browsers and different versions of those web browsers, different monitor sizes, different plug-ins and software, and different internet connections.
Viewers using different computers may not see the same fonts. Viewers using different monitor sizes will see a different resolution of web graphics. The web page might either fill the screen or only be a small portion of the screen. Different operating systems and software will cause a differentiated experience as well. If Flash is not installed a very modern web site might break down. If quick time is not installed an embedded movie file might cause an error. Viewers using dial up versus DSL versus Broad Band will have a very different experience when viewing a web site. Pictures and Graphics that seem to fly through one computer will take forever to load on another.
Most of the above challenges can be handled by a minimalist web design philosophy. That is, less is more. Keep the graphics, movies, and flash files to a minimum. Compress picture files and only use graphics when they add something relevant to the message of the web site.
However, as the owner or designer of a web site, one issue will cause more frustration than anything else. Browser compatibility is the albatross of web design. While there is no quick fix, this problem, like many others, is best handled with awareness and pro activity.
The follow is a quick summary of some of the issues I have run across in designing web sites. With each item I have tried to suggest a work around if available.
The primary issue revolves around the Document Object Model. When selecting elements, the correct or W3C way is document.getElementById. Of course IE prefers the document.all route.
When writing a script, double check its functionality in IE, Firefox and Netscape. Generally, you can avoid some errors by using a two branch conditional. Set up an If (document.getElementById ) and and If (document.all). This will eliminate most of the errors I have seen (and made).
There is a plethora of other differences with DHTML between browsers. Most of them are more related to CSS properties and values than to the structure of your script. One strategy is to send viewers to different pages depending on what browser they are using. Another option is to question what value the particular script is adding to the page. It is better to have no script than a script that does not work properly.
Most browsers seem pretty consistent with CSS formatting. By formatting I am referring to properties such as color, font-size, text-align, etc. Generally check your pages in Fire Fox, Netscape and IE before publishing.
Not all browsers or all computers understand each font family. Limit yourself to the more common fonts.
Browsers handle percentages differently. Stick with pixels
Browsers are very different in how they handle CSS Positioning.
IE includes the border, margin, and padding within the total width measurement. The other browsers consider the width to be just the interior area. One option is to keep your margin-left, margin-right, padding-left, padding-right, border-left, border-right to negligible amounts. The other is to use the voice family hack then declare the correct w3c width. The other is to use the html>div selector which IE will not understand to set the width for NS and FF.
Never seems to work exactly. This is OK to use if you do not have a lot of adjacent elements. Other wise I would stick to pixels.
Percentages do not seem to work. Stick with pixels
IE will expand a division if the content is larger than the size you specified. Set overflow to auto for sections of your web page, like the contents area, that might grow beyond their container.
Browsers are very inconsistent with this. Do not use float for the main logic of your web layout unless your site is very simple.
When positioning absolutely setting the bottom property can lead to strange results. Use this only when your site is simple and you page length is always less than the size of the browser screen.
Percentages are interpreted differently. Stick with pixels.