Tag: Theory

HTML Semantics
I’m currently working on HopScotch 3 and it involves a lot of revising the HTML markup of content structure plus a lot of structural class names.

In relation to this HTML refactoring, I’d like to share with you some notes on writing the HTML markup of web sites:
1. Text. Begin by writing in plain text all the important content your web site has. For example, you might have a web site logo – translate it into words; if you web site has a tagline or description, write that too.
2. Tag. Follow it up by wrapping each text content in its semantic HTML tag. Avoid using div or span just yet. For example, your web site name should be wrapped in a heading tag like h1 since it is the title of your HTML document; your tagline could be wrapped in a p tag. At this point, all heading tags could be in h1 since we have not put these objects in context yet. Eventually, we would be arranging the hierarchy of these tags – from h1 to h6.
3. Group. This is where div and span will come into play. You will have to group and segment the objects based on semantics and not on visual appearance. For example, you could wrap both the web site name and tagline in one div.
4. Classify. Put the class names into the grouped structure of the objects. For example, the div that contains the web site name and tagline could be classified as “web-product-name”. The test for its semantics is if the name is true to the objects’ nature – something that isn’t tied up to visual appearance or layout.
5. Format. To add another level of semantics and structure to the objects, we could use Microformats. It uses a vocabulary of class names that give structure to common content such as a person’s information, a movie’s information, an organization’s information and much more.
Related Reading
Further Reading
- HTML5 semantic markup for blog post tags and categories on Stack Overflow
- hCard Authoring Tips on Microformats
2015-03-06
Notes in Front-end Design
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
1. 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>
2. 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)
3. Add classes to elements
  - start with generic class names (e.g., name, desc, axn, comp)
4. Add HTML attributes
  - HTML attributes are arranged by id, class, others
  - add title attribute to <a> elements accessed via tooltip; use it to display supplementary information
  - add role attribute
5. 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
Write the content in text format
```
HopScotch
Champion of Content Structure
```
Markup in HTML
```
<h1>
<a>HopScotch</a>
</h1>

<p>Champion of Content Structure</p>
```
Add classes to elements
```
<h1 class="name">
<a class="axn">HopScotch</a>
</h1>

<p class="desc">Champion of Content Structure</p>
```
Add HTML attributes
```
<h1 class="name">
<a class="axn" title="Go to Home">HopScotch</a>
</h1>

<p class="desc">Champion of Content Structure</p>
```
Componentize the elements

Only generic names:
```
<div class="comp">

<h1 class="name">
<a class="axn">HopScotch</a>
</h1>

<p class="desc">Champion of Content Structure</p>

</div>
```
The HTML markup of product-header_comp with specific class names:
```
<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 –>
```
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
2015-02-11
The Power of the Tooltip
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.

(more…)
2015-02-09