Tips for Creating Tablet-Friendly Designs

The majority of standard desktop sites “work” on tablets. By “work” I mean that you can visualize and navigate them. Provided they avoid major obstacles like Flash elements, a non-optimized desktop site can be an underwhelming but tolerable experience for tablet visitors.

The good news is that it is possible to dramatically improve the experience of your website with some small adaptive enhancements.

This article introduces some concrete considerations you should take in order to make sure your web design is optimized for use on a touch-based tablet.

Context & Stats

Tablets are most commonly used for browsing the web, checking emails, social networking, watching videos/films and reading news, books, etc. It is important to ask yourself the question, “How does the tablet fit into our lives?”

It is also crucial to consider that it is very common on tablets to switch from portrait (vertical) to landscape (horizontal) orientations.

Source: Staples

Buttons

Our fingers are not nearly as precise as the single-pixel point of a mouse cursor. To help your users achieve tapping accuracy, increase the spacing between different touch targets.

And don’t forget to make them big!

Icons

Tablet screens typically have resolutions and pixel densities far beyond most desktop monitors and laptop displays. The result is graphics that look fuzzy or blurry if they are not designed for such beautiful screens.

Font-based icons offer a number of benefits for tablet web design: they scale extremely well on super high­ resolution displays, they are easy to color and easy to shade using CSS.

Typography

It is very frustrating to double tap or pinch your content so you can read it.

Use a font size of at least 16px. You can also use a line height of 1.5 to allow for breathing room between text lines on content rich pages.

Moreover, try to minimize tablet typing. Using a software keyboard is not nearly as easy or as fast as using a physical keyboard, no matter what orientation or physical position a tablet is in. Since it’s more difficult to input data on a software keyboard, try to minimize the number of typing tasks required on your website.

Grids

Flexible grids provide the best way to ensure your content looks great across different tablet screens in different orientations. Bootstrap and Foundation grids are very helpful.

Navigation

Panels provide a great way of keeping the user focused on page content while providing a persistent and accessible way of navigating to another location. Another good possibility is to use a sticky navigation. This type of navigation can provide a really effective way of helping tablet users move easily around your website, especially if they typically jump from page to page.

Left Panel Navigation

The tablet ecosystem includes many different screen sizes and resolutions. It is impossible to test for every device in the market, but you can certainly cover off the main ones: iPad 4, IPad Pro, iPad mini, Google Nexus 10 and Amazon Kindle Fire 7.

The tablet market is growing, so nowadays it is crucial to have a website that works well on this platform. These considerations will help you transform your existing site into a better, tablet-friendly user experience.

In the end, small details make the difference. Try to keep it simple — there is no need to design exotic layouts. Simple layouts make it easier for everyone: clients, designers, developers, and users.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.