Our latest project and the first of 2010 was a redesign of a site I did several years ago for my friend and client, Johnny Knight. Johnny is a talented Los Angeles based DJ and artist.
From Joomla! and XHTML to WordPress and HTML5
When I redesigned the site several years ago I switched to Joomla! because of the “module” positions and the non-blog way that content is organized. But Joomla! is complicated to learn for most clients and it can be a pain to work with. Since that redesign, WordPress has really become much more than a blog engine, it’s become more of a versatile CMS, so I switched the site back. Switching is easy to do when there isn’t a lot of content. The site was pretty much a place to showcase Johnny’s remixes and announce event dates. Back then XHTML and CSS2 was the way to go so that’s what I used.
Why HTML5 and CSS3?
Given the ability to play and use more cutting edge code, we decided to fully go with HTML5 and CSS3. HTML5 is the way of the future but it’s still young and new and not yet fully supported by the current Internet Explorer, but there’s a way around that. We’ve been using the HML5 doctype and CSS3 styles and effects for months, but that’s where our adoption stopped. With Johnny’s site though we decided to take a chance and go all the way with the structural markup.
The advantages of HTML5 are numerous, but for a blog the big advantage is the structure that HTML5 element tags like header, article, section, nav and footer bring to the document. No longer do you need to mark up a page with this familiar code:
<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>
<div class="header">
<h1>Shasta's Cookie Cart</h1>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="post">
<h2>Post Title</h2>
<p class="date">Post Date</p>
<p>Post copy in here.</p>
</div>
<div class="post">
<h2>Post 2 Title</h2>
<p class="date">Post 2 Date</p>
<p>Post 2 copy in here.</p>
</div>
</div>
<div class="footer">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
© 2010 Shasta's Cookie Cart
</div>
</div>
</body>
</html>
Now HTML5 brings logical, semantic markup that not only makes sense to the geeks but to search engines, screen readers and other not so geeky folks. Without being too geeky the above code would turn into:
<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>
<header>
<h1>Shasta's Cookie Cart</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Post Title</h2>
<p class="date">Post Date</p>
</header>
<p>Post copy in here.</p>
</article>
<article>
<header>
<h2>Post 2 Title</h2>
<p class="date">Post 2 Date</p>
</header>
<p>Post 2 copy in here.</p>
</article>
</section>
<footer>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
© 2010 Shasta's Cookie Cart
</nav>
</footer>
</body>
</html>
Once the HTML5 code was in place we styled the site with some CSS3 markup. We’ve been using CSS3 markup for awhile now to do cool things like rounded corners, drop-shadows and reflections, so that wasn’t as new for us as using HTML5 markup for the site. Unfortunately Internet Explorer doesn’t currently support CSS3, we’ll just have to wait for version 9 for full support. However, Safari, Mobile Safari, Firefox, Chrome, and Opera do, so why not use it? It won’t look bad to IE users, just…plain. Though IE9 promises more support.
Summation
So to sum it all up, HTML5 and CSS3 are great, new, shiny, and make a designers day. We’re beginning to use both in our day to day work for clients as we can.
Johnny Knight is open to cutting edge stuff, a great DJ, and can also be found on Twitter @djjohnnyknight.
Internet Explorer users won’t see all the shiny HTML5 and CSS3 coolness just yet, but they’ll still see your content and be able to navigate the site just fine. Ultimately it’s up to our clients when it comes to things like CSS3, most are cool with it and don’t mind that some can’t see the coolness. It’s kind of like wearing a pair of KangaROOS®, some people don’t see the cool factor. But, those that do, appreciate the statement of fashion and the sweet hidden pocket.
