Mobile CSS tip – padding is your friend

After getting more serious about mobile design myself, I started noticing a few things that irked me on a few mobile sites. One of them being the fact that tiny icons are difficult to pinpoint with your finger, causing "misclicks".

CSS developers often make heavy use of the margin style to separate elements on the page, which is usually not a bad idea. The one area where it doesn't make much sense is on mobile devices, especially on clickable elements.

For instance if you have a group of 3 small action icons, i.e.:

They will be difficult to click on a small mobile device. But, if we separate them with padding, instead of margin, we give the icon quite a bit more "clicking real estate".

This is a good best practice for icons on a mobile device of any kind.

Why follow me on Twitter?

  • I tweet about new technologies, services or libraries I find interesting
  • Yeah, sometimes I'll post a pet-peeve or rant about something trivial
  • If I discover something that made my web development life easier, I share it
  • I'll shout out any handy tip that I think might be useful to other devs

Tagged .

Updated: 2012-06-25

Phil LaNasa follow us in feedly