Ethan Marcotte now blogs at Unstoppable Robot Ninja.

Weblog entry:

Several mornings after

Well. Now that the redesign has launched, I feel a bit like the Dread Pirate Roberts: Good night, little design — good work. Sleep well, I’ll most likely kill you in the morning.

You know, I’ve been telling everyone that joke, and it hasn’t gotten any funnier.

Anyway, there are a couple things I’m pretty happy with in this latest version of sidesh0w.com, and I figured I’d discuss a few of them in a bit more detail. You’re beside yourself with excitement — I can tell.

So to wit, I guess:

My little drop shadow

Or, Why Ethan Marcotte Is A Whore For Design Trends.

In and of itself, the drop shadow’s doesn’t kick up any notches in my latest design — hell, Josh did a fine job of showing that everyone wants to be like Dan Cederholm.

One of the things I’m excited about, however, is the fact that I’ve managed to cram my paltry little shadow into a flexible-width layout. Most other shadow-enabled pages use one horizontally repeating background graphic to create a fixed-width content area, drop shadow and all; Cameron Moll’s gorgeous site is just one example of this in action.

I’ve always tried to aim for fluid, resolution-independent layouts. Given that, I’m pretty happy with the result of my little experiment — I’ll go into the mechanics of how my shadow is "layered" on the page a bit later.

Love on the DL

The content on this site used to be contained in <div>s with a class of "block"; if you ever poked around the source on this page, you’d have seen tons of code that looked something like this:

<div class="block">
  <div class="block-header">
    <h3>Concise yet pithy header</h3>
  </div>
  <div class="block-content">
    <p>My markup brings all the boys to the yard.</p>
    <p>There's another joke I need to stop telling.</p>
  </div>
  <div class="block-data">
    <ul>
      <li>Your mom posted this on 04 April 2004.</li>
    </ul>
  </div>
</div>

This was, I thought, a bit silly. If I was chunking up my content into blocks with a declared header, why not just use a definition list?

<dl class="block">
  <dt>Concise yet pithy header</dt>
  <dd class="block-content">
    <p>My markup brings all the boys to the yard.</p>
    <p>There's another joke I need to stop telling.</p>
  </dd>
  <dd class="block-data">
    <ul>
      <li>Your mom posted this on 04 April 2004.</li>
    </ul>
  </dd>
</dl>

So after griping about semantic markup discussions, I’ve gone <dl>-happy; in my mind, there’s a stronger association between a block’s header and the content that follows it. The drawback to this approach is that definition terms (<dt>) can only contain inline elements — which means no more header elements for my post titles.

This strikes me as stupid, but I guess that’s why I’m not running the W3.

Anyway, I’d be interested to hear if anyone knows how this switch to definition lists, and subsequent lack of headers, will impact the site from an accessibility standpoint.

Work to be done, you ask? Oh, plenty:

Browser issues:

As you’ve probably noticed, paint chip-eating helmet-wearing mouth breathing older Internet Explorer browsers have a little trouble with different parts of the layout. Win/IE 5.x revels in breaking the primary page of any of my photo albums, such as the one from London. As ever, Position Is Everything was an incredible help in getting these pages to a usable state in those browsers, but there’s still a fair amount of work to be done.

One CMS to rule them all:

Moving away from the client side, there’s a fair amount of work to be done on the backend. Now that I’ve gotten the weblog running on Wordpress, I’ve other sections that I’d like to port over as well — my photo albums and sideblog being the first candidates. Currently, they’re both running on legacy code, and non-WP data tables; it’d be great to bring them into the fold at some point.

Right, so — that’s about it. Thus ends the technical navel-gazing for tonight.

Come back tomorrow when I talk about how much I enjoy the newline character. We’ll do our nails, it’ll be fun.

Comments

Hooray, technical difficulties.

There’s a WordPress issue that’s currently preventing old comments from displaying correctly. Sorry for the inconvenience, but hopefully we’ll be back online soon.