Tablet use continues to grow, particularly for shopping and internet search—in fact, tablet sales are expected to jump nearly 80 percent by 2017, reports BI provider IDC. Now’s the time to get your website tablet-friendly!
Easy, Quick Fixes
There are a few items you can change quickly to optimize your website for tablet viewers. Modify suggests making these small tweaks first before making any larger changes.
1. Disable Autocorrect & Autocapitalize in Form Fields
Tablet users are accustomed to the touch-screen navigation and use the screen keyboard only when entering text. Even users of the sophisticated new iPad Air still have to contend with a pop-up keyboard on the screen which disrupts browsing. Removing these two auto field features makes dealing with data fields easier for the tablet user.
2. Enable the Right Keyboard
When the tablet user presses on a text field, their keyboard pops-up. Help the user by having the field tell the browser which keyboard functions to display so the user won’t have to make the switch. For example, a text field will bring up the “text” keyboard. A URL will bring up the “URL” symbols. A number field will bring up the numeric functions. This saves the user a few seconds switching between keyboard functions manually.
3. Increase the Line Height & Font Size
A website fine-tuned for tablet access will use a 16 pixel font size and a line height of around 1.5. This matches the tablet form factor and makes the website more readable.
4. Use Larger Buttons
Remember that tablet users don’t click on a button, they must press on it with their finger. The larger the button, the better. A small button requires the tablet user to zoom onto that button, making it easier to press. Increase the space between buttons that are very close to reduce the chance that a finger will press both at once. A recommended button size is 44-by-44 pixels.
5. Remove the Hover
The hover feature in CSS just doesn’t work well on touch screens and can have unpredictable results. Many times it prevents the tablet user from clicking on the underlying links. Or it may get triggered by another function and the user can’t stop it. The easiest way to manage this is to remove the hover feature altogether.
Larger, More Time-Consuming Changes
Some of the other changes you’ll do to optimize your website for tablets requires a little more coding and perhaps a change in the logical flow of the site. Clickz says the best way to work through this process is to access and troubleshoot your website from different tablets to pinpoint issues. Your website can look differently on iPad and Android tablets, both large and medium form factors. So if possible, try your site on each tablet type.
1. Limit Flash Use
Flash is not tablet-friendly without custom changes to the device, so wherever you have Flash, direct the user to your mobile website. Don’t leave them staring at a gray box on their tablet where the Flash would normally be playing.
2. Streamline Checkout
Go through the checkout process on all of the tablet types to make sure the process flows smoothly. Make e-commerce functions like “View Cart” easy to access. Eliminate rework such as making the user re-enter all shipping information when they mis-typed the zip code.
