The screen sizes of tablets are unlike those of smartphones. They are larger and can be, as of time of writing, as big as 2048 x 1536 at 264 ppi or over. This means that they can display regular Web pages reasonably well. However, for websites to be actually usable on tablets, they need to support touch-screen operation. For example, touch-targets, such as link text and interactive features, need to be larger than normal to accommodate tapping and give the appearance that they can be activated.
What this means is that there are a number of options available for catering to the tablet audience:
- You could design a tablet-friendly regular website that supports touch-screen interaction.
- You could design a responsive website.
- You could create a tablet application, which strictly is not a website.
Whichever you choose, the same general design principles are followed that facilitate touch-screen interaction as with smartphones, except that more content can be displayed at once on tablets. Here are some guidelines:
- Text should be larger to aid legibility. If possible, a function could be provided to allow users to control text size.
- Enough space should be provided around links, especially form controls and drop-downs like calendars, to aid accurate touch- selection.
- Like for other touch-screen devices, the hover state is not necessary and does not need to be implemented in tablet versions of websites.
Standard navigation convention should be supported, including homepagelike features, search facility, back buttons, and touchable headlines, because users often desire them. In particular, users would rather have a regular table of contents that they could use to make a choice anytime than swipe through long lists of thumbnails (or popovers) to do it. Figure 25.6 shows examples of how standard navigation and menu presentation convention, such as dropdown menu, is implemented on tablet.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.