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

• HTML Semantics
• Elements of CSS V2
• Layers of Front-end Design