Frontend UI Checklist Archive

Step 1: text + semantic tags

Convert the mock-up to plain text and wrap each text to its semantic HTML tag

  • write using notepad/simple text editor and save as .html
  • no need to write <html><body> etc… begin writing the actual markup of the module you’re assigned to
  • don’t use <div> or <span>
  • for headings, use only <h1> (no <h2>, <h3>, etc.)
  • put everything inside its semantic tag (e.g., if it’s a link, put inside <a>, if it’s a paragraph or a line of text, put inside <p>, etc.)
  • write based on your own knowledge (we’ll improve based on your output)
  • if you’re unsure which tag to use, use <p>
  • forget about the layout/colors, strip down the design to its core content
  • open the HTML in a browser to see if the “all-text” content makes sense and usable
  • as much as possible, limit your time to only 30 minutes
  • check the outline if it is correct:

Step 2: Prepare layout structure

Wrap the module and its elements in <div> tags. Use 4-spaces as standard for indentations.

  • For modules inside the content area, wrap the module in:
    <div class=”mod”>
    <div class=”mod-cr”>
    Your module in step 1 goes here…
  • For header, wrap the module in:
    <div id=”header-cr”>
    Your module in step 1 goes here…
  • For footer, wrap the module in:
    <div id=”footer-cr”>
    Your module in step 1 goes here…

This template model provides for the first container to have the display, positions, floats and the second container the width, padding, margin, border.

Apply box-sizing:border-box to the second container to fix the box model.

6 March 2013

So you’ve been developing the front-end all along but you’ve forgotten to setup a Google Analytics for the site. Not too bad, right?

But when you’ve taken for granted the IE browser version 8 and below, that’s when you should acknowledge a headache.

Checkout this list of things to account for when developing the front-end of a website.

To start with:

  • Use HTML5 Boilerplate
  • Create a favicon by adding this line: <link rel=”shortcut icon” href=”img/favicon.ico”>
  • Customize Modernizr according to your needs
  • Fill-up the meta description in the <head>
  • Add the document <title>
  • Add a separate stylesheet for your custom styles: <link rel=”stylesheet” href=”css/ui.css”>
  • Add Google Analytics

As you go along:

  • Convert the design to pure text only
  • Wrap each text in semantic HTML tags
  • Check the outline of the document if complete
  • Check the document structure on a browser if it makes sense from top to bottom
  • Wrap the groupings in <div>s and <span>s
  • Put the markup blocks inside the skeleton template
  • Name the <div>s with ids and classes
  • Consider mobile-first styling
    • No floats and positioning
    • Style first the color and background-color
    • Build the design as you go from mobile to wider views
  • Check the layout concurrently with IE7 and IE8, if supported


  • Put “for” in <label> and “id” in targeted form elements
  • In using tabindex, start with 1
  • List down all inline and generic message validation
  • Always put <label> in forms for screenreaders
  • Don’t forget error messages

Add title tag to icons without text labels — in case the user couldn’t decipher which icon he’s hovering on, a tooltip will appear.

Put states in icons — make it position:relative and on :active, put top:1px

Always put a control to remove notification messages away. A “dismiss” link or close button would suffice.

16 January 2013


  • Filenames should always be descriptive
  • Use dash(-) for separating words not underscore(_), i.e. user-account.html, main-banner.png
  • All small letters


  • Use png for transparent background images like icons.
  • Use image sprite for images with the same sizes instead of separating each image.
    Ex. icon-16.png (16x16px icons); icon-32.png (32x32px icons)


  • Use “Tab” key for indention
  • Always add comment for every closing tags, mainly divs.
    ex. <!- -End Main Div –>


  • Make sure all websites are responsive to all smartphones(iPhone, Android, Tablet)
  • Always test to all browsers, especially IE
  • Favicon(16x16px)

5 December 2012

While marking up, know beforehand which versions of old browsers you will be supporting.

  • Check the layout early and often in lower versions of IE, especially IE7 and IE8

Setup notification messages or “notifier”

  • stationary messages
  • fading messages (similar to a toast in Android)
  • make it closer to the form
  • if site-wide, have a consistent area where the notifier appears
  • yellow for regular notification
  • red for error
  • blue for information
  • green for success

Always name the main wrapper accordingly. For example:

<div id=”page” class=”page-dashboard”>

Dashboard pertains to the page/screen.

Layering of elements – use position:relative and z-index numbers, 1 being the lowest (under the stack).

19 July 2012

Before launching a website, here are several checkpoints to validate:

  1. Valid HTML and CSS markup
  2. Browser compatibility
    • Firefox
    • Chrome, Safari
    • Opera
    • IE 7 to 9 (forget IE6)
    • Tablet browsers (iPad, Samsung Galaxy Tab 10.1)
    • Mobile browsers (iPhone, Android mobile device)* For Desktop browsers, check both in Mac and Windows 7
  3. Search engine result — how it would look like when shown in Google search results
  4. Facebook share view — how it would look like when shared in Facebook

9 July 2012

Guidelines on how to sprite icons for use in sites

  • Group icons horizontally
  • One file per pixel dimension (16×16, 24×24, 32,32, 48×48)
  • Provide three rows per group (for normal, hover, focus)
  • Add another group below the last row of the first group
  • For additional icons in a group, extend the canvas to the right in an increment depending on the pixel size of the icons (16, 24, 32, 48)
  • If an icon is not exactly 16/24/32 in its boundary, align it at the center horizontally and vertically


Leave a Reply

Your email address will not be published. Required fields are marked *