Webistrate - Draw Your Own Conclusions

HTML5: Creating an HTML5 Website and degrading for older browsers

Posted by Jamie Munro | September 12, 2011 | Tags:

Share

If you haven’t done so already, it’s time to start thinking about upgrading your existing website or creating a new website with HTML5HTML5 contains a lot of new features and new tags that help simplify the HTML required to create nice website designs.

Currently all of the major browsers and their latest versions all support the core new tags (header, footer, section, etc…).  However, the older browsers Internet Explorer 7 and 8 for example, do not support these.  In this article, I will show you how to create a new site with HTML5 while ensuring that it still looks good in older browsers.  It won’t be perfect, but it will be pretty darn close to it.

Assumptions

  • You have some knowledge of HTML and understand “table-less” design

The key focus of this article will be on the new HTML5 tags and how they will make your HTML much cleaner.  As I mentioned above some of the core tags are header, nav, footer, section, aside, article, and more.

In my latest adventure this was really important to me.  I have a bit of an obsession when it comes to clean code.  I can’t stand the number of div tags required to create the standard two-column layout.  However, it is still far better than the old way with tables.

So, for this website, my design goals were as follows:

  • Title/Logo accompanied by a search box on the far right
  • Horizontal menu underneath the title/logo
  • Sub horizontal menu under the main menu
  • The main content, left panel containing the core content and a small right panel for some ads and other “call-out” boxes

Traditional HTML would look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Title</title>
</head>

<body>
<div id="container">
<div id="header">
<h1>My Title</h1>
</div>

<div id="menu">
<ul>
<li>Home</li>
<li>Etc...</li>
</ul>
</div>
<div id="content">
<div id="left-content">
Main content goes here
</div>
<div id="right-content">
Ads and stuff here
</div>
</div>

<div id="footer">
Copyright you
</div>
</div>
</body>
</html>

Now of course this doesn’t look too bad as it is still quite clean.  Now here is the exact same layout with the new HTML5 syntax:

<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>

<body>
<div id="page">
<header>
<h1>My Title</h1>
<nav>
<ul>
<li>Home</li>
<li>Etc...</li>
</ul>
</nav>
</header>

<div id="content">
<article>
</article>

<aside>
</aside>
</div>

<footer>

</footer>

</div>
</body>
</html>

Do you see the differences?  They are pretty subtle. Firstly, the doctype is different and significantly shorter.  Why is this important?  How many times have you had to Google or copy and paste a doctype from another file?  More than once I’m sure as I know I have, but I can now remember this one!

Next, I have reduced the number of div tags slightly, but I’ve also reduced the amount of typing I have to do as well.  It’s far easier to type <header> versus <div id=”header”>.  Not only that it’s simpler in my CSS as well, header {} versus div#header {}.  This might not seem like a lot to you, but I find that the more time I need to press the Shift key when I am writing code, the slower I go.  So in the first example above I only have to press it twice instead of four times – 50% savings with each tag I write.  Finally, file size comes into play as well.  Less HTML, less CSS means less downloading and bandwidth.  On an average page this might only mean a few KB, but if your website gets a significant amount of traffic every KB counts!

Now to finish this off, how do I make this work in older browsers?  Internet Explorer 7 and 8 most definitely do not render this properly.  And yes, it’s quite unfortunate, but there are still many users who have not upgraded their browser yet.

The answer is simple: Modernizr.  One simple Javascript file and the problems are solved.  Modernizr will convert unsupported tags and code and convert them to the appropriate tags of the client’s web browser.

Download the Modernizr file now and update the above code example to include this line within the head tag:

<script src="modernizr.js" type="text/javascript"></script>

When you reload your webpage in an older browser, it should be about 95% perfect.  Depending on how you’ve implemented your CSS, you may need to do a couple of tweaks to resolve this issue to ensure Modernizr degrades gracefully.

Or if you are taking advantage of other HTML5 or CSS3 features, Modernizr also supports custom detection to provide full control over adding custom detection on specific pieces of your code.

Summary

By following best practices with the new HTML5 and CSS3 features, you can create a new slick design and use Modernizr to automatically degrade your design for people with older web browsers.  You can even present them alternative content or warnings to upgrade.

Share


Related Posts

Leave a Reply

You must be logged in to post a comment.

Buy one of my books