This trend sends a strong message: if you haven’t already, now is the time to prioritize your website’s design considerations for tablet functionality. Ignoring this could negatively impact your website’s overall conversion rate, return visits, sales, and more.

What is Tappiness?

When a website exhibits "tappiness," it’s easy—or even delightful—to use on a mobile or tablet device. Tappiness encompasses smart use of space, text that is easy to read, logical interaction clues, and large touch targets that allow visitors to navigate with confidence.

The large font sizes and wide touch targets in this design offer a positive experience, even when reduced in scale on a tablet.

The opposite experience exists when text is too small to read and navigation links are so close together that unintended navigation occurs. This adds time, complexity, and frustration to the navigation experience, which will quickly drive away your visitors.

Small font sizes and narrow touch targets in this design prove to be much more difficult to read and use on a tablet.

While it may be ideal to redesign your website with a responsive layout for all devices, time and cost may inhibit you from a complete overhaul. But you do have other options. Here are some tips to help you improve the way tablet users experience your website, with just a few simple changes that you can make today!

Improve Your Site’s Tappiness in Six Easy Steps

Just a few subtle adjustments to your CSS can greatly improve legibility and navigation dexterity on a tablet.

2. Ensure links and calls-to-action look tap-able without hover states. Hover states do not exist on a tablet. Style your text links to use a clear, contrasting color. And don’t be afraid to use underlines for the default link state.

3. Increase font sizes for legibility. Bumping up your font sizes by a couple pixels or partial em’s can make a difference. A little goes a long way.

5. Increase margins on pages and content blocks. This improvement supports overall legibility and reduces visual complexity. Increased “white space” can result in the impression that your website’s content is easier to consume, as compared to a website with crowded content.

6. Increase form field size and spacing. Make it easier for your visitors to tap and enter information into form fields. Improvements to your forms may make the greatest impact to your conversion rate.

As an added bonus, these simple CSS changes will likely benefit your desktop visitors as well. But, as always, be sure to run QA on your changes for all platforms and browsers before committing to them.

Websites with Tappiness

Below are a few websites that exemplify tappiness. Try these out on your tablet as well as your desktop. Notice these sites don’t employ separate layouts or versions for tablets. Yet the same site looks good and works well on both platforms.

Fitbit uses a healthy amount of white space coupled with large text and generously-sized touch targets.

While Skillshare could bump up the size of their body text a bit more, they do offer large, easy-to-use buttons for navigation and calls-to-action. There is also plenty of space surrounding content blocks.

Conclusion

Does your site provide tappiness? Check it out on a tablet device and see for yourself. Your website may be losing visitors, conversions, and money by creating an unpleasant experience for tablet users.

The good news: you don’t need to spend a lot of time or money to make tiny, incremental changes that will vastly improve your user experience on tablet devices. For many of you, that means money in the bank.

Continue the conversation

Share a website that brings you tappiness! Have a question or comment regarding this topic? Please post a response.

About the Author(s)

For the past 15 years, John Meyer has been designing and improving interactive experiences for businesses small and large, in fields from Electronic Design Automation to Healthcare. Today, John enjoys making the Internet a better place, as Senior User Experience Designer at Closed Loop, in Roseville, CA. You can follow him on Twitter @meyerhaus.

Comments

hi~so thanks your article,so nice.can you tell me the first picture from which website? it 's so pretty website, so glad to accept your answer, thanks

Samara Watkiss

February 26, 2013

Awesome article. Always nice to have simple actionable tips as well as big concepts. Thanks.

How to make a website

February 13, 2013

With our professional and feature rich Website Software you’ll have the most powerful system with photo galleries, streaming audio & video, contact forms, Facebook integration, etc… Everything will be at your disposal, and you’ll be able to create and edit your own professional website in minutes!
How to make a website

Agreed, CSS3 @media queries are a great way to layer on further refinement and control, after utilizing some basic principles from above first. I plan to address additional techniques like this in an upcoming post soon. In the mean-time, for those that want further background on media queries and responsive design in general, I recommend this article: http://uxmag.com/articles/a-primer-on-responsive-design

Erik F

January 4, 2013

This is a good start, but I would have liked to see some references as to how to implement the changes dynamically, like via user agent detection or viewport width. Something like the ipad mini (or the retina to be honest) has the effective size of 1024x768, but so can a desktop. So how do you know when to make your buttons/interactions larger for an ipad? Or do you just make them larger when it is at least 1023x767? In that case, user agent detection might be more appropriate, but that isn't always reliable. So both?

You also say that someone might not have the time to make a responsive design - which I totally agree. But setting up stylesheets with lots of @media queries to change the sizing of buttons, form fields, whatever - essentially you're making responsive design minus a maleable grid layout.

Anyways - I am all for more touch affordances on tap devices. I just don't want people going "Great idea! How do I do it?" And maybe the article presumes that a developer will handle all that wizardry, which is probably fine.

Great point about avoiding top level links where there is a dropdown menu below it. I would also recommend adding a down-arrow icon to any top menu item that contains a dropdown, for a helpful visual cue.

Warwick

January 3, 2013

Great post. I'd also like to add don't link top level menu items if there is a dropdown menu below it.

Websites this works great as you can have a hover menu but on touch devices you never see that menu. Actually I'd just say remove all hover flyouts all together.