usability.codegraffiti.com

Modern computing is done on a variety of platforms and operating systems and there are a variety of different browsers that users can choose between on each of these. In order to maximise your customer base, you want to make your website available to as many of these hardware and software combinations as possible.

Your primary users will be using desktop browsers, of which there are five major varieties over three operating systems, but an increasing number of people are browsing the Web on their mobiles and games consoles and you should cater for them as well.

Try to build a single version of your website that caters to all users.

If you have three versions of your website; one for desktop, one for mobiles and one for everything else, then you are only increasingly your own workload. Modern mobile browsers are designed to work with existing web content, making mobile-specific webpages only necessary in a handful of cases.

Desktop Browsers

You should aim to support Windows, Mac OSX and Linux, but the operating system does not have much effect on the browser’s performance, only the choice of browser the user can make. There are five major browsers:

1. Internet Explorer – Provided with Windows as standard, version 6 is still common to users and very lacking support of standards, providing a big problem to web developers. Version 7 and 8 are better but still contain flaws.
2. Firefox – Available for all platforms, it recently took a huge portion of IE’s market share and has helped drive internet technology forwards. It is an open source project run by the Mozilla Foundation.
3. Chrome – Recently released by Google for Windows, it has a low market share and many features borrowed from other browsers.
4. Safari – Bundled with all versions of OS X and now available for Windows, it has very high standards support and is a very reliable browser.
5. Opera – Developed by the only independent browser company,  and in addition to their feature rich multi-platform desktop browser, build the leading mobile web browsers. They also heavily push the development of the latest web standards.

Web standards are not always followed exactly, so test your website in every modern browser.

Each modern web browser aims to correctly implement the HTML and CSS web standards, providing a good foundation for you to build your website. By following these standards you should be able to create a highly functional website that works on everything, only adding individual hacks for browser-specific quirks at the final stage. However, if you are using AJAX or Javascript then you will need to dedicate significant time towards cross-browser compatibility.

Legacy browsers

Internet Explorer 6 is currently the most used Web browser, to the annoyance of most Web developers, as its support of the modern Web standards is very poor. Despite Microsoft having released two new versions of Internet Explorer, many users still run version 6, for the following reasons:

• Many users are not aware there is a choice of Web browser available or the benefits that a modern browser would bring to them.
• Many are afraid of change and prefer to stick with a product that suits their needs.
• A large number of corporations prefer to stick with old browsers as they can provide better support for them, even though they present a larger security risk.

Make good use of modern web standards whilst keeping all content in a readable form.

Some large websites are just now deciding to stop supporting IE6, such that their website may not be displayed correctly or at all in old browsers. This is inevitable, but it is worth trying to make the content viewable in even these old browsers, even if it doesn’t look quite as stylish.

Mobile Browsing

With the release of the iPhone and the ever increasing power of mobile phones, browsing the internet on the go has become simpler and given power to an ever widening userbase. The main browsers are:

1. Opera Mini – Available for almost all mobile phones produced in the last half decade, it brings fast browsing and great features with a very small application size.
2. Opera Mobile – A similar product but produced for smart phones. All Opera browsers use the same excellent rendering engine.
3. Safari for iPhone – Only available for the iPhone it is smoothly linked with the touch screen capabilities for each scrolling and zooming.
4. Other mobile browsers – They lack features, they browse the internet slowly and barely support web standards at all. Don’t bother trying to support them. (Some of them might actually be an unbranded Opera Mini).

Both Safari and Opera are designed to work with full scale websites. You should not make mobile-specific versions.

By allowing users to zoom in on a webpage, Opera Mini and Safari display webpages exactly as they would appear on a desktop browser, meaning developers do not need to make two different versions of their website. The exception is when you are building portions of your website aimed at mobile users; for example when displaying bus times or maps.

Embedded content

You can produce some awesome features with Flash, Java, Silverlight and Shockwave but the support for these tools varies across operating system. Flash is quite well supported and remains a favourite for Web developers, but the support on Linux will typically be one version behind Windows and Mac.

Silverlight is a replacement for Flash produced by Microsoft. It only supports Windows and is useless elsewhere, so you should avoid it at all costs. Java has wide support, but only when the correct applications are available on the user’s machine, which won’t be always.

Information accessibility

The latest web standards for CSS 3 and HTML 5 offer some great features, making it much easier for you to build stylish websites for modern web browsers. You should use these features where possible, in such a way that the content remains accessible when particular style options are not supported.

For example, you can use CSS 3’s new nth-child selector to colour rows of a table in alternate colours, generating “zebra striping”. Rather than adding special classes to your table markup, you can use the following CSS:

tr {
  background-color: #ff8099;
}
tr:nth-child(odd) {
  background-color: #99ff99;
}

This feature means that modern users of the web get a pretty table to look at and the rest will get a plain table, with no striping. Whilst the style may vary, the content does not; it is accessible by everyone.