Articles are organised by date. Typically, there will be a new one as and when I have the time and find a subject to talk about.

Designing for the Lowest Common Denominator

Contents

• Understanding the Media
• Defining Your Audience
  • Analysing Existing Visitors
• The Design Process
• Why you Should Design for the Lowest Common Denominator
• Conclusion

Understanding the Media

Websites are often misunderstood as a media form, usually by those that know quite a lot about other media types, such as print or video. Most web developers/designers will be familiar with this concept; how often has a client complained that a design didn't exactly match the website, or they ask "why does it look different on my friends computer?"

The problem lies in the fact that a wide variety of browsers, with an equally wide variety of plugins, are being used on a wide variety of platforms. Because there are so many possible permutations for the display system, there is no way to guarantee a website will display (or sound in the case of speech browsers) exactly as intended. The important point to consider is that the web is quite unlike any media that currently exists, allowing interaction, full multimedia experiences, and a flexibility of accessing information that in unparalleled by anything else that exists. Keeping this in mind allows us to understand the problem, and then find a solution. The problem is not that of trying to make websites display the same for each and every media, but displaying the best way possible for each type of visitor.

Defining Your Audience

Sometimes a website is developed for a very specific audience, such as a website for mobile users, or an intranet. When this is the case, it is perfectly acceptable to develop the site for a specific type of browser, or design it in a very focused way. More often, the type of audience is very broad.

One example is a website intended for particularly tech-savvy people. It would be fair to assume that the visitors to this site have fairly modern browsers and up-to-date plugins. The situation would be completely different for an online shop for meal delivery for the elderly. This type of audience will be quite different, probably using older computers with older software, and there may be a higher chance of visitors having visual impairments.

Analysing Existing Visitors

Probably one of the best ways to identify visitors and their technical limitations is to use some form of visitor tracking software. This is easiest to do where an updated website is being developed, as it allows you to identify your exact audience and cater specifically for them. If this is not possible, then try to look at broad statistics for a generic site, or some specific to your needs if you can lay your hands on them.

Once developed, the site should continue to utilise the visitor tracking, as this will form a picture of developing trends. Are more visitors upgrading to the latest browsers? Do they have the most up-to-date plugins? What monitor resolutions do they use? Being in the position to have the current statistics allows you to develop the site to cater for your audience more easily, and is something that all good web developers should use.

This site uses a custom built visitor tracking system that allows me to see much more information than I have seen on any other system available. What it tells me is that I am safe in developing Flash for player 9 (at the time of writing, about 5% of visitors use player 8, 4% use player 7, and 2% have no detectable player), it also says that I should be looking at adapting my site to be multi-lingual as a huge number of visitors are not only from non-English speaking countries, but their computers are also set for other languages. This is just a small part of using the statistics to adapt your site, as there is much more information available to be used.

The Design Process

I have seen many processes for developing a website posted by others online, but the most popular methodology, which I myself use, is the following:

• Develop the whole website to use standards compliant code, and use a compliant browser to test this in, such as Firefox, Safari, Opera or Konqueror.
• Test in IE, and if possible, test in different versions. Incorporate any necessary changes in a stylesheet just for IE, and use IE conditional comments to include this, or use code specific to this browser. Conditional comments are one of the few useful things in IE, although only useful to fix the problems that the browser introduced in the first place. You can see an example of conditional comments in the coding section.
• Finally test in other browsers, such as Lynx and Netscape, etc. These browsers are fairly easy to get hold of online (although Netscape is no longer supported), and are available for a wide variety of operating systems. If possible, try to test on a mobile as well. Opera do a very good mobile phone browser, and they have an online simulator also for testing.
• The last step is to verify the code you've used on the W3C validator. I always find I have to do this, as however hard I've tried, I've missed the odd end tag, or used an invalid attribute. Ensuring the code is valid will future-proof it against browsers which might stick to the standards a little more severely than current ones. I've actually seen a situation where a client had received an email from his original website developers informing him that his site may need to be re-developed because IE7 was launching.

While this works for HMTL only sites, those that largely use Flash, for example, need to follow another model. This is something I have put together, and I would love any feedback from Flash developers to see how you tackle this issue.

• Build a list of required features, and sort into which are available for the popular Flash players in use. I've found that this is usually in the range of 6-9 inclusively.
• Mark which features are essential and which may be left out.
• Develop an initial Flash project that incorporates all the features that are essential, and publish it at the lowest version which allows these features to be retained.
• Develop further successive Flash projects which incorporate the more advanced features, publishing to the lowest possible versions each time. Most often, this process will only result in a couple of published Flash movies.
• Use nested <object> tags (the <embed> tag should not be used, see the Flash Satay method for more info.) to include the Flash, specifying the highest version first, then moving to earlier versions. This allows the browser to choose the Flash movie which uses the latest supported player.

Relying on JavaScript to serve the appropriate Flash content, or displaying "helpful" messages that the user needs to download the latest player, is a ridiculous way to go about this. When a user is on a browser that does not support JavaScript or has it turned off, nothing is served at all. In some cases, work proxy servers have even stripped or altered JavaScript in HMTL pages to protect the end users. This is a view that is not popular among Flash developers however, and I occasionally find myself being drawn into arguments over this very issue.

Why you Should Design for the Lowest Common Denominator

There are two main reasons for developing for your entire audience, and not just those that have the same setup as you. First and foremost is the legal requirement. Being British, I'll be using UK Law as the basis of my argument, but many other countries will have similar requirements in place. Since 1999, making websites accessible has been a legal requirement. Although largely ignored, it is becoming more important today, and 9 years should be more than enough time for web development courses to have caught up, and workers to have retrained. Some headway has been made with regards to web design software, but is often a poor effort considering the time involved, and a lot of designers seem to be out of touch with the code that the software they use creates. I remember being involved in an argument with the MD at my last job over the issue of accessibility. His argument was that accessibility doesn't really matter, as other websites aren't doing anything about it, even going so far as to say that if it was legal, someone would have told him about it; that would be me then. Apart from this angle being wrong (visited Tescos website recently, the one that won awards for accessibility?) the argument doesn't make sense. It's like saying that going over the speed limit in a car is fine, everyone does it. It's not, the laws are there for a reason, and this one is in place to make websites available to everyone, not just those who are "average".

The second aspect of developing for the lowest common denominator is the business aspect. Tesco et al recognised this quite early on, and realised that they could be missing out on a lot of potential customers if they didn't make their site as available as possible. Can you afford to cut out a swathe of potential visitors? Only last month did I hear a discussion concerning the redesign of a company website. The question was what resolution to design for. It was decided that the 15% of web users still at 800×600 weren't part of this sites audience, so could be left out of the design considerations. At first I was quit surprised that 15% of the worlds population were still using this resolution, but then I realised that it was quite possible if you considered that developing countries are only now getting access to the Internet through projects such as OLPC, using very cheap computer equipment. Another recent discussion I've had regarding developing for the widest available audience was on the PaperVision3D mailing list. The majority of developers are concerning themselves only with Flash player 9. I think this is acceptable, as PaperVision for Flash player 8 is pretty basic, and offers none of the advanced features that exist in later builds. The point that I found annoying was that most developers were specifying player 9.0.115, the very latest version, when most people have a slightly earlier 9.x version installed. If the movie doesn't require 9.0.115, why specify that explicitly?

Conclusion

Hopefully this article has opened your eyes, or at least opened one, to the issues of developing for the greater audience. There are plenty of ways to develop and maintain websites that are flexible and scalable, and available to all and sundry. The key is to test on every available platform and operating system that you can access, and keep up to date with new trends in the field, and analyse your website statistics to get a better understanding of who your visitors really are.