Make links easy to touch
Traditional websites have text links that are easy for a mouse to hover over and click. But on a touchscreen, the same links seem smaller, and can be difficult to pinpoint with your finger – regardless of how slender it is.
On a website optimized for touch, consider using large buttons or icons for links and navigation, instead of text-based links.
Avoid roll-over drop-down menus
When using drop-down menus with a mouse, the menu usually appears when you hover over the title.
But on a touchscreen, there is no hover; you always have to click to access the menu. And in most cases, the first time you tap the title to open the drop-down menu, you activate a different link that takes you to a new page – and one you didn’t want to be taken to.
When designing for a touch device, make the second-level navigation accessible somewhere on the page (such as the footer), or have the drop-down menu appear on click with no other action.
Consider the orientation
Whether you’re using a smartphone or a tablet, everybody has their own preference for how they want to hold it, use it, and read on it. So it’s important to take into consideration both portrait and landscape layouts.
As of June 2013, the following stats indicate the split between users who hold their iPad in portrait vs landscape mode:
Clearly, you have to consider how both are going to look.
The best mobile-optimized sites have layouts which dictate how to display the page’s content depending on the orientation of the device which is viewing the page.
Make use of interactive features
Many of the popular phones and tablets recognize phone numbers, addresses, and even shipping tracking numbers. Depending on your client, you may want to make use of these interactive features as part of your design, or at least keep them in mind when planning your call to action.
