
👋 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. 🥰
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.
—
An action and a reaction that goes back and forth between entities is interaction. Here are simple examples of interaction between a user and computer:
It is worth noting that the last item is one of the simplest forms of interaction in web sites and apps – you tap an app icon and it opens or you go to a URL and the web site appears; it presents information and you consume it. Think of link surfing in Wikipedia – you simply activate link after link and consume the information available in the articles.
Of course, added web site or app features provide for more interactions other than purely presenting and digesting information. Take for example 9GAG – instead of textual information, the user could consume textual and visual information, upvote, downvote, comment, and share memes.
The Elements of Interaction aims to categorize the actions of the user while interacting with web sites and apps.
A task is a work done by the user. It is usually direct to the point. For example searching for the keyword “alpaca”. Given that you are already on google.com, this entails inputting the word “alpaca” into the search bar and activating the search button.
An activity is composed of several tasks. For example, contacting the best alpaca coat maker on the internet. Now, apart from doing the task of searching for the keyword “alpaca coat maker”, there are several tasks entailed in this activity such as reviewing the descriptions of top search results, looking for ratings, trying to visit all top five search results, picking the “best” according to your criteria, and finally, getting hold of them thru any communication channel available (contact form, chat, email, or phone).
A behavior is a user’s particular pattern of usage of a web site or app. This particular element of interaction creates a space for special cases that varies from user to user.
From a low-level perspective, a user might have a peculiar way of accomplishing tasks or activities. From the example above, a user’s behavior in searching might be to go directly to the top result by activating the “I’m Feeling Lucky” button.
From a high-level perspective, the user might have a peculiar way of using a web site or app which could be not the main purpose of the web product itself. For example, some users use Instagram only for editing pictures but not posting them to Instagram.
The Elements of Interaction puts the context in Elements of Information Structure. It puts the connections among the objects and components in a user interface based on how users might use the web site or app.
Here’s a simple yet effective activity we have here at Voyager – stand-up meetings.
In this post, we will discuss Elements of Information Structure. We’ll use google.com as an example to demonstrate how information is structured in such a way that all its elements are identifiable in singles and in groups.
Contents of web sites and apps can be called “information” – these are words, phrases, symbols, and any representations of elements that give meaning to the user. All information, to be effective, must be properly structured. Imagine a web site that does not show easily the information the user needs – that web site might need to restructure its information by prioritizing the more important ones or what the users usually need.
An object is a singular element.
Note: Some Objects are generalized like in the Navigation Items above. There are several components there (e.g., Apps, Notifications, Social, and Admin) which are listed generally as “Navigation Items”. Ideally, another illustration could show these interactions but for this post, we won’t go into that level.
A component is a combination of more than one object.
Note: Name is considered a Component due to its HTML markup grouping wherein the Name Component could also contain taglines and other objects related to the name of the web site.
A container is a UI element that contains objects and components. Examples of containers are pages or screens, dialog boxes, pop-overs, and panels to say the least. Container is very useful during interaction because it defines the confinements of the information that will be shown or hidden from the user’s view.
A constructor is a default section in a web site or app. Generally, these three constructors apply to all web products: Masthead, Content, and Colophon. The Masthead contains the name of the web product, the main navigation and search functionality; the Content, well, contains the main content; the Colophon contains additional information of the web product.
Updated
One example of a sub-constructor is a sidebar which attaches to any of the three constructors. Sidebars are denoted by the HTML tag <aside>. It contains and supplementary information, widgets, and plug-ins.
A view is an instance of the web site or app. Usually this is also the name of the current page or screen container the user is in. It basically answers, “What page or screen is the user currently viewing?”
Each red label in the illustrations above can be used as official names of the objects and components. Team members working on the same project will now have a standard name for components and this could lessen the confusion when referring to the said components.
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: