Designing Your Website for Browser and Platform Compatibility

Tips on making your web page accessible to more visitors


Designing Your Website for Browser and Platform Compatibility (Updated)

by Christopher Heng, thesitewizard.com

In the early days of the Internet, I used to come across many sites advertising "Best viewed with Netscape" or "Best viewed with Internet Explorer" or the like.

These days, such labels seem to be rarer. And no wonder. Webmasters today put an inordinate amount of effort to promote their sites on the search engines and elsewhere, and it's unlikely that they'll want to turn away any visitor just because he/she uses a different browser.

Along with this principle of catering to the widest possible audience is the principle of designing your page for compatibility with different browsers, operating systems and hardware.

In this article, I will discuss four compatibility issues. They are by no means exhaustive, but they are at least starting points to designing a site that will be viewable by more visitors.

Screen Resolution Issues

When I first wrote this article in 2000, the majority of visitors (53%) arriving at thefreecountry.com (where this article was first published before thesitewizard.com came into existance) used a display resolution of 800x600, 31% used 1024x768, and only 8% used 640x480. This situation has changed, and today, the bulk of the visitors using desktop browsers at both sites have resolutions far greater than 1024 pixels in width.

If you design your site with fixed widths, you need to be aware of the above. For example, if you design for a very wide screen, you will force those visitors with a smaller screen to scroll their screens horizontally to see the entire page. Horizontal scrolling irritates a number people (particularly if they have to scroll left and right continually just to read your sentences), hence many sites try to avoid it. They do this by either designing with a fluid design (as thesitewizard.com currently does), where the page automatically fits whatever screen resolution the visitor uses, or by designing it for a worst case screen resolution (eg for a 800x600 or 1024x768 screen).

If fixed width is your cup of tea, in my opinion, you should not design your pages to require more than a 1024x768 display resolution. Doing so will probably displease at least half your visitors, who will have to repeatedly scroll horizontally (back and forth) just to read the sentences on your page. If, despite this, you feel that you need a larger fixed canvas, you can use a trick I've noticed on some sites: they put optional material (like advertisements) in the rightmost column of their web page. This allows visitors who have smaller screens to ignore the rightmost column; they can read the main content without having to scroll horizontally.

Of course, if you only use relative widths with percentages like 100%, 80%, your page already caters to different screen resolutions (unless you put graphic images on your page that exceed the widths of the columns).

Update: Please note that this article was written in 2000. While the basic issue of screen resolution remains relevant, most of today's desktop browsers have higher resolutions (ie, higher than 1024 pixels in width). The new problem nowadays are the mobile browsers, that is, the web browsers found on smartphones. The small size of those devices present a new set of issues for webmasters, not easily solved by using relative widths. I will address these in a separate article.

Colour Limitations

Update: this section on Colour ("Color" if you use US English) Limitations is outdated. Most if not all computer monitors support lots of colours these days.

It may or may not come as a surprise to you that a colour code like "#F2C3BE" results in different colours on different systems, depending on the number of colours in your visitors' colour palettes, their monitors, etc.

For example, if you choose a colour that looks good on your 24-bit colour system ("True Color" on Windows, "millions of colors" on Mac), and your visitor goes to your site using a 256 colour setting on his system, your colour will be dithered to fit into the more limited number of colours in his palette.

What looks to you like beautiful shades of colours may thus turn out to be ugly combinations on a different system.

Of course, few people use 256 colours on their system anymore. As such, many webmasters are abandoning the old technique of only using colour combinations that are multiples of the hexadecimal "33" (which are supposed to be safe to use in that they display fairly similarly across the main platforms).

However, if you think that you can now use the next lowest denominator, the 16-bit colour setting ("High Color" on Windows, "thousands of colors" on Mac) safely, think again. Contrary to what you might expect, the 16-bit colour palette is not a subset of the 24-bit colour palette: apart from black and white, the colours in the two palettes are not identical. If you design the colour scheme of your site while working from one palette, be sure to switch to the other colour setting to make sure that your colour scheme blends well in the other setting as well.

Frames

I'm looking at frames from two points of views here: screen resolution and people who browse your site using speech software.

One common complaint that people have against sites using frames is usually that webmasters tend to forget that visitors don't have the same large screen resolution that the designers have when they created the web page. Sites with frames tend to provide a smaller area for people to view the main content of the site, since the outer frames occupy some of the screen real estate as well. If the web designer has not checked his site using a lower screen resolution like 800x600, and tested its usability with those lower resolutions, he may not be aware that the site is difficult to use in such situations. Visitors may have to scroll horizontally and vertically continually just to read the content. The situation is worse if the designer removed the scroll bar (because it looked fine without it on his high resolution screen), and visitors find they can no longer scroll left/right/up/down to read the content.

If you use frames on your site — be sure to check how it appears under lower resolutions. By "check", I don't mean to see if your site still looks pretty. Try reading all the content on your site with those resolutions. If you find that the site is inconvenient to use under those resolutions, you may need to rethink your design. Remember, your visitors don't have the same amount of patience with your site that you have.

Framed pages also pose certain difficulties for people who have to use speech software to access your pages, such as the visually impaired. Unlike people using a visual web browser, the speech software reads every item on your pages and frames serially. The person using such software does not have the ability to skip portions of the page because it appears irrelevant. Neither is he able to match what is displayed on one frame with the content appearing in another. Remember — matching the content of one frame with another requires ability to see the layout.

I'm not saying that this necessarily precludes the use of frames on your site. What is needed, instead, if you think you really need to use frames on your site, is to plan carefully so that both the user with a low screen resolution and the person using speech software are able to access your site as you intend.

JavaScript Availability

Should you use JavaScript on your web page? While it is true that many people use browsers like Internet Explorer, Firefox, Safari and Opera, all of which support it, it is also true that there is a small percentage of people who use browsers that do not support JavaScript. This small percentage is not confined to people using old browsers or those that have disabled JavaScript in their browsers. People who use handheld devices may not be able to read the content generated using JavaScript on your site.

My personal preference is not to rely entirely on JavaScript to get the job done. That is, whenever I use JavaScript in my pages, I try to make the page work even if JavaScript is not available. By "work", I mean that the visitor is still able to navigate the site and read the material on the page. In certain situations, I use a combination of JavaScript and server side scripts (such as PHP scripts) to do the job: the JavaScript is used if possible, else, a server side script is invoked if the visitor hits a form button.

Conclusion

Plan your website from the start to take into account compatibility issues. This way, you know that your site will benefit from the widest audience that you've strived so hard to obtain.

This article can be found at http://www.thesitewizard.com/archive/compatibility.shtml

Copyright 2000-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.


Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Designing Your Website for Browser and Platform Compatibility





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.