oombrella is naked

Today, April 5th is CSS Naked Day. That means that the site you’re seeing today has been stripped of all css, rendering the site in all its non-styled glory. Why do this?

The main reason is to draw attention to the the underlying markup of a page, and to demonstrate how people with screenreaders might be seeing the site. In particular, it calls to attention the structure of the xhtml and the benefits of using semantic markup.

What’s Wrong
It’s been since dev that I have really looked at my site unstyled. I’m fairly pleased with how it renders but I’ve noticed a few problems that I want to mention.

1. Heading Images: I’ve used inline images to identify content areas such as “About Me” and “Design Portfolio”. As a designer, I wanted better control of the typeface in these areas. These would be better served using sIFR, but I didn’t want to hassle with the placing the extra javascript and flash into the page. Plus, I didn’t want to test for that in multiple browsers, so I took the easy way out. Unfortunately, is looks terrible when the page is non-styled and, of course, it’s less than accessible.
2. Structure: On the main page, the blog posts falls beneath the design portfolio. I would prefer this to appear first in the structure. The most “interesting” content on the site–as defined by google analytics–is the blog section. I think it would be better served by placing it before the portfolio.
3. Layout: I am a heavy, heavy user of floats. Sometimes these don’t degrade so nicely. For example, on the main page, the image “design portfolio” displays inline with the “see all >” navigation button. Looks bad, but not life-threatening. There are some other rendering issues, such as the duplicate “see all >” links that appear beneath the portfolio. I’ve definitely leaned heavily on the presentational css to distinguish content areas. I also committed a no-no by not using a semantic structure for my breadcrumb navigation. Shame on me.
4. Functionality: As I alluded to in the previous bullet, my presentational css was used to collect similar content and navigation together. This disintegrates a bit and it can be a challenge to know what a particular link does.

What’s Right
Overall, I think the presentation degrades decently. I don’t have any problem reading or navigating the site. But I’d really like to hear your opinions. So far, the good points that I see are:

1. Structure: Each section seems to clearly defined and the navigation remains intact. The site isn’t terribly content-dense or complex, which helps this a bit.
2. Functionality: The primary and secondary navigation fall into place at the top and are immediately presented to the visitor. This goes for the page header too. These two things help describe the page and provide an obvious means to move around the site.

There are probably a number of other things that are positive and negative about my design. Please voice your opinions because, well, my time is up and I have to go to work.

2 Responses to “oombrella is naked”

• Gino said:
  April 27th, 2007 at 3:42 pm

  Degrading gracefully is hard work. I’ve found solace in thinking that this is really going back all the way to the early days when people had flame wars about how tabular layouts destroyed the semantic nature of the markup, but didn’t have any way to accommodate the increasingly graphic and media centric evolution of the web. They were just too much in the box.

  I find floats are tricky sometimes, but unavoidable: it was the same pain as figuring out how how tables worked back in ‘96. Good markup is always valued. I cringe when I see div/spanitis from people who are supposed to be markup deities, but, will eventually take the design hammer and tongs to my site, long overdue.

• Daniel Hardy said:
  July 21st, 2007 at 12:41 am

  I know this post is really old but I do have a method for those tricky headings you might be interested in.

  First it should be noted that I do not claim to be an expert in HTML or design. I am strictly an amateur who stumbled upon this idea a while back so take it as such.

  The one trick I found that seems to degrade well and allows search engines to utilize the tag is to create a headline style with a background and dimensions of your desired image. Then simply use z-index and negative alignment to move the text off the page.

  Example:
  h1.logo{
  background:transparent url(’path/to/your/image.png’) no-repeat;
  width:100px;
  height:20px;
  text-align:-9000px;/*If they have this high of resolution then you have bigger problems */
  z-index:2;/*Above previous level is the important part - This might not be needed*/
  }

  For a reference sample you may look at the logo of my website as this is how I placed it. In fact this method allows you to create a more meaningful (read long) headline for SEO purposes. It also comes out very nice in a screen reader or CSS-less(word?) page.

  The major downfall to this method is if you need the image to be a link. Strict validation does not permit wrapping block level elements in a link tag. In my case it wasn’t going to be a problem as I don’t get much traffic and the level of content on the page doesn’t require jumping back to home.

  Anyways I hope this is of use and I enjoyed your site.

  Cheers!

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website