Over the past year the number of people accessing websites on tablets and smartphones has increased beyond all expectations. A report recently published on Techcrunch states that 58% of the population (of the UK) owns a smartphone and 19% owns a tablet device (such as Apple iPad, Google Nexus, Samsung Note). While only 11% use those same devices for shopping, you can be pretty sure there are millions of people using them for research and entertainment.
Do you know what your site looks like on a tablet or smartphone?
If you don’t, it is probably a good idea to check as you may lose traffic, and customers, if it isn’t displaying properly and it is difficult to use.
The larger screened tablets are less of an issue than their smaller screened counterparts, but checking is fairly straightforward, even if you don’t own any of the major players in the mobile devices market.
The best way to check is to ask a friend if you can borrow their device. This gives you first hand experience as you can use your site instead of just looking at it.
The next best option is to use an online emulator.
Recommended for YouWebcast: The Art of Growth Hacking: Gaining Early Traction by Doing Things that Don't Scale
Using one gives you a good idea how a site looks, but not how it feels to click links and navigate through to other pages. And this is where the biggest problems lie, as some sites are very awkward to use, especially on smartphones (which are far more popular than tablet devices).
Below is a list of websites you can use for testing. Each of these emulators connects to the rest via a ribbon at the top of the screen, so you can see how your site (or your competitors’) look on a mobile device, without opening another browser tab:
These emulators are good at what they do, but they don’t replace a real ‘hands-on’ test.
What should you do if your site is not tablet or smartphone friendly?
Firstly, check the numbers – how much traffic is coming to your site via a mobile device? Are these people just browsing or do they give you income?
Google Analytics includes a report which shows how many people use mobile devices to access your site. It is quite detailed as it shows the device they used including brand, the exact model and, if you click the camera icon, a picture.
Here is a sample report:
Access it through Audience > Mobile > Devices.
Your site might not be receiving enough traffic to warrant a design upgrade, but in twelve months this situation will probably change. Now is the time to start putting some plans into place for when the time for an upgrade arrives.
If you use WordPress to power your website you could consider installing a new mobile responsive theme or a plugin like WPtouch, which is available for free, or for a fee for the pro version which comes with more features.
Either option is a good choice, the pro version of WPtouch is relatively cheap ($49 for a singe license) and is a decent stop-gap should your site need a quick fix.
Deciding whether or not to upgrade at this time depends upon the return you will get from the investment. WordPress sites are easy and cheap to make mobile-friendly, all it takes is a new mobile-responsive theme, non-WordPress sites may be more difficult and more costly.
What is a mobile responsive theme?
It’s a theme that displays web pages based on the width/resolution of the browser/screen the user is using. This site uses a responsive theme – if you are reading this post on a site other than Digital Internet, this might not work – to see the responsiveness in action, make your browser narrower and watch as the page elements all remain visible and the page length increases.
Here are a few screenshots of the process…
This is what this site looks like using a mobile responsive theme at standard width:
This is what this site looks like with the browser slightly narrowed, see how all the page elements remain visible within the width of the browser?
This is what this site looks like with the browser narrowed even further, and almost inline with the size of a smartphone. All the page elements are still visible in the browser, but they are further down the page.