Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
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.
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:
There are other approach in using icons in action elements, namely:
using an actual single image either thru <img> or <svg>
<a href="#"><img src="img/icon.png"></a>
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)
It is important that we don’t leave the link as it is – we must make it large enough to be easily activated by any pointing device (mouse pointer or touch).
Let’s take a very simply example – a set of navigation items:
Link Padding on Hyperlinks
[codepen_embed height=”572″ theme_id=”1820″ slug_hash=”VYWaYE” default_tab=”result” user=”BrianSahagun”]See the Pen Link Padding by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
In Example 1, notice that the only active area of the links are the words themselves and not the whitespace beside them. You can see the active area by the blue background highlight when you hover on the links.
Link Padding Increases the Active Area
Now, compare Example 1 to Example 2. When navigating with a pointing device such as a mouse, it is easier in Example 2 to hover on the navigation items and click the chosen link; for navigating using touch, it is also easier in Example 2 since the active area is larger and you can tap far away from the other navigation items – avoiding an accidental activating of the other links.
To pad a link, there are two things to consider:
Display it as block
Increase the size around it thru padding
Don’t Overdo It!
In Examples 1 and 2, you can see that the list has a fixed width and border that shows until where the navigation items end. Ensure that you clearly put active areas in a clear manner so that users won’t mistakenly click on a whitespace with a “hidden” link (see Example 3).
Now, why would users “click” or “touch” whitespace? I, personally, do that as a “comfort zone” knowing that activating on a whitespace releases any unknown focus on other elements – it’s similar to pressing Esc repeatedly.
Voyager Innovations, Inc. is part of First Pacific and is a wholly owned subsidiary of Smart Communications, Inc. (Smart) focused on delivering disruptive innovations for the rapidly changing world.
In today’s world, the products we sell, how we do things, the way we are structured, the networks, systems and platforms that support us are all changing and evolving. Voyager Innovations, Inc. is the strategic response to the changing needs of the communities. We are an organization that is positioned for the future new business streams & evolving business models.
Make example of how simple a semantic markup can be made into a component.
Use Search for example.
While HTML adjusted for the use of fragmentation in content structure (e.g., Form label scattered across the place and only connected by ID’s and for attributes), as well as ARIA adopted to Web Components to provide meaning and semantics to its structure and free-wheeling use of elements.
We must not forget that even webapps can be deduced into a simple document, so as long as they provide human-readable information.
The ultimate test still is stripping off the presentation layer, diving deep into the interaction layer and presenting only the information to the user.
This is the simplest we can approach designing website and applications.
There are several blog entries in Design DriveThru about the practical application of HTML and CSS, simple ideas as well. In order to put these entries in a clearer light, there needs to be specific categories where they fall under. This will put things in context so that the reader would know to which extent the entry applies to him or her.
For example, as we talk about Notes on SASS File Structure, how does one try to absorb this concept? You might ask if this entry is important for you as a web or front-end designer. The answer can be made easier by categorizing the topics.
Think and Act
The first categories deal with a particular web concept as being either of the two:
Theory deals with general principles.
Theory is a contemplative and rational type of abstract or generalizing thinking, or the results of such thinking. Depending on the context, the results might for example include generalized explanations of how nature works.