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: http://gsnedders.html5.org/outliner/
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…
</div>
</div> - For header, wrap the module in:
<header>
<div id=”header-cr”>
Your module in step 1 goes here…
</div>
</header> - For footer, wrap the module in:
<footer>
<div id=”footer-cr”>
Your module in step 1 goes here…
</div>
</footer>
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
Forms
- 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
Filenaming
- Filenames should always be descriptive
- Use dash(-) for separating words not underscore(_), i.e. user-account.html, main-banner.png
- All small letters
Images
- 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)
Coding
- Use “Tab” key for indention
- Always add comment for every closing tags, mainly divs.
ex. <!- -End Main Div –>
Others
- 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:
- Valid HTML and CSS markup
- 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
- Search engine result — how it would look like when shown in Google search results
- 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