Variability in web page displays

It's easy to make web-pages,
but it's very difficult to make good web-pages

Web page design is very different from the print media. A page which looks astonishingly beautiful on your computer might be completely messed up on another. In the print media, you are quite sure that whatever you design on the computer will show up on paper. However, the display of the web page is determined by many factors most of which are beyond your control. Here are some things which affect the display of a web page:

The browser

The display of a web page is strongly dependent on the browser on which it is viewed. The situation is made worse if you use browser specific HTML tags or browser specific code JavaScript.
In the fight for a larger browser market Internet Explorer and Netscape introduced several browser specific tags - examples, the <BLINK> tag of Netscape or the <MARQUEE> tag of Internet Explorer. However, since the last one year there have been good efforts (thankfully!) from all companies developing browsers to follow the HTML standards laid down by the World Wide Web Consortium (W3C). This is indeed good news for web designers and web developers. However, certain issues especially those concerning Cascading Style Sheets (CSS) still need to be ironed out. Any case, it is your job as a web designer to check your web pages under the popular browsers - Internet Explorer, FireFox, Netscape and Opera and I recommend having these installed on your system

The browser version

A new browser version is released with great fanfare and creates ripples across the web development community. However, not everyone is a web designer... the common man still takes time to adopt new technologies. Now you can either choose to ignore the slow coaches or check if your web pages continue to display correctly in the older browsers.
For example, Netscape 4.7 in my opinion was a really painful browser to code for. The percentage of visitors to this web site using that browser has become negligible and so I have preferred to put a good amount of CSS that might not be visible to the users of Netscape 4.7x - hence I have chosen to ignore such visitors (No offence meant, please! If you are still a Netscape 4.7x user, guess it's time for you to change - Take a look at Firefox from Mozilla and you will soon be thanking me.)

The operating system - Platform of the client machine - Windows, Linux (Unix), Macintosh etc.

It was a known fact that even the same version of a browser will render a web page differently across different platforms. However, such issues have now been ironed out, but there is no harm to spend a few minutes on a different platform just to see how your web site looks on that machine.

The screen resultion used by the monitor

A budding web designer usually has the latest computer with a high quality monitor (Aren't we all Gung-ho for the latest gadgets?). These monitors would probably be set at a high screen resolution depth such as 1024x768 or 1280x1024. The designer thus, develops web sites based on such screen resolutions... and this according to me is the most common mistake. Not everyone has high end monitors or even if they do, the chances that the monitors would be set to high screen depths is low because everything on the screen becomes small - especially font sizes. The 800x600 screen resolution is still being used by a good number of web surfers and they cannot be ignored. hence, in my opinion, web sites should be designed based on 800x600 screen resolution.
Finally, since we are on the topic of screen resolutions, the best approach would be to employ flexible layouts for web sites - instead of using pixel values to set the width of the main layout table (and the same goes for specifying the width of <DIV>s used in cascading style sheets), use percentage values. So the width of the web page will adjust depending on the screen resolution. A case in point is this web site!

The color depth of the visitors' monitor

A couple of years back, this was quite an issue and web designers used only web safe colors. However, modern browsers and the monitors they run on are not constrained by displaying only web safe colors. So I don't think your creativity should be kept in check unless you want your web site to look the same for each visitor.

The fonts installed on the client system

This is one of the most common requests I get from clients - We want to use that beautiful scripty font on our site. They fail to realize that only a section of their prospective visitors, if at all, will have the font installed on their systems. This, obviously, depends on the font - for example, you will find the Trebuchet font on most Windows XP systems but then again, it might not be present on majority of Mac, Linux or Unix machines. Do not think that just because you have the font on your system, everyone else will also have it. And expecting your visitor to download and install a font just to view your web site is like wasting time - it's expecting too much out of your visitor. The question you should ask yourself is... will you download and install a font if asked on a web site?
The best bet is to use Browser compatible fonts. This way you can be pretty sure that your web site will appear the same (or almost the same) on different browsers and platforms.
Finally, there is a way to use that "beautiful scripty" font and it's by creating images. Unfortunately, search engines cannot index images and the ALT attributes are not given as much importance in ranking and indexing as good old plain text.

Now that you know the different variables in web site design and development, you will realize that creating a site is not as simple as it seems. As I had mentioned at the start of this article: Good web design is indeed pretty tough. With so many variable governing web site display the only recourse is to understand your audience and test your site on a variety of systems and browsers.