Even though the tablet is used by a large share of the visitors on most sites these days, unfortunately, it seems to be largely ignored in terms of website optimization.
How to define a ‘tablet’?
Defining what constitutes a tablet has become increasingly hard. Not so long ago, we could simply define a tablet as ‘a touch-controlled mobile device with a screen that is larger than a smartphone, but also smaller than a desktop or laptop computer’.
However, this definition doesn’t accurately account for recent developments in mobile technology. For instance, devices like Microsoft’s Surface and the iPad Pro are now equipped with desktop-sized screens, and have been dubbed ‘detachables’. Then there is also the rise of the ‘phablets’, which appear to be Centaur-like creatures that are deemed both phone and tablet at the same time.
With all these hybrids flooding the market, comparing the tablet up or down in size to other device groups isn’t future-proof. Therefore, we’ll define a tablet simply as ‘a touch-controlled mobile device with a medium to large screen’.
How do tablets compare to desktop and mobile?
The user penetration of tablet users has been rising steadily over the past years and is predicted to continue doing so for the next years. As research by eMarketer shows, over half of all internet users in North America and Europe use a tablet at least once a month in 2016. This number is expected to increase to over 60% by 2019. Other regions such as Asia-Pacific and Latin America currently hover at about 30% user penetration, with a projected increase to 40% by 2019.
The Monetate Ecommerce Quarterly Report shows conversion rates per device group. Their most recent numbers for Q3 2015 show that globally, traditional (desktop) devices have an average conversion rate of 3.59%, tablet devices 3.30%, and smartphones 1.31%.
As the report shows, the conversion rates for tablet devices aren’t much lower than those of traditional devices. However, currently, there are currently only a few good resources available on conversion optimization for tablet devices specifically, whereas they’re abundant for desktop optimization. When, over time, the tablet user is treated more seriously, the conversion rates of users on tablets might even surpass those of traditional devices.
Data from Google Analytics
You can use Google Analytics to find out more about the conversion rates of the tablet, mobile and desktop users on your website. To do so, navigate to the report: Audience > Mobile > Overview.
Modern tablets (which, by our definition include phablets and detachables as well) range in screen size from 600 x 1024 to 1024 x 1366 pixels. Note that some devices may report higher screen sizes, but those are usually devices with a pixel density of greater than 1.
Data from Google Analytics
If you’re curious to find out what the most popular tablet screen sizes for your website are, navigate to Google Analytics to find out. The data can be found in the report: Audience > Mobile > Devices > Primary Dimension > Other > Screen Resolutions.
However, take into account that the variation in tablet screen sizes varies greatly. Therefore, whenever possible, you should make sure your website is optimized (or at the very least functioning properly) on every screen resolution from the smallest iWatch to the biggest flat screen TV.
How are people using tablets?
Statistics on tablet usage provide a generic insight into where people are using tablets. For instance, the data shows most respondents use the tablet at their own house. When at home, the living room is the most popular place to use the tablet (72%), trailed by the bedroom (63%) and kitchen (40%). Only the restaurant (30%) and the generic category ‘While traveling’ (48%) come anywhere close to the percentage of tablet users at home.
Currently, as reported by IHS, 66% of households worldwide have a wifi enabled router supplied by their ISP. Many more will have purchased such routers privately. These numbers are expected to rise to 90% in 2019.
When you combine this high level of wifi penetration in houses with the data on where tablets are used most, we can conclude that most tablet users (even those that have 3G, 4G or 5G tablets) are accessing websites primarily over a wifi connection.
In 2012, researchers from Microsoft presented their findings (PDF, 397Kb) of a research study on user search behavior on mobile devices. As part of their research, they monitored what device group was used to access the search engine. As the image shows, tablet traffic remained fairly stable throughout the day, the shows a peak around dinner time, after which it plummets quickly. When you contrast this to the data on desktop and mobile devices, this confirms the earlier findings that tablets are mostly used at home, and more specifically in the living room, followed by the bedroom.
How to optimize a website for tablet users?
The movement has taken the internet by storm. Around 2008, websites with responsive design started utilizing media queries to adapt the display of their content to the size of the screen that it is displayed on. Mobile visitors got a focused, one-column design, optimized for small screen. Desktop users, on the other hand, got a rich experience, suited best for a lot of available pixels.
“Creating a tablet-specific experience must be more strategic than simply resizing buttons and images — responsive design is a hot topic but not a sure solution.
It is a mistake to treat the tablet as a large smartphone or a small desktop computer; the tablet environment must be understood and exploited on its own merits.”
Unfortunately for the tablet users, their tablet environment wasn’t fully understood nor exploited, and they often ended getting a scaled-up version of the mobile website instead. However, as it seems, this wasn’t the optimal solution for both the visitors nor the website owners. After all, large parts of their screen were unused, and potential helpful elements were hidden due to the mobile-based interface design. So, whenever your organization isn’t ready or willing to include tablets (of all sizes!) as a priority, make sure you present tablet visitors with the desktop version of your website. Both an article by Google and a case study by VWO confirm this as the best way to go for now.
The most important tools in your toolbox should be physical versions of the most popular tablets visitors use to browse your website. By testing your website on these devices, you can be sure to mimic the user experience of your visitors as closely as possible.
If you’re working on improving your website (or setting up an A/B test), it can often we helpful to inspect elements live on your tablet. By using a technique called remote debugging you can inspect elements on your physical tablets like you can do on your desktop computer.
Google Chrome Developer Console
Using the Google Chrome browser, you can emulate a mobile or tablet view of your website. The developer console is accessed via cmd-shift-c followed by cmd-shift-m (Mac) or F12 followed by ctrl-shift-m (PC). This Toggle device mode allows you to emulate a broad range of devices, including popular models of the iPad and several Android tablets.
By watching session replays of your tablet visitors, you can see how they are navigating your website. Are they able to use your navigation? Is the shopping cart designed well for mobile usage?
Best practices for tablet websites
Fix CSS hover
A common problem for tablet users is that they have to double-tap on a link to navigate to the page it links to. Unfortunately, most people don’t know they need to double-tap, and will abandon their efforts after the first ‘failed’ tap. The problem is outlined in this article. There it is described as being related to the lack of having a mouse to hover on a tablet, and Apple that is trying to solve this problem by making the first click on an element activating the related :hover class in CSS.
Don’t use Flash
In the past, Flash was one of the best options to add animation or interaction to a website. Currently, with solutions like jQuery, HTML5, and CSS animations, Flash technology have dropped in usage stats. This change was further catalyzed by the release of the iPhone and iPad running the iOS operating system (which doesn’t support Flash). Given that the iPad still holds a market share of about 25% in the tablet market, using Flash for any critical task basically stops 1/4th of your tablet visitors from converting.
Don’t open new tabs
As outlined in this article about target=”_blank”, there a very few good reasons to automatically open links in new tabs. In fact, most of the valid uses mentioned in the article could also be solved using inline popups, therefore eliminating the need to open new tabs almost entirely.
Test landscape and portrait
Websites that are displayed on tablet devices should be tested in both orientations: landscape and portrait. Because the number of available pixels in screen width differs greatly between these orientations, websites can often be found to have either big areas of white-space or be cluttered. Keep in mind that even the process of switching orientations (flipping the tablet) can cause problems on some websites, make sure it doesn’t on yours.
Test all screen sizes
In addition to testing both orientations, make sure you test your website on all tablet screen sizes. Unfortunately, most websites settle on testing for just the most popular models of Apple or Samsung. While this might seem like an effective solution now, with the rate that new devices are being released, it will probably mean they will have to adjust or optimize their website in the near future again.
Test your menu
Getting your navigation right on a tablet can be difficult. It involves balancing the needs of your users to quickly navigate to a page, with the limited screen estate available for a menu. As shown by this tablet UI | Navigation board on Pinterest, there are plenty of ways to go here. Whichever solution you choose, however, make sure to do user testing and mouse tracking to see if tablet users are able to find and use your menu as intended.
Test high pixel density
Many modern tablets have screens with a pixel density of greater than 1. These screens are also commonly called Retina screens. Because these screens allow images to be displayed more sharply, they can also highlight images that aren’t optimized for them. So, in order to make your product images look their best on a retina screen, test your website first, and improve wherever possible. Also, be sure to use SVG icons so they will look sharp on any resolution or pixel density.
Optimize your forms
Forms are an important part of your website. The serve as the gatekeeper between a visitor and a customer. In terms of optimizing forms for tablets, the most important aspects to keep an eye on are auto-correct, HTML5 form types and displaying form fields in a large enough size to tap on. For additional optimization tips, be sure to run your website through our free form analysis tool.
Increase your button sizes
It can be a lot harder to accurately click on an element with a finger, compared to a mouse pointer. Because of this, it’s advised to increase the size of clickable elements on your website. This allows users of all devices to more easily click or tap on your buttons. The recommended size is for touch target elements to be a least 44 x 44 pixels, with bonus points for a proper amount of white-space around the elements.
“People interact with touch-based user interfaces with their fingers.
So user interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets.
Ok, so how big?”
Increase your font size
In order to keep text readable for all visitors, it should have a large enough font size. This is especially true for mobile devices, which usually have smaller screens than desktop monitors or laptop screens. Therefore, when developing your website (or using media queries to optimize it for tablets), make sure to pick a font size of 16 pixels or more. That will ensure proper legibility, and, therefore, will most likely positive contribute to your conversion rate.
Add ‘Email cart’
Converting visitors on mobile devices can still be a difficult task, which might explain the lower conversion rates on these devices. Therefore, it can be wise to add features like ‘Email cart’ to your checkout. This allows visitors that are willing, but not easily able, to purchase their items to do so on the device of their choice (which is often the desktop computer).
Customize meta tags
Several meta tags are available to optimize the mobile experience further. For instance, there is the ‘viewport’ meta tag that controls aspects such the width and initial-scale of the screen. Other meta tags such as ‘apple-touch-icon’ and ‘apple-mobile-web-app-status-bar-style’ allow you to customize the experience on the iPad even further.
Even though tablet devices might have the lowest view share amongst desktop and mobile devices, they still present an important opportunity for conversion optimization. By following the guidelines and best practices above, tablets can become an even more important driver of conversions on your website or webshop.
He is the founder of ConversionReview. He has been building and optimizing websites for 15+ years now, and doing so with great success.
On top of his digital skills, Theo is also a trained psychologist and frequent speaker at events around the world.