In essence an internet browser is a translation device: It transforms sometimes ugly HTML code into something that users can understand and interact with. But how is your message being translated? The same HTML code can appear very differently depending on the users operating system, browser and more. Wal-Mart recently made the mistake of ignoring firefox users, resulting in an ugly mix of text and links. To ensure you don’t make the same mistake, here are some tips to put your testing on the right track.
Perhaps the most major influence on your website if the type of browser that renders your HTML. Depending on what operating system you are using, there are a host of browsers available. As of Jan 07, W3Schools indicate that the most popular are Internet Explorer and Firefox, capturing 58.6 and 31 per cent of the market respectively. Other browsers that also feature prominently include the Mozilla Suite, Safari and Opera.
While the World Wide Web consortium publishes official HTML standards, there is considerable room for interpretation within these ground rules. In addition, some browsers may begin to support ‘cutting edge’ HTML standards, while others may not. These differences can have a dramatic impact on how a web page is displayed; just check out the Wal-Mart video download site in firefox. The best way to minimize these problems is to pay attention to browser compatibility when building your web page. Avoid using HTML extensions and be careful about using cutting-edge HTML tags that may not yet be supported by all browsers.
Different Operating Systems
Most people only run a single operating system on their computer, which often becomes the only format they become accustom to. This can prove to be a fatal mistake in web design, as the same browser on different operating systems can display the same webpage very differently. Some of the major differences include:
When setting your typeface, be aware that different operating systems may not always have the desired font available. It’s a good idea to declare multiple fonts to ensure your web page looks somewhat like what you intended.
Mac operating systems will normally render your font in a smaller pixel size that that of the PC. One way to avoid this drama is to use Cascading Style Sheets instead of font tags, which use an abstract amount to define font size.
The Mac version of Internet Explorer is outsourced to other developers, so to a large extent is a different version from the PC variant. Therefore it is important to check your website in IE across both operating systems.
Different Screen Sizes
Another major contributing factor to the look of your website is the screen resolution of the viewer. According to W3Schools, the most common screen size is 1024×768 at 58% but the numbers do vary considerably. Without the use of defined table widths, portions of the website can become stretched, ruining images and formatting. It’s best to design your webpage for 800 pixels or less, so try moving all your content into a large, single cell table and test with the largest screen resolution.
Now some of you may not have access to a range of different operating systems and browsers, but the good news is there is help available online. One of the best services I’ve found is browsershots.org that makes screenshots of your webpage in different browsers across different operating systems. The service is open source and free, so why not give it a shot and see if you can improve your website design. Be sure to let us know of any interesting changes you notice on your site!