Mobify Developer Blog Mobify

5 Easy Tablet Optimizations You Can Make on Your Website Right Now


In the web design community, tablets continue to be somewhat of an enigma. They sit in the uncomfortable midpoint between the unrestricted playground of a 'desktop' browser and the full-on design and performance challenge of creating an optimized mobile experience.

The thing is, there's actually a ton of optimizations you can make to turn your website into a superb experience for tablet users. Some of these optimizations are quite advanced, but the majority can be achieved through small tweaks that take a short amount of time to implement.

For the time and resource challenged, here are 5 optimizations you can make to your website today to provide a better experience for your tablet users.

Side note: they are taken from our recent resource, The Ultimate Guide to Tablet Web Design.

1. Turn Off Autocorrect and Autocapitalize on Form Fields

If you only have 5 minutes to spare, implementing this fix should be your number one priority.

Tablet users spend a lot of time browsing the web and using web-based services, which means that they interface with a lot of login forms and data collection points. These interactions require your users to take action, so you need to make sure this process is as easy as possible.

This email field has not been optimized for tablets

To fix over-enthusiastic browser automation, insert the below attributes into relevant form fields, and you'll be good to go.

<input type="text" autocapitalize="off" autocorrect="off">

2. Make Typing Easier with Contextual Keyboards

If you've attempted to work on a tablet before, you'll already know just how painful typing on a software keyboard can be. To make life easier for your tablet users, provide them with symbol sets on their keyboard that are relevant to the tasks they are completing.

Certain keyboard symbols appear for the standard text field
Hitting the email field triggers a shift in keyboard layout
Moving between fields triggers a shift in keyboard layout.

Use the following input types to optimize them for tablet (and smartphone!) users:

Standard keyboard:

<input type="text">

URL parameters:

<input type="url">

Email­ specific keyboard:

<input type="email">

Numeric keyboard:

<input type="text" pattern="[0­9]*">

3. Increase the Font Size and Line Height

Medium's formatting looks great on tablets

Websites that have been formatted for easy readability on a tablet are surprisingly few and far in between.

Medium is an example of a brand that has clearly invested a lot of thought into making sure their website is easy to read on a tablet — and the result is a beautiful reading experience that is a jump ahead of the rest of web publishers.

The easiest way to improve the readability of your website is to increase the font size to at least 16px and the line height to around 1.5 — although the latter can be set tighter or looser depending on the context.

4. Increase the Button Size

Users get frustrated when they try to tap on a particular button or link and end up mashing the wrong one. As a result, they're more likely to navigate your website by zooming in on buttons and links before tapping - an approach that improves accuracy, but lowers usability.

Increase the button size to 44px for users browsing the web on tablets

We recommend making each touch target at least 44px by 44px and using padding rather than margin.

It might sound like common sense, but it's worth reiterating: the bigger the touch target is, the less likely a user will hit the wrong button.

5. Search and Destroy the a:hover State

Hovers, Y U No work on tablets?

Hovers tend to perform unexpectedly in touch environments — at worst they don't work at all. The result is a UX blocker that stops users from clicking on links.

Most current tablet websites are directly ported from an existing 'desktop' site, and hovers are typically overlooked as something that can break on a mobile device. Depending on the the functionality of the hover state, in most cases it's possible to circumvent the problem by simply removing the hover entirely.

For example, when viewing the POP website on a desktop, users are treated to a funky hover animation on each of the agency's featured stories. On a tablet, these hovers have been disabled, which allows users to click through without any weird unpleasant surprises.

Final Thoughts

I hope you've enjoyed these five quick optimizations you can implement on your website to make it more tablet-friendly.

If you're interested in additional techniques for optimizing your website for tablets (both basic and advanced), I'd recommend checking out our most recent resource: "The Ultimate Guide to Tablet Web Design."

In the meantime, are there any other quick optimizations or go-to responsive techniques you typically implement to make your website better for tablet users? Let us know in the comments!

Hope that article was useful for you!

Would you like to receive more mobile web tips in your inbox, right when we publish them?

Subscribe to Mobify’s Developer Blog!

You'll be joining a community of awesome, like-minded mobile developers.

And you'll get articles full of mobile web development tips and tricks, in your inbox, right when we publish them.