Design Basics 101 “Browser Capabilities”
- October 23rd, 2009
- Write comment
Designing a web site, can be a challenge on a number of fronts, based on the variety and richness of not only the current design techniques & styles, but also the browser capabilities.
This article sets out in simple terms the factors we need to consider when designing a web site, and applies to all types of web sites, from small holding pages, through corporate web sites through to more complex eCommerce and eBusiness applications.
For example Google Analytics automatically tracks a number of statistics about the browser capabilities of visitors to your site:
- Browser type. eg IE, Firefox, Safari..
- Operating system. eg PC, Mac
- Browser-operating system combined ratios. PC/IE, Mac/Safari
- Screen Colours. 16 bit, 32 bit
- Screen Resolution. 1024×768, 1280×1024
- Flash Versions. eg 9.0, 10..
- Java Support. yes/no
The information below is based on actual google analytics reporting.
Browser Type.
Currently around 65% of browsers are Internet Explorer, 19% Firefox and 13% Safari. Chrome, Opera etc make up the balance.
Operating Systems.
Windows Leads the way currently, with 87% domination, MAC is around 11%.. with the iPhone and others making up the balance of 1%.
Browser-operating system combined ratios.
This is where it gets interesting, and a little harder to explain.
65% of visitors use Internet Explorer and Windows.
16% of visitors use Firefox and Windows.
9% use Safari & Mac.
All Internet Explorer visitors use Windows. [as there are no IE versions available to MAC users]. About 87% of Firefox visitors use Windows, 11% on Mac. and the rest on Linux.
About 75% of Safari users are Mac based versus 15% on Windows. The rest are iPhone based.
Screen Colours.
Over 86% of all browsers are 32bit colour, 11% are 24bit with 16bit and under covering the rest.
Screen Resolutions
This is probably the most complex area of browser capabilities. As a design agency we need to really focus our designs on the end user or the most popular end user profile.
There are a vast array of screen resolutions now, with different devices on the market. The following outlines the top sixbrowsers by screen resolution.
1280 x 800 covers 37%
1024 x 768 covers 21%
1440 x 768 covers 9%
1280 x 1024 cover 9%
1366 x 768 cover 6%
1860 x 1050 cover 4%
The six above cover 89% which means there are a lot of other random sizes covering the last 11%. Interestingly less than 1% of browsers are 800 x 600, which five or six years ago was the norm.
The question is where do we design for, intial response would be 1280 x 800 a nice wide screen.. but no we need to focus on the 1024 x 768 browser as this is the narrowist width (1024) of the top six. Especially if we are looking at a fixed width web site, then this will be set to just under 1000, so that the scroll bars do not effect the design. With fluid or “percentage” based design then this will be ok as long as we again keep the lowest common theme to 90% of 1024 we will be ok.
Flash Versions.
Over 82% are version Flash Version 10, which shows the update mechanism is working , with version 9 taking up the majority of the rest. There are very few Flash version 8 and below browsers.
Java Support
Very simply, 93% of browsers support Java and 7% do not.
