Layout Usability And Coding Recommendations

Posted The: 11/07/2008 At: 6:20

Last Edited: 11/07/2008 At: 7:41

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.

Comments: [0]

Tutorials

References

Brugbart

Language

© Brugbart Webdesign