Sounds like a ridiculous question, right? Well no, it isn’t. What your site looks like to you is not necessarily how it looks to others. I am not talking purely about web accessibility here – I will leave that for another article.
In this post I want to talk about how different browsers, operating systems and screen resolutions can result in your beautiful site looking a complete mess to others. I will also offer advice on how you can help combat this.
Use clean, standards based code
One way you can help reduce the number of discrepancies between browsers and operating systems is to use clean, standards-based code.
Unfortunately browsers are not still fully standards compliant, but coding in this way is good practice and helps minimise errors amongst the latest generation of browsers which are now widely used.
You can check your coding at the W3 Validator. The more ambitious you get with your coding, the more potential discrepancies that may creep up amongst different browsers.
Test in a variety of browsers and resolutions
When you are coding your site, you should be constantly testing it to ensure it looks right. Don’t just rely on a single browser. I would recommending installing and testing your site in at least FireFox, Internet Explorer and Opera.
As well as testing in various browsers, try changing your screen resolution to see what effect this has on your site. I would recommend testing in at least the following three resolutions: 1280×1024, 1024×768 and 800×600.
Test your site using online services
There are a number of online services available that will view your site in a variety of browsers, operating systems and resolutions and take screenshots for you to view.
I will not recommend any premium service here as I refuse to recommend services that I have not tried myself. I will however recommend a free service that I have tried: Browsershots.org.
At Browsershots.org, you simply submit your site and wait (I recommend choosing the maximum wait time of 4 hours to ensure the maximum number of screenshots).
Eventually you will start to see screenshots of your site based on the browsers and configurations you selected.
View screenshots of your site using different system configurations
As the screenshots start to come in (it takes a while), you can then zoom right in on each shot to see your site just as that visitor would – very useful for identifying any cross-platform issues that you need to address.
System configurations are as individual as people
It is important to remember that just because you site looks fine to you, it does not necessarily look fine for everyone. Keep your code standards compliant, test on multiple browsers and make your site feedback friendly so your users can easily report any issues.
Do you know exactly what your site looks like on other computers? Have you had your site up thinking everything was fine, only to find a huge problem when the site was accessed from a different setup? Let me know your experiences and views by leaving a comment below.