With a host of recent posts and infographics circulating the tech blog arena about the growth in mobile web usage tending to be very U.S. centric, we decided to complete some analysis across a selection of our local client's websites to see if this phenomena had local relevance. The stats were collated during the month of April 2012 across 100 websites, the vast majority based here in Jersey, from a variety of industry sectors and a mix of high and low traffic sites.
The headline stat came back as 21.2% of all traffic was from mobile or tablet devices, very much on a par with what is happening across the Atlantic. Our local stats were further broken down as:
|
Device |
Non-Ecommerce |
Ecommerce |
|
iPad |
52.56% |
65.8% |
|
iPhone/iTouch |
30.69% |
24.27% |
|
Other Smartphones |
12.89% |
8.69% |
Apple is the obvious winner dominating mobile web usage but more interestingly iPads account for one in every two of all mobile visits and an even higher percentage when it comes to ecommerce websites. We have a handful of clients that have invested in mobile optimised versions of their websites, but so far, none have iPad specific layouts or have been developed specifically on the iPad platform (native apps). I believe that very few have been optimized to that level here in Jersey.
There has always been an emphasis on cross-browser testing and ensuring sites are backward compatible on older browsers such as Internet Explorer 6 (IE6). But with the U.S. recently reaching the magical number of less than 1% (UK is currently 1.4%) of people using IE6 I hope that these budgets can be realigned to optimising sites for forward thinking devices. Add Cross-device testing to your website build spec!
When we talk about devices we mean for example Smartphones, but Smartphones use a variety of operating systems (platforms) such as iOS on the iPhone, Android on a Samsung Galaxy and Blackberry OS on a Blackberry.
There are multiple options when looking at mobile or device specific experiences, the main options are:
-
Responsive layout (using your normal browser)
-
Web App (using your browser or a hybrid of a browser and Native App)
-
Native App (built specifically for a device or platform, iPad being a good example, which uses iOS)
Numbers 2 and 3 are about building experiences specifically for mobile, so have some massive pros if you are targeting mobile users. You also have to build multiple versions because what will work on an iPhone doesn't work on a this added complexity means these approaches are more time consuming to plan, design and build so inheriently more costly to build.
However we currently have several websites in production and launching imminently where we have used the first option of 'responsive design' techniques so the layout adapts depending on the device and screen size you are using to view it on. This method enables your normal desktop website to adapt itself, so we are not building multiple sites therefore you still only have one entity to maintain. One of the advantages of this technique is you can start with very minimal updates, for example some of the font sizes on your site might adapt to different devices. You can then progress to larger and more complex elements of the website adapting layout to suit the device it is being viewed on.
We tend to consider four stages (sizes) when designing a 'responsive' website, these are phone, tablet, desktop and large desktop. In our view the largest drawback of responsive design is that when viewing your site on a mobile you are still downloading the same content as you would if viewing it on your desktop so you can never fully optimize for mobile download. However this is a minor price to pay for this simpler, more cost effective approach.
As a daily user of a large deskop monitor I'm a big fan of utilising the increased screen size with the fourth layout state (wider than 1110px) of 'resposive design'. Delving deeper into the stats it revealed that most of our client's website users are on screens large enough to utilise this fourth state.
|
Screen Resolution |
Visits % |
Responsive state |
|
1366x768 |
13.69% |
Large desktop |
|
1280x800 |
13.43% |
Large desktop |
|
768x1024 |
9.17% |
Portrait tablet |
|
1280x1024 |
8.36% |
Large desktop |
|
1024x768 |
8.09% |
Desktop & Landscape tablet |
|
1440x900 |
5.97% |
Large desktop |
|
320x480 |
5.79% |
Portrait phone |
|
1920x1080 |
4.87% |
Large desktop |
|
1680x1050 |
3.75% |
Large desktop |
|
1600x900 |
3.11% |
Large desktop |
As you can see, this large proportion of viewers would benefit form the large desktop responsive layout. But before I get too excited there are a couple of key factors to remember. First not everyone will use the browser at full screen, but I think the large majority would use it at full screen or close to maximum. The larger hurdle is that 'responsive design' works using CSS3 media queries, in short this means that while it works on all modern and smartphone browsers it doesn't work on Internet Explorer 8 or older. So I dug a little deeper and found the following data:
|
Operating System |
Browser Version |
Visits % |
|
Windows |
IE9 |
24.86% |
|
Windows |
IE8 |
16.08% |
|
Mac |
Safari 5 |
7.32% |
|
iPad iOS |
Safari 7 |
6.32% |
|
Windows |
IE7 |
5.01% |
|
Windows |
IE6 |
0.63% |
It's encouraging to see Internet Explorer users upgrading to IE9, must be those 'beautiful web' TV ads, plus with IE10 soon to be released this should only reduce the influence of IE8,7 & 6 further. While its hard to calculate the exact number of browsers that support 'responsive layouts', due to the number of browser versions, I can safely say that based on our research above that it would be over 50%.
So rewinding to my earlier remark about budgets historically reserved for backward compatibility, even if we include IE7 along with IE6 in this bracket then it accounts for only 5.64% of visits, where as over 50% of visits could benefit from responsive layouts.
For an example of a responsive site look no further than our own site here. If you are viewing this on a browser that is not Internet Explorer 6, 7 or 8 then resize the browser a watch what happens to the layout, image and font sizes, or to see all the states at once click here. If you are on Internet Exporer 8, 7 or 6 then please updgrade.