Brian Dys

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>

   [html]
   HopScotch
   Champion of Content Structure
   [/html]

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)

   [html]
   <h1>
   <a>HopScotch</a>
   </h1>

   <p>Champion of Content Structure</p>
   [/html]

3. 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]

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

   [html]
   <h1 class="name">
   <a class="axn" title="Go to Home">HopScotch</a>
   </h1>

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

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

   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]

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

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