More semantically correct page layout

I really should hang out one of those old “under construction” signs on this site. I keep finding new ways to tweak and optimize both the HTML and the CSS on the site. The under construction part? It may look funny unless you refresh your browser to force the style sheet to reload.

Today’s tweaks:

  • I cleaned up the style sheet, fixing some font inconsistencies (and incidentally saving almost a full kilobyte of file size). I did this by grouping all the CSS classes and other selectors that should have a sans serif font together and stating the font family name once and only once. (For the curious, the exact code is a comma-delimited list of class selectors, followed by this property listing:
    { font-family: font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; }
  • At the same time, I added a new selector that sets the size of H2 headers in my sidebar to 11px, and changed the markup in the sidebar so that each of the bolded headings are tagged as <h2> rather than <p><b>.

So who cares? My readers who use Lynx or other user agents (for instance, the wireless version of Google, which scrapes pages into WML). Now, the sidebar is defined as a series of headings with detail underneath, rather than as an unstructured bunch of paragraphs.

Next step of course is to make it so the content, not the sidebar, appears first in those other browsers, and loads first in modern browsers. That’s a harder job than it appears; more details to come.