Notes on usable web design

This post is from an older site of mine, at least one person found it interesting, so I’m keeping it.

Thoughts on web design, good style in HTML coding, and general usability wonderings.

I am not, by any means, a professional in this field, and am only writing my opinions and observations on the subject.

Thoughts on style

Linearization of HTML

A HTML page should be written in the order of importance (with adherence to basic page structure). Aside from metatags and other <head> stuff, a page should be structured so that if every element was to be placed out linearly (no sidebar formatting, etc), one could stop the loading of the page, and the maximum amount of information would still be saved.

Some thoughts on how this can be achieved

  • Site-identifying information (header, description, logo) should be first to promote strong branding.
  • Site-identifying navigation (things that one can read and understand what kind of website it is: “menu, hours, location” is likely a restraunt or cafe site, “about, contact me” is likely a blog, etc.) should be next.
  • Page content should be next (usually the reason the user is visiting a site in the first place).
  • Page-specific navigation or secondary page-related content should load next.
  • Footers and secondary site-related content should load last.
  • JavaScript files should be loaded after all readable content, where possible.

CSS fixes can be made to reorganize a page to make it more usable.

Styling late-loading content

Late loading content should have a block container with a fixed width/height. This is to prevent the page content shifting after the main content has loaded.

To avoid surprising a user, late-loading static content should have a fixed size and late-loading dynamic content (just as an AJAX insertion) should use page animation like that found in the jQuery library.