JavaScript polyfill for HTML5 and CSS3 (aka shim or shiv)

Modern Responsive and Responsible Design using HTML5, CSS3 and JavaScript

Web developers are commissioned to build websites for modern browsers today for every type of computer, including phones and tablets.  This is an exciting time to jump on board with a variety of developer tools and learn how to design for the future.  The problems arise when a designer looks at  the website with older Internet Explorer browsers including IE8, IE7 and especially, IE6 because  of the way they respond (or actually do not respond) to HTML5 and CSS3.  It is very important for web designers and developers to understand the problems and to figure out how to work around these issues.  We all want to build for the future, but lets not forget about the viewers who haven’t received the message about the rich internet experiences they can get from Chrome, Safari, Firefox, IE9, etc.

It is easy to forget when you have upgraded equipment and use Windows 7 and several Apple products used for development.

Of course IE9 is the default browser for Windows7 (which you have to purchase), but it also gives developers the ability to view websites in IE8, IE7 and IE6 by using the development tools found in the F12 console.  If you use Dreamweaver CS5.5 or CS6, you can also view your designs in the IE browsers as well as a variety of phones, tablets, Chrome, Safari, etc. by using the Adobe Browserlab developer tools console.

The PhoneGap framework allows developers to build apps and convert the web files into code that runs as a native app on the mobile operating system of your choice.  Dreamweaver comes with the PhoneGap kit and makes packaging apps and testing them simple.  You can compile and test Android, iPhone and iPad apps!

Mobile device development has challenges and opportunities.  Progressive enhancement using CSS3 and HTML5 allow leading designers to build a rich website for tomorrow’s browsers and devices while making sure the older browsers are rendering presentable and enjoyable pages.    It is not enough that a website designer can use Dreamweaver (or any CMS for that matter) to design websites but never look at the code.  The magic is in the code.  The days of copying and pasting are over if you expect to build unique, customized websites.  You have to know what issues surround the different browsers and fix problems as they arise.

 There are two JavaScript codes that have been crafted to help developers work around the Internet Explorer problems.  

1.  A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).  Here is the link:  https://github.com/scottjehl/Respond.  It works like a charm.

  • Copyright 2011: Scott Jehl, scottjehl.com
  • Dual licensed under the MIT or GPL Version 2 licenses.

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

If you’re unfamiliar with the concepts surrounding Responsive Web Design, you can read up here and also here.

Demo page (the colors change to show media queries working)

2.  A frequently used common method is to use the shiv:
<!–[if lt IE 9]> <script src=”html5shiv.js”></script> <![endif]–>
To use this script, download the html5shiv and roll it in to your own code (ideally minified).

Full original, uncompressed source available here: https://github.com/aFarkas/html5shiv

This source code adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section.

Getting it to work in the browser was easy, @jon_neal and afarkas made IE actually print HTML5 elements – these guys are to take all the credit. Please take a moment to thank them!

Whichever one you use must be included  in the <head> of your file but doesn’t matter if it appears before or after the CSS – but for the sake of performance, it would make better sense to include the CSS first then this script.  Of course, you have to upload the file with your website, or refer the code to an outside source.

shiv or shim?

Common question: what’s the difference between the html5shim and the html5shivAnswer: nothing, one has an m and one has a v – that’s it.  It’s all just polyfill.

Advertisements

What is Responsive Web Design?

Modern web design has gone to a whole new level and thank goodness the look is all about simplicity. Designing a simple looking fluid website is not easy, but web developers have to catch this wave because it is now the future.  Gone are the days of the static websites that try hard to look to same in every browser.  They should look different in differing devices!

Why not have your site look great on a phone?  It doesn’t have to be too tiny to read.  Additionally, as more and more people use tablets – this is yet another easy-to-design-for device.  Keep the navigation down on these devices – this is a tested and a proven usability issue.  No one want to flail around navigation.  Keeping it simple has never looked so good.

Think in terms of a page layout built for tomorrow.  That is what a modern website developer does.  The developer creates a website that is optimized for each platform, both in navigation, readability and load time, a.k.a., the user experience.  The modern website is appealing because of how it functions and how simple it looks.  Simplicity is where it’s at right now because we are bombarded with information and keeping it simple is like a little zen for your site.

If you respect the process for progressive enhancement,  reach for building websites that offer a great user experience by ensuring websites have been built that can be responsive and scale to all various devices.  Your website should be built on a solid foundation of the newest, cleanest code which will ensure people can view your site in other languages and people with disabilities will be able to make any adjustments available to them, such as speech recognition and the ability to have websites read to them.  Technology has really come a long way for anyone who has a visual impairment, can’t type, or several other disabilities that are being overcome due to the latest code and technology.

Modern websites should be viewed in modern browsers for the best experience. Everyone should keep their browsers updated – it’s free and makes all the difference in the internet world.  Unfortunately, you have to buy Windows 7 which offers up the latest Internet Explorer, but it’s worth it.  If you can’t get that right now, Chrome, Firefox and many modern browsers are free and have great tools.  I recommend avoiding Internet Explorer 8 and below.  It’s just not that great of an experience and you don’t have to suffer! You just don’t!

Here’s looking to the future.  What’s next?