jotsheet

Been tweakin’ the site a bit. Nothing radical—just a tune-up. In addiction to the slick, extensionless URLs I put in for the jotsheet a few moons ago, I’ve tightened a few other nuts and bolts. The biggest behind-the-scenes change is the search engine optimization piece. I used CSS and DIVs to escape the code sequence prison of old-fashioned markup. Sound exciting? Uh, hang on for the ride.

It’s all pretty simple, but it involves changing the way you think about HTML a little bit. Back in the ol’ days (uh, 1999?), when everyone was puttering along happily with table-based layouts and Netscape 4, the layout of the code was pretty well tied to the layout of the page. Say you were lookin’ for a simple design with a banner, left nav, and content area. Try this on for size:

<table width="100%" height="100%">
  <tr>
    <td colspan="2">Banner</td>
  </tr>
  <tr>
    <td width="20%">Left Navigation</td>
    <td width="80%">Content</td>
  </tr>
</table>

Standard fare, eh? You could do a little better with table-based layouts, separating each area into distinct tables and using the align=”left”/align=”right” trick:

<table width="100%">
  <tr>
    <td>Banner</td>
  </tr>
</table>

<table width="20%" height="100%" align="left">
  <tr>
    <td>Left Navigation</td>
  </tr>
</table>

<table width="80%" height="100%" align="right">
  <tr>
    <td>Content</td>
  </tr>
</table>

But then browsers became not-crappy-anymore, and CSS was the hip thing to do. Now everyone’s on DIVs like Dean’s on caffeine:

<div id="banner">Banner</div>
<div id="nav">Left Navigation</div>
<div id="content">Content</div>

But you know what? That’s not good enough, because the code doesn’t have to be in that order, and it shouldn’t be in that order. You want your content at the top. Why? Two important reasons:

1. The HTML downloaded first displays first.
2. The HTML at the top of the file is considered by search engines to be more important.

So the good stuff’s gotta be first, and stick the repetitive junk (i.e. the navigation and banner you’ve got on every single freakin’ page) at the bottom:

<div id="content">Content</div>
<div id="nav">Left Navigation</div>
<div id="banner">Banner</div>

Last question. How do you get it to lay out properly? I guess there are different ways, but if you don’t think position:absolute is a sin, you can use it to pin your DIVs to the page. With a cached CSS file, your browser knows where to dump the first-loaded content, second-loaded nav, and last-loaded banner.

Still hungry? Brandon Olejniczak’s got a few more pointers on at ALA on SEO with XHTML/CSS.

Share This