Layout Usability And Coding Recommendations
Usability, Layout And Coding Recommendations for web designers.
The recommendations include a mix of the obvious, and other various recommendations regarding Layout, Usability, and coding.
Overview
Coding
- Doctype: Use a valid doctype such as, HTML 4.01 or XHTML.
- Validation: Validate your code, and avoid as many errors as possible.
- CSS: Use CSS for layouts.
- HTML: Use an obvious content structure, using h1 first then h2 h3 etc for subheaders.
Usability
- CSS: Don't lock the font-size, and consider making your layout stretchable.
- CSS: Consider applying a min-width and max-width to stretchable layouts.
- CSS: Unvisited links should be a different color then Visited.
- CSS: Change color on links when they are hovered.
- CSS: Consider not to left-align your page, it may be annoying to the user under some circumstances.
- CSS: Avoid distracting backgrounds, the page-background should be easy on the eyes, and should not confuse the user.
- 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.
- HTML: Enclose your links in ol's and ul's, or do at least separate them with more then just a space.
- HTML: Enclose your text in Paragraphs, or other relevant tags such as labels.
- HTML: Avoid using Javascript to open links, or at least provide users with an alternative.
- 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.
- Layout: Avoid Flash intros, they usually annoy your users.
- 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.
- Layout: Avoid having default browser styles, such as huge h1 elements and huge white spaces between elements.
- Layout: Do not force a link to open in a new browser window by using target="_blank".
- Layout: Video/audio Ads should not automatically start playing, its the equivalent of old-style popups.
- 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.
- Code: Avoid any mechanism which breaks the back button in a user agent.
Optimization
- CSS: On sites which rely heavily on graphic elements, consider using CSS Spirits.
- HTML: Don't embed all the CSS in your main .html, use external StyleSheets, those are cached by the browser.
Suggestions
- Code: Consider Using root relative paths instead of relative and absolute paths.
Users are free to post their own experiences as comments.