The HTML Anchor Element <a> should also stand for “action” since its use is very powerful from being a simple hyperlink to being an element that performs a specific action. Think icons in web apps that are <a> underneath the HTML markup.
Link Padding on Actions
You might have a 16×16 px icon for a toolbar action item – but is 16×16 px active area enough to be properly activated? Perhaps for a desktop device with a mouse and pointer. But for touch devices, we must ensure that our action elements are comfortable enough for the average human fingers or thumbs. This goes without saying that bigger active areas are easier to point at and activate than small ones.
The recommended size of active areas (or hit targets) for iOS is 44×44 px and 48×48 px for Android. This ensures that users could comfortably tap or click on active elements such as icons, lists, and buttons.
Increasing the Active Area Thru Padding</h3
Now, padding doesn't literally mean CSS padding – although we could also achieve it that way. For our examples below, we will set the active area of a 16×16 px icon to 48px thru the width and height CSS properties.
[codepen_embed height=”638″ theme_id=”1820″ slug_hash=”zxdPBJ” default_tab=”result” user=”BrianSahagun”]See the Pen Action Padding by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
Example 0 – Without Padding
This example shows if you have a small icon and you simply leave it as is. The active area is small enough to target/activate.
Example 1 – With Active Area of 48px
We increased the size of the <a> element to 48×48 px thru width and height CSS properties. As you can see if you hover your mouse, the active area is bigger and easier to target/activate.
Example 2 – 16px Sprite Image with Active Area of 48px
This example shows the icons having sizes of 16px and active areas of 48px.
Example 3 – 48px Single Image Resized to 16px Thru CSS with Active Area of 48px
The benefits of having a larger image (48px) which will be used as a smaller image (16px) are:
- you can resize it later to a bigger image (but not bigger than its original size) without losing quality (see Example 5)
- the icon can accommodate hi-res displays – meaning it won’t show pixelation (up to a certain size only – depending on the original size)
Example 4 – 48px Sprite Image Resized to 16px Thru CSS with Active Area of 48px
There are several CSS considerations when using sprite image being resized from its original size.
First, since a sprite image has multiple images in it and you only need to show one image for each element (and avoid showing parts of the adjacent image), we need to set up a separate element that will contain only the background-image. In this case, the <span>. On the other hand, the <a> will contain the dimensions of the active area.
Second, we have to set the <span>’s display property to inline-block so that we could control its horizontal and vertical alignment within its parent element (which is <a>). Remember, since the icon’s size is smaller than the active area, we need to align it at the middle.
Third, you have to set the desired width and height of the icons which are both 16px.
Fourth, of course, is to point to the sprite image using background-image.
[css]
.label {
display: inline-block;
width: 16px;
height: 16px;
background-image: url( ‘../img/sprite.png’ );
background-repeat: no-repeat;
}
.link .label {
background-position: -16px 0;
}
[/css]
Fifth, ensure that the sprite image will not tile like a pattern – this is achieved thru background-repeat: no-repeat.
Sixth is the tricky part wherein you need to calculate the size of your sprite image. In the example, I have a two-by-two (2×2) 48px sprite image – which requires a background-size: 200% 200% to display properly. Read more on CSS background-size.
The consideration here is that all the grids in your sprite image must have a consistent size – like everything has a 48px area – otherwise, the computation will show overlaps.
And notice how the background-position depended on the dimensions of width and height.
Example 5 – 48px Sprite Image with Active Area of 72px
For touch interactions using thumbs, a much bigger active area is needed – 72px. Having a 48px icon, we can safely set it as-is at 48px and set the active area to 72px. Notice the change in the CSS and how the background-position depended on the dimensions of width and height:
[css]
.label {
width: 48px;
height: 48px;
}
.link .label {
background-position: -48px 0;
}
[/css]
Conclusion
There are other approach in using icons in action elements, namely:
- using an actual single image either thru <img> or <svg>
[html]
<a href="#"><img src="img/icon.png"></a>
[/html] - using a sprite image with differently sized icons (but can’t be resized thru CSS)
- using only one container and setting the actual size in the image (including the white space – meaning within the 48px image, there’s a 16px icon at the middle and the rest is a transparent part of the image)
