Make your website touch friendly
There are some simple rules you can apply to your website ux design to make it easy to use on any touch device – iphone, ipad, phablet, tablet etc etc. With everyone going mobile and with so many different types of devices being used to access the web, why not design a website that works on all?
Big buttons
To make it easy for an average adult index finger to tap a button - keep the minimum height to 30px and width to 50px.
Hover is dead
Hover doesn’t work on a touch device so remove it completely from your website. Replace it with links or menus that when tapped display the information that was once available in a hover.
Go large
All text should at a minimum be 11pt in size. Ensure that text links are differentiated from normal text in colour and style, and size where possible. Text for a link should be atleast 20px in height (approx. 12pt font). If you can make them bigger, do so.
Make some room
Increase the padding between navigation items such as menus and links by 5-10px (or more if possible). By providing more room it will prevent the user from accidently selecting the wrong item due to its close proximity to the desired one.
To improve readability, increase margins on pages and content blocks. Creating more white space reduces visual complexity.
Field spaces
Again any form fields should have a minimum height of 30px to allow for that average adult index finger. Also add some space between those fields so that accidental tap into the wrong field doesn’t frustrate your users.
The majority of the above can be applied through simple changes to the CSS. So why not get touch friendly?
Please refer to the following article for more information:
