Entry Post

Entry Module
Main Post Title

Notes in Front-end Design

Post Content

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


  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>
    Champion of Content Structure
  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)
    <h1> <a>HopScotch</a>
    </h1> <p>Champion of Content Structure</p>
  3. Add classes to elements
    • start with generic class names (e.g., name, desc, axn, comp)
    <h1 class="name"> <a class="axn">HopScotch</a>
    </h1> <p class="desc">Champion of Content Structure</p>
  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
    <h1 class="name"> <a class="axn" title="Go to Home">HopScotch</a>
    </h1> <p class="desc">Champion of Content Structure</p>
  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:

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


  • 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

Comment Module

There are no comments.

Comment Creation
Compose Comment