Creating Tablet-Friendly Blogs

by Beth Kindig

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 and maintain the benefits blogging brings to your business.

Get Your Own Tablet computer for Testing

One of the most important steps you can take is to test your blog regularly on your own Tablet computer (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.

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.

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

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.

Blog displayed on a Tablet computer

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; and
  • 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.

Keeping things simple will make your blog appear better on a tablet!

Author: Beth Kindig has published over 900 articles in the last 8 years exclusively on Technology and Startup companies. She has held product marketing and developer evangelist roles at tech companies representing products in data, security, internet of things, connected home, connected cars, encryption, mobile, health care, and Financial technology (Fintech).
Her articles have been featured in Venture Beat, AdExchanger, MediaPost, CitizenTekk and the International Association of Privacy Professionals. She has written over 30 reports and whitepapers on enterprise technologies. Beth has also been a speaker at Tech Week, Android Developers Conference, Advertising Week NYC, GamesBeat and more.

Share:
Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Table of Contents
Scroll to Top