Out With the Old, in With the New
After much debate, I’ve decided to start my design over with HTML5. Seeing as how most of the template isn’t finalized yet, it seemed like a great time, as opposed to trying to do it later. So why embrace a technology that’s years away from being “finished?” I believe it’s best to learn HTML5/CSS3 now, and adapt to future changes, than to get left behind and play catch up. My current setup isn’t 100% degradable, but there’s only so much catering to outdated technology I’m willing to do.
Implementation
Currently I’m using HTML5 Shiv, which basically forces IE to recognize tags it doesn’t.. recognize. IE has a habit of throwing away the end tags to elements it doesn’t know. All you have to do then is toss some CSS onto the HTML5 elements to render them as block-level elements, and you’re golden. However, as stated previously, this means that with JS turned off on a less than modern browser, things are going to get messy.
I’m sure my implementation of the HTML5 elements is a bit sub-par, only using the most basic tags and microformats; however I need to start somewhere, right? I’m having a few issues trying to learn the filter system of Wordpress, because it seems to like wrapping some of the block level HTML5 in paragraph tags (such as Figure). Currently I’m just happy the pages validate.
CSS3 too?
I’m using very basic levels of CSS3. Currently each browser supports different selectors in very different ways. The only “new” property I make use of is text-shadow, which was technically added in CSS2, but only seems to be widely usable as of late. To make up for it, I use the new RGBA styles to blend the shadows into the background. My shadow for paragraph text looks like this:
text-shadow: rgba(170, 155, 130, 0.5) 1px 1px 3px;
Are the forums up yet?
Well, no. I’m having some issues converting them over to HTML5 simply due to the numerous levels of templates SMF has. In addition, I’d rather focus my attention elsewhere until traffic picks up. As you can see there’s an empty sidebar over there that I still have yet to finalize the design for, and that has a bit more priority than a large feature 4 people will use.
So now what?
My immediate task (besides aforementioned sidebar) is to finish up the Wordpress issues, I haven’t touched the search or archive templates since I first started conversion, and they’re a mess. I also need to fix up my twitter implementation, I’m actually pretty happy with it. For anyone that’ interested you can take a look over at Smashing Magazine’s HTML5 tutorial: Coding A HTML 5 Layout From Scratch.
Brandon Diaz is the creator of The Corrupted Canvas. He's a web designer with a pretty severe caffeine addiction. He's avid about many things including web standards, web development, various teas, and game design. If you'd like to get in touch you can find him on Twitter.
