By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Layout Usability And Coding Recommendations

Usability, Layout And Coding Recommendations for web designers.

Edited: 2011-07-25 14:33

The recommendations include a mix of the obvious, and other various recommendations regarding Layout, Usability, and coding.

Overview

Coding

  1. Doctype: Use a valid doctype such as, HTML 4.01 or XHTML.
  2. Validation: Validate your code, and avoid as many errors as possible.
  3. CSS: Use CSS for layouts.
  4. HTML: Use an obvious content structure, using h1 first then h2 h3 etc for subheaders.

Usability

  1. CSS: Don't lock the font-size, and consider making your layout stretchable.
  2. CSS: Consider applying a min-width and max-width to stretchable layouts.
  3. CSS: Unvisited links should be a different color then Visited.
  4. CSS: Change color on links when they are hovered.
  5. CSS: Consider not to left-align your page, it may be annoying to the user under some circumstances.
  6. CSS: Avoid distracting backgrounds, the page-background should be easy on the eyes, and should not confuse the user.
  7. CSS: Consider a max-width/height on Input elements such as textareas, since such elements may be resized by the user in new browser versions.
  8. HTML: Enclose your links in ol's and ul's, or do at least separate them with more then just a space.
  9. HTML: Enclose your text in Paragraphs, or other relevant tags such as labels.
  10. HTML: Avoid using Javascript to open links, or at least provide users with an alternative.
  11. HTML: If you include your logo, consider to include it last in the document, after the content. You may use css position to place it visually at the top.
  12. Layout: Avoid Flash intros, they usually annoy your users.
  13. Layout: Don't use images with drawn text as links, they are usually hard to read. And if you must, do at least make use of the alt tag.
  14. Layout: Avoid having default browser styles, such as huge h1 elements and huge white spaces between elements.
  15. Layout: Do not force a link to open in a new browser window by using target="_blank".
  16. Layout: Video/audio Ads should not automatically start playing, its the equivalent of old-style popups.
  17. Layout: Do not place Ads to close to navigation links, or other links contained on your site. It may increase accidental click rate, and in general produce more invalid clicks.
  18. Code: Avoid any mechanism which breaks the back button in a user agent.

Optimization

  1. CSS: On sites which rely heavily on graphic elements, consider using CSS Spirits.
  2. HTML: Don't embed all the CSS in your main .html, use external StyleSheets, those are cached by the browser.

Suggestions

  1. Code: Consider Using root relative paths instead of relative and absolute paths.

Users are free to post their own experiences as comments.