The love of tablet computers is growing exponentially, according to a report by International Data Corporation. The IDC Worldwide Quarterly Tablet Tracker shows a definite increase in shipments of tablet computers all over the world, with growth potential expected to outpace other devices by 2015. What does this mean for blog owners looking to stay ahead of the curve? Better start tweaking your website now to make it tablet friendly.
Get Your Own Device for Testing Tablet-Friendly Blogs
One of the most important steps you can take is to test your blog regularly on your own tablet. Browser features and coding changes often. It is vital that you get in the habit of viewing your blog on a tablet to make sure everything is working properly. You will never know if the changes you make work unless you see them in action. The price of tablets drops as their popularity grows. For example, you can get a Lenovo Yoga Tablet for just under $200. It is a worthwhile investment for a blogger looking to draw in tablet traffic.
Nix Autocorrect in Form Fields
Form fields are a problem with Mobile Safari, the Apple Web browser for their iOS system. Autocorrect and autocapitalize are default features for most form setup that trips up case-sensitive input fields. Asking your readers to each take the time to turn off the functions themselves is not practical. Instead, add a snippet of code to your page that turns it off on the blog side.
<input type="text" autocapitalize="off" autocorrect="off">
Put this piece of code into every form field that is case sensitive. It is a quick and easy fix that alleviates frustration for readers trying to subscribe, post a comment or fill out a contact form.
Think About Space
In order for a site to be truly tablet-friendly, it must be tap-friendly, explains UX Magazine. That means not bunching together your text, links and navigation. The average finger size, according to the magazine, is 45-57 pixels. If your tapable assets bunch up, the readers get frustrated and give up.
Improve tapability with a few simple design tricks:
- Make font size a little bigger, at least 16 pixels, especially on menus, suggests Mobify.
- Adjust the line height to around 1.5 to open the text up.
- You can also increase margins for buttons and critical links. Remember, buttons are just images, so use any image editor to expand them to at least 44 pixels tall for easy tapping.
- Make sure you increase the size of form text boxes, too. Adding width and height adds definition. Set text boxes to width 250 x 30 pixels.
While you are fine-tuning the size options, increase the page margins as well. This reduces that cluttered look by enhancing white space – giving everything a crisp, clean feel.
Lose the Hover
Hover is a cool trick for desktop viewing, but tends to impede movement in the tablet environment. You can save the day for tablet readers by removing the hover action from your page code. Simply open up the source code and do a search for “a:hover” then delete it. Your desktop and laptop readers won’t even notice it’s gone.