
👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
Discovery has always been part of our experience in using web sites and apps. They could be in any form:
…and the list goes on.
One UI element that helps us in most discovery processes is the tooltip. Users of Windows or Mac have surely encountered it when you hover your mouse cursor on certain items in your computer desktop (maybe by chance or out of curiosity if you don’t want to click something). It is in the form of a box with text label or description.
The Elements of Style Sheets aims to categorize CSS properties into three elements: Nature, Theme, and Layout. It could help a front-end designer’s mental model of building the CSS on top of HTML.
Nature refers to the individual characteristics of an element.
Theme refers to the visual design of an element.
Layout refers to the relationship of elements with one another.
Update
As an example, after building the Content Structure in HTML, the front-end designer, in a mobile-first approach, will focus on styling individual elements – by their Nature first (usually, width is set at 100%). And then style according to Theme and lastly, as the viewport goes wider, the front-end designer styles the Layout.
—
In general, label and icon combination is helpful in making an action easier to remember and depict.
Take a look at the left menu of this WordPress Dashboard:
And when there are no icons:
Without icons, you would need to read the labels one by one until you see what you’re looking for. The icons beside the labels definitely ease the effort in reading and recognizing the actions.
How do we design the label and icon combination? First question we have to ask: with only HTML, is it important to represent the icon? For example, should it be contained in img
, span
, or a special character (think: icon fonts)?
If your answer is the same as mine, which is: only the text label is important enough to be represented in HTML, then we could simply use a
to contain the label; the icon would be displayed using background-image
.
Let’s use “Settings” for example:
[codepen_embed height=”102″ theme_id=”1820″ slug_hash=”EawKOb” default_tab=”result” user=”BrianSahagun”]See the Pen Label and Icon Combo by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
The icon was attached using the pseudo-element ::after.
[css]
.settings-action-link::after {
content: ”;
position: absolute;
width: 1rem;
height: 1rem;
background-image: url( ‘../img/icon.png’ );
}
[/css]
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.
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.
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]
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.
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.
This example shows the icons having sizes of 16px and active areas of 48px.
The benefits of having a larger image (48px) which will be used as a smaller image (16px) are:
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
.
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]
There are other approach in using icons in action elements, namely:
Link padding simply means adding padding to the HTML Anchor Element <a>.
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:
[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.
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:
[css]
a {
display: block;
padding: 1rem;
}
[/css]
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.
—
Next post will be about padding action links – think icons in web app toolbar.
Our team in Chikka has officially joined Voyager Innovations!
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.