A rule of [fat] thumb[s]

By Geoff Muskett

One of the many considerations when designing websites mobile first is making links and buttons big enough for chunky fingers, rather than precise cursors.

Here’s a few small tips for consideration:

  • where possible use padding instead of margin for spacing. The space around the link will then be active, rather than just the text. This is especially important on navigation, which will be fingered a lot.
  • Markup your forms properly with <label>s. This means the label can be tapped to make the field active, or if it’s a checkbox or radio button, tapping the label will check it.
  • Don’t think in terms of pixels. A pixel isn’t a pixel, different devices have different pixel densities. EMs are better anyway. Simply try your link/button on a touch device and if the physical dimensions of the active area are at least 7mm square – or so – you’ll be fine.

Comments

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.