Do you know how your website looks in Safari? What about on a small laptop screen? Do you hope to target customers surfing your website on their mobile phone?

With so many browser applications, platforms and monitor sizes now in use, the modern web designer is constantly challenged to design sites that appear correctly in all situations.

Everyone has their own preferences of browser, monitor and platform. But the choices are continuing to expand, meaning more considerations and more innovation.

Browser Compatibility

With Internet Explorer 8 currently in the Beta testing stage, it is hoped some of the issues of cross-browser compatibility will begin to disappear. Version 8 is the first IE release to fully conform to current html and CSS 2.1 standards after years of infuriating web developers the world over.

But IE8 won’t see dramatic changes overnight. With large numbers of Internet Explorer users still using older ‘legacy’ versions of the browser, web designers still need to plan around the limitations of older software.

More often than not, websites need specific hacks written into the code to allow for IE to render the page correctly. This has led to a surge of IT professionals evangelising Firefox and other open source browsers in search of simplicity and logical compliance. But despite a gradual move towards other browsers, with half of internet users still using Internet Explorer web designers can’t ignore Microsoft.

Browser Statistics - Percentage of Users

	IE7	IE6	IE5	Firefox	Mozilla	Safari	Opera
January 08	21.2%	32.0%	1.5%	37.2%	1.3%	1.9%	1.4%
December 07	21.0%	33.2%	1.7%	36.3%	1.4%	1.7%	1.4%
November 07	20.8%	33.6%	1.6%	36.3%	1.2%	1.8%	1.6%
October 07	20.7%	34.5%	1.5%	36.0%	1.3%	1.7%	1.6%
September 07	20.8%	34.9%	1.5%	35.4%	1.2%	1.6%	1.5%
August 07	20.5%	35.7%	1.5%	34.9%	1.3%	1.5%	1.7%
July 07	20.1%	36.9%	1.5%	34.5%	1.4%	1.5%	1.9%

When I launched my personal blog last year, I made the mistake of only testing the final product in Firefox. After all, that's what I use and the website looked fantastic on my monitor. A few weeks later, a colleague of mine visited the site and complained because the formatting was all over the place. It was a heart-wrenching moment – realising the poor impression the website must have made on hundreds of IE6 users before I was alerted to the problem.

It took a lot of tinkering, hacking and banging of heads against desks before I found a format that compromised the needs of all browsers. There are still some minor formatting issues with IE6, but they don’t prevent someone from reading and experiencing the website, so I can live with that.

Monitor Sizes

As monitor sizes have increased, the range of dimensions to which a webpage may need to conform has exploded. Whether your website visitor is using a state of the art widescreen 30 inch monitor or viewing your creativity on a tiny 7 inch laptop screen, your website needs to cope.

The size of the screen is less important than the resolution – that is, pixel ratio. Monitors of different sizes can still have the same pixel resolution, allowing for uniform dimensions.

Common screen resolutions to check are;

• 800x600
• 1024x768
• 1280x800
• 1400x900
• 1680x1050

It is rarer to come across older 640x480 monitors these days, but if your website attracts an audience demographic more likely to use older equipment, you may need to test for this resolution as well.

So if the trend for varying resolutions and device specifications is going to increase, how are webmasters to cope with keeping their websites looking impressive?

The easiest solution is to produce a fixed website. This website template is designed to conform to the smallest relevant resolution. A good example of a fixed website is Target. The downside to this solution is the appearance of a lot of empty space on many monitors. Although the least likely solution to present formatting problems, it restricts the amount of information on each page.

The alternative is to produce a fluid website. This usually means defining a lot of the content criteria in percentage terms, rather than fixed widths. If the image renders at 40% of the browser winder, it will always display to the correct proportions to the screen, shrinking or enlarging to fill the required area.

Another fluid website style used by some skilled designers involves the use of smart and complicated code that can recognise the resolution of the individual browser and rearrange the boxes of content in appropriate configurations. For example, content that displays next to each other on one monitor, may appear vertically stacked on another.

A fantastic example of the fluid website concept is Amazon.

The goal with a lot of monitor compatibility is to reduce scrolling. Where possible, only vertical scrolling should be used. If a reader has to scroll both vertically and horizontally to read your content, they could end up doing more mouse work than reading, resulting in a poor customer experience.

Platform Compatibility

Many websites may not need to develop mobile phone or PDA friendly versions. It will depend on how relevant your website is to people on the move. After all, how many people currently shop for shoes on their phone? If you feel your website will receive a lot of mobile phone traffic – possibly because your target audience is young and mobile phone obsessed or because you provide a useful information service such as train times or cinema listings – you should consider how your website appears to this audience.

With smaller platforms such as phones and PDAs, screen size isn’t the only concern. As most hand held devices operate at smaller speeds and with less flexibility of movement for the user, the layout, link structure and download time become important. If a phone takes too long to load your page, your potential customer may move on. Ensure all images are optimised for fast data transfer and remove anything that isn’t absolutely necessary to the user experience. Try to limit the number of pages, links and clicks the customer needs to use. With each page potentially taking longer to load, every extra click becomes more irritating to the phone internet user. Also, the lack of a mouse means the user is relying on a tiny joystick, touch-screen or keypad to navigate the site, so make sure the site is practical to use in this way.

If you are considering tapping into the mobile platform market, it is advisable to bring in a specialist. The field is so new that many web designers have yet to work with these scenarios.

Opportunities, Not Obstacles

Although it may seem as if new technology and diversifying platforms are making simple website design increasingly difficult, by addressing these issues you stand to increase your customer base and even move into whole new areas of marketing. Mobile phone and PDA web surfing is still in its infancy, but is promising to be a hugely lucrative and powerful opportunity for those who grasp the potential. The explosion in laptop usage, which contributed to the resolution issue, also allowed more people access to the internet in more scenarios. With your audience no longer confined to a desk to visit your website, the potential is there for savvy marketers to deliver content relevant to today’s consumer.

About the Author

Jonathan Crossfield is the Online Editor and Copywriter for Netregistry's Marketing Department and a regular contributor to Nett Magazine. If you would like Jonathan to write vibrant, fresh content for your website or marketing campaigns, enquire about Netregistry's Copywriting services.

If you enjoyed this post or found it informative, let others know by
submitting to the following services! Thankyou.