There have never been as many different devices capable of using the Internet as there are today.

Tomorrow there will be more.

Forward thinking web site owners and developers are racing to provide an experience that caters for phones and tablets and their high-resolution ‘retina’ variants. Meanwhile screen sizes and technologies are just as likely to explode in the opposite direction. Smart TV’s are becoming increasingly popular and more manufacturers are starting to come good on their promise of creating Google TV based TV sets. Then there’s the elephant in the room: Apples ‘iTV’. Apple’s entry into this market could change everything, again!

Bandwidth and other considerations

Furthermore, bandwidth is becoming increasingly varied and it’s not safe to make assumptions about users’ connection speed based on their device.

For example, phone users could just as easily be using the web on a paltry GPRS connection as they could Wi-Fi. Sadly, at present, we have no reliable way of finding out what speed connection the visitors to our website have.

Therefore, as of right now, web property owners should consider two things: optimizing their site for speed and creating either an adaptive, responsive design or hybrid (RESS – Responsive design with Server Side components) design to provide the best possible experience for every device.

Speed benefits everyone

As we aren’t able to ascertain the connection speeds of the users visiting our sites, it makes sense to optimize the experience for everyone.

Website performance expert and author of ‘High Performance Web Sites’ and ‘Even Faster Web Sites’, Steve Souders, notes that,

“…if you’re worried about how long users are waiting for your website to load focusing on the frontend is your best bet.”

This means compressing images, making fewer HTTP requests, and Gzip’ing components where possible. Tools like Yslow and Google Page Speed can really help in this respect. Thankfully, with the requisite knowledge, this area is easy to fix as the problems and their solutions are known and documented.

Who is using my site and how?

However, when looking to provide the best experience for users on a variety of devices, it seems logical to consider what data is available to you regarding the visitors to your web property (I’m going to use the term web property as a catchall term from this point on rather than say web site, web app, e-commerce site etc.).

Typically to achieve this end, we resort to some kind of analytics tool; the most common example being Google Analytics.


You’re no doubt familiar with how Google Analytics does its thing; a small snippet of JavaScript is used to track where the visitor is, what browser they have, what operating system, screen size and various other metrics almost ad infinitum.

Reviewing data

When considering a re-design for a web property, it makes sense to start by reviewing the data and then basing the next iteration of our property based upon that data.

Chiefly, what devices, browsers and screen sizes are people using? Find this in Google Analytics by choosing Audience > Technology and then Browser & OS from the left hand menu.


What conclusions can we make: screen resolution?

We’ve established that a design that caters for a wide variety of screen sizes is a good thing.

However, it’s not wise to think in finite terms of merely iPhone, iPad and Desktop.

For example, even on a typical brochure site, it’s not unusual to see 50+ different resolution ranges in use on a single day! Responsive or RESS based design is arguably going to be the best option in those instances.

However, this is YOUR web property. If 99% of your visitors use a resolution over 1000px wide, it may make more sense concentrating on the bigger screen experience at the expense of others. However, a cautionary warning…

Analytics tools can’t see all mobile users

It doesn’t seem common knowledge that many Analytic tools don’t have capability to track all mobile users.

Whilst Smart phones (Android, iPhone etc) can understand JavaScript just fine, many older feature phones don’t. As such, they are effectively invisible to tools like Google Analytics.

There is the option to use Mobile specific (non JavaScript based) tracking but this can’t be used in tandem with the standard code. At present it’s one or the other. Therefore keep in mind that if you rely on JavaScript for your analytics data (and most people do), any devices that don’t run JavaScript aren’t being seen; potentially this could also mean the fridge, car and wall based Internet devices of the future.

What conclusions can we make: browser?

A site should be as fast as possible so that every visitor benefits, regardless of the device they use to do so.

For modern browsers (both ‘Desktop’ and ‘Mobile’) we can speed up page load times enormously by ditching images, and to a lesser extent JavaScript, and rely instead on CSS3.

CSS3 can produce visual design flourishes such as box-shadows, text-shadows, background gradients and even visual transitions at a fraction of the overhead of images and JavaScript. The result is faster website and when that happens, everyone is a winner!

However, not all CSS3 features are supported in all browsers (find out feature by feature at As a general rule, Internet Explorer 8 and below aren’t able to take advantage of CSS3. Therefore, if the amount of your visitors running Internet Explorer 7 or 8 is low – go right ahead build and enhance the site with CSS3 alone.

However, if over 50% of your visitors use IE 7 or 8; tread more carefully. Go to Audience > Technology > Browser & OS and then Browser to see the relevant information in Google Analytics. Click on Internet Explorer in the list to see the version breakdown.


Trends are important, not fashions

Ultimately the thing to keep in focus when approaching a re-design is the trends that the data you have is providing.

You’ll likely never have an entirely accurate set of data for every user that actually visits your web property.

However, you can make sensible choices based upon what you do know. For example, over the past 6-12 months, is the amount of people accessing the site on Mobile devices increasing or decreasing?  Find this information in Google Analytics by choosing Audience > Mobile > Overview and use the ‘Compare to’ date range feature at the top right?

To exemplify, my own blog has seen a 109% increase in mobile traffic in the last year alone. If you have noticed a significant increase in mobile users, perhaps it’s worth providing an optimum experience for them? If however, they have remained an insignificant constant, by all means, buck the trend and concentrate efforts towards the Lion’s share of your visitors.

Using data to inform decisions allows choices to be made for your own purposes, not just because they make sense for someone else.
About the Author: Ben Frain is a technology writer and web developer living in Cheshire, UK. His book, ‘Responsive web design with HTML5 & CSS3‘ is available now. You can follow him on Twitter @benfrain.

From The Daily Egg