I see this one all the time: something that looks like a button, but only a portion of it is tappable. Consider this example from a recent email I received (emails are notorious for this crap):
This screenshot shows a very large call to action, which is good. Unfortunately, as the screenshot illustrates, the majority of the “button” is a table cell and the tappable link is just the text inside it.
The markup itself isn’t horrible; here’s a distillation of that row in the design:
<table> <tbody> <tr> <td> <a href="…">Shop Biotek Marine</a> </td> </tr> </tbody> </table>
The problem is that the 15px padding and overall button styles were put on the table cell rather than the link itself. Setting the link to have a
display of “block” or “inline-block” would allow it to be given vertical padding (which is probably the issue the designer was struggling with here). Then the remainder of the styles could be migrated without adjusting the design at all.
When you design something that looks interactive, always make sure the whole thing is actually tappable. It will go along way toward reducing user frustration.