For those who don’t know, “CSS Naked Day” is once a year, where design-related bloggers remove their CSS files for the 24 hour period starting April 9th.

I got a little frustrated yesterday, having to redesign tabs for work while looking for resources on a good two-layer tabbed navigation, many of the sites that usually have good examples were “Naked” yesterday.

At this moment I realized “CSS Naked Day” went against good usability practices that state your site should be accessible and usable. Looking for sites that normally would have been great resources for HTML and CSS became rather impossible to see the examples.

I decided not to remove my CSS files I wouldn’t have had an alternative of allowing CSS to be enabled. Wordpress has a CSS Naked Day plugin — I suggest that perhaps an alternative link at the top of the page that says “Enable CSS” would suffice with a brief explanation of why the original design is missing in the first place.

In response to CSS-Trick’s post “Rethinking CSS Image Replacement”, I have to respectfully disagree with wrapping your logo in an H1 element.

H1 should be used to describe the page below it, using it on every page to wrap a logo isn’t giving you any benefit for accessibility or SEO. Its a waste of a perfectly good (and important) semantic tag.

I recommend keeping things simple, and using the tag names as they were intended to be used:

<div id="head">
    <img src="/images/logo.png" alt="FooBar Logo" />
    <!-- tabbed navigation or banner advertisement may go here -->
</div>

Using the #head rule, I can position the image and any children elements, or apply a background gradient to the entire div. Its easier to style any navigation lists or banner advertisements as well with a common parent ID “#head” using the element names as sub-selectors.

<h1>Topic of the Page</h1>

<p>Intro paragraph about The Topic</p>

This is the original (and still relevant) intended usage of an H[1-5] heading element.

CSS-Tricks.com is a great web design blog by Chris Coyier — I highly recommend reading it for web designers.

While looking into the proper syntax for telephone numbers as links in microformats, I found a good discussion from 2005.

There’s a great discussion of telephone microformats and using the tel: protocol in an anchor tag.

Some simple examples might be:

<div class="agent vcard">
  <a class="email fn" href="mailto:jfriday at example.com">Joe Friday</a>
  <a class="tel"      href="tel:+1-919-555-7878</a>
  <div class="title">Area Administrator, Assistant</div>
</div>

Notice the use of the “tel:” in the href attribute. The only drawback I’ve found is that I get a lot of 404 errors in my stats because most clients do not have a telephone application associated with the “tel” link. This can be rather bothersome and result in this:

29	/experience/tel:1+408-656-2473
29	/quote/tel:1+408-656-2473
28	/advertising/tel:1+408-656-2473
28	/terms/tel:+1-408-656-2473

I haven’t decided yet if it is worth seeing these in my stats infavor of allowing skype, or other telephony VOIP apps to link through.