• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Elbongurk - Graphic Design, Branding, & Marketing || Stevens Point, WI

Stevens Point Design & Branding Services

  • Work
  • About
  • Contact
  • Blog

Using Modernizr to Implement the HTML5 Shiv

February 23, 2016 by Elbongurk 2 Comments

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.

  1. Visit Modernizr.com. The homepage should look something like (fig. 1).

  1. From the top menu, click Download. (fig. 2)
  2. From the left menu, select HTML5 Shiv, minify, and Add CSS classes. (fig. 3)

  3. Click Build from the top right. (fig. 4)

  4. From the pop up message, select the first Download Option.  (fig. 5)

  5. Locate the download. (fig. 6)

  6. Open the file in your Code Editor (I’m using TextMate). (fig. 7)

  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)

  8. Locate your HTML file.

  9. 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

Read Online for Free

Filed Under: Example, Nerd, Tutorial Tagged With: code, Dreamweaver, Javascript, learn, tutorial, web design

About Elbongurk

We’re a tiny design firm located in Stevens Point, Wisconsin. Our focus is creating memorable brands, industrious illustration work, and, of course, polished print projects.

Emails Newsletter

Receive updates and hear what's recently been going on!

No charge. Unsubscribe anytime.

Reader Interactions

Comments

  1. Kaitlyn says

    January 19, 2017 at 1:45 pm

    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!

    Reply
    • Jillian Noble says

      January 20, 2017 at 7:37 am

      You’re welcome! So glad it came in handy!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Email Newsletter

Sign up to receive updates and to hear what's recently been going on!

Let’s Connect

  • Email
  • Facebook
  • Twitter

Recent Posts

Converting Sass to CSS

Creating a Simple, Responsive Rotating Banner

Using Modernizr to Implement the HTML5 Shiv

Using Inspect Element in Safari

Footer

Our Location

We’re a tiny design firm located in Stevens Point, Wisconsin.

3116 Vine Street
Stevens Point, WI 54481

715.966.0379

Start a Project

Interested in working with us? The best way to get in touch is to fill out our contact form.

You could also shoot us an email at hello@elbongurk.com

Let’s Connect

  • Email
  • Facebook
  • Twitter

© 2023 Elbongurk, LLC, a company born of ♥