0
Comment
The main idea behind generic class names is to have a standard naming convention for common HTML patterns and attaching it to specific class names.
For example, here’s a simple HTML markup of Skip Link component:
[html]
<div class="comp skip-link_comp">
<a class="skip-link_axn" href="#content">Skip to content</a>
</div><!– skip-link_comp –>
[/html]
Notice that there are two generic class names attached to specific class names:
- comp – short for component
- axn – short for action
Only comp is suggested to have a separate class name for CSS debugging purposes.
The syntax is: specific-name_generic-name
List of Generic Class Names
- comp – component
- cr – container
- ct – content
- hr – header
- name – title or heading
- desc – description
- grp – group or parent of number of items
- item – part of a number of items
- accessible-name – official name
- friendly-name – custom displayed name
- nav – navigation
- nav-grp
- nav-item
- axn – action
- axn-grp
- axn-item
- notice – notification message
- datetime – time
- sep – separator, divider
- label
- pred_label – (predicate) verb part of a label or phrase; e.g., in the phrase “Edit Entry”, “Edit” is the predicate
- subj_label – (subject) noun part of a label or phrase; in the example above, “Entry” is the subject
- prep_label – preposition
- verb_label
- noun_label
- adj_label
- form
- field
- field_cr
- field-axn
- field-axn_cr
– adjective
- colon_label – colon
- comma_label
- info
Standalone Generic Class Names
- comp
- nav
- axn-comp
List of IDs
- comments
Post in context: I am “refactoring” the existing HopScotch Free WordPress Theme . This is due to several improvements in standardization and content structure.
The example that I will be using is the most common element of web sites – the web site name and description. One encounters this in the form of web site logos and the usually the description is hidden from view.
Here are my notes as I go each step of the front-end design process.
Stages in Front-end Design
HTML
- Write the content in text format
- write the important information ahead of the less important (which comes first, an item’s name or its thumbnail?)
- think of it as words which will only be dictated by voice (like a screen reader)
- the information you are writing will be printed on paper (no images, only text in serif)
- only include images (icons, symbols) if they need to be translated or described in words, otherwise tackle during CSS stage
- e.g., should you write in text “cog icon” to represent it beside the “Settings” link?
- elements like <img> has the alt attribute which could contain a description of the image on display – this element, especially if a photo that supplements a text must be included with a <caption>
[html]
HopScotch
Champion of Content Structure
[/html] - Markup in HTML
- don’t use <div> or <span> (yet)
- if a text doesn’t match with any existing HTML element, use <p>
- for headings, use <h1> (change later when in context)
- add <a> for links and action elements
- always link up the web product’s name to the Home view
- related: HTML Outline
- separate objects and components with one vertical space (return)
[html]
<h1>
<a>HopScotch</a>
</h1><p>Champion of Content Structure</p>
[/html] - Add classes to elements
- start with generic class names (e.g., name, desc, axn, comp)
[html]
<h1 class="name">
<a class="axn">HopScotch</a>
</h1><p class="desc">Champion of Content Structure</p>
[/html] - Add HTML attributes
- HTML attributes are arranged by id, class, others
- add
titleattribute to <a> elements- accessed via tooltip; use it to display supplementary information
- add
roleattribute
[html]
<h1 class="name">
<a class="axn" title="Go to Home">HopScotch</a>
</h1><p class="desc">Champion of Content Structure</p>
[/html] - Componentize the elements
- wrap the grouped elements in <div>
- generic name of components is “comp”
- provide for specific class names in this syntax: specific-name_generic-name
- for a name grouping, separate with a hyphen (-)
- underscore(_) separates the specific from the generic
- put comment tag at the end of the component using the specific name
Only Generic Names:
[html]
<div class="comp"><h1 class="name">
<a class="axn">HopScotch</a>
</h1><p class="desc">Champion of Content Structure</p>
</div>
[/html] - wrap the grouped elements in <div>
The HTML markup of product-header_comp with specific class names:
[html]
<div class="comp product-header_comp">
<h1 class="product_name">
<a class="product-name_axn">HopScotch</a>
</h1>
<p class="product_desc">Champion of Content Structure</p>
</div><!– product-header_comp –>
[/html]
Note that comp is one of the standalone generic class names.
—
Conclusion
- don’t stress too much on class names – the important factor here is consistency
- the result is far from its final look since this component will still be put into context along with the site’s other components
Related Reading
Categories
As of this moment, HopScotch has gotten 1,470 downloads since it launched on November last year – and for that, thank you and I hope this theme has been useful for your web sites.
I am currently refactoring HopScotch for the following reasons:
- updates in content structure
- improvements in standardization (element naming for HTML and CSS)
- development towards being “pluggable” both in WordPress platform and in CSS
This endeavor will affect current users of this theme especially if you’ve customized it directly or through a child theme.
My only suggestion is when the update comes is to update to version 3.
Discovery has always been part of our experience in using web sites and apps. They could be in any form:
- clicking an ambiguous icon to find out what it does
- going through multiple pages to find information
- finding out what’s causing an alert icon beside a label
- learning and memorizing keyboard shortcuts
…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
Nature refers to the individual characteristics of an element.
- Display (display)
- Dimensions (padding, width, height)
Theme
Theme refers to the visual design of an element.
- Colors (color, background-color)
- Typography (font-size, font-family)
- Decor (border, border-radius, box-shadow)
Layout
Layout refers to the relationship of elements with one another.
- Position (float, position)
- Spacing (margin)
Update
Animation
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:
- you press the power button of your mobile phone and it causes the screen to light up, showing a pass code input screen
- you input a pass code and the mobile phone unlocks, showing the home screen
- you tap a particular app icon and you are shown its information
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.
Elements of Interaction
The Elements of Interaction aims to categorize the actions of the user while interacting with web sites and apps.
Task
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.
Activity
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).
Behavior
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.
Conclusion
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.