HTML5 uses tags and other bits of code that may not be recognized by older browsers. It’s always good as a designer to make sure that you are working in the most recent version of HTML so that your pages aren’t outdated at the outset or don’t become outdated very quickly. However, you do have to be aware that there are people out there that are running older browsers, likely because they have older computers or don’t routinely update their software.
To protect our pages from breaking when being viewed on these older browsers, we can use a bit of JavaScript to help us out. The JavaScript we use for this is referred to as the HTML5 Shiv and can be found on a resoure website called Modernizr. I’ll walk you through the steps for downloading the necessary JavaScript snippet and implementing it on your site.
- Visit Modernizr.com. The homepage should look something like (fig. 1).
- From the top menu, click Download. (fig. 2)
-
From the left menu, select HTML5 Shiv, minify, and Add CSS classes. (fig. 3)
-
Click Build from the top right. (fig. 4)
-
From the pop up message, select the first Download Option. (fig. 5)
-
Locate the download. (fig. 6)
-
Open the file in your Code Editor (I’m using TextMate). (fig. 7)
-
File > Save As into your js folder. If you don’t have a js folder, you can simply create one. It’s a sub-folder just like images or css and is used to organize any JavaScript files that are included in your site. (fig. 8)
-
Locate your HTML file.
-
We need to add a set of <script></script> tags to our <head></head> section in order to tell our browser to include our newly saved JavaScript file when loading our page. Our opening script tag has an href attribute pointing to the file in our js folder, so our code looks like this: <script src=”js/modernizr-custom.min.js></script>. We use the exact name of the file that lives in the folder.
The head section of your HTML file should now look something like this:
<head>
<title>HTML5 Shiv</title>
<link href=”css/style.css” rel=”stylesheet”>
<script src=”js/modernizr-custom.min.js></script>
</head>
Make sure you Save your HTML file and Refresh your browser.
That’s it!
You likely won’t see any changes to your site because I’m betting you have a new enough browser, but now people who don’t will be able to view your site as you intended it (or very close to it).
It’s a good idea to include the HTML5 Shiv with any website you make. It is one of the few ways we have to ensure that everyone will have an optimal or close to optimal experience on your site.
Web Design for Graphic Designers
A Step-by-Step Guide for creating a modern, responsive website from scratch
Co-authored by Jillian Noble and Ryan Krug
Published by EMSPACE
You’re the best. I’ve been developing for years, but have managed to avoid Modernizr so far out of pure disregard for those on older browsers… Obviously an unsustainable practice when working with corporate clients. Thanks for the step-by-step — I needed a little reassurance that it was indeed as simple as adding a script and I wasn’t missing anything!
You’re welcome! So glad it came in handy!