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.


Leave a Reply

Your email address will not be published. Required fields are marked *