Newer technologies are bound to come up frequently and in order to cope up with these technologies, versions etc. one need to have a grasp on the know-how, useful links if any to delve deeper into the subject. This blog intends to unveil the various advantages of HTML5 as against older browsers.
HTML5Shiv:
HTML5Shiv is the JavaScript library that deals with how html5 web displays older versions of IE like IE8, IE7, and IE6.
The latest version of html5shiv is easily available on http://code.google.com/p/html5shiv/
You can call it in html by just adding a few lines mentioned below in the HTML <head> </head> section.
<!--[if lt IE 8]>
<script src="html5shiv.js"></script>
<![endif]-->
Modernizr:
Modernizr is also a great JavaScript Library to deal with older browsers & enable support of HTML5 like HTML5Shiv. The only difference is 'HTML5Shiv' works for IE backward compatibility, whereas ‘Modernizer’ works for all major browsers. Modernizer also has ‘HTML5Shiv’ scripts in it.
You will get the latest version of ‘Modernizr’ from http://modernizr.com/
TOOLS & RESOURCES FOR RESPONSIVE DESIGN:
Tons of helping resources are available for Responsive Designs; however a few popular ones are as below-
CMS like Wordpress, Drupal , Joomla –
Now a days many free & low budget Responsive CMS templates are available that are ready to use. You can customize & use it as you require. They help save a lot of time for developers, but with a few limitations for customization. I usually prefer Drupal which gives me more flexibility for customization.
Using Boilerplate –
Boilerplate is a very handy tool to setup initial page structure. It is the HTML 5 template having that has built in Icon sets, Media query & JavaScript. Boilerplate has included ‘Modernizr’ JavaScript & ‘Normalize.css’ for legacy browser’s HTML5 support.
You can download Boilerplate from http://html5boilerplate.com/
Twitter-bootstrap –
Just like Boilerplate, Bootstrap provides initial template for developing a Responsive Website. You will find elegantly designed Bootstrap collections of assets like Navigation, tabs, drop down menus etc. for ease in development.
You can download bootstrap latest version from http://twitter.github.com/bootstrap/
Semantic Grid System –
The Semantic Grid System is also a good resource to start with. You can use this resource to design fixed layout, fluid layout & responsive layout. It uses the dynamic style sheet language ‘Less ‘and also SCSS (the extension of CSS3).
You will find more details & latest version on- http://semantic.gs/
Golden Grid System –
Golden Grid System is another method to develop Grid Layout. You can use it as a good starting point for a new responsive design.
You will get more info on http://goldengridsystem.com/
320 and Up –
‘320 & Up’ uses HTML5 Boilerplate with media query & Modernizr for Legacy browsers. Creator ‘Andy Clarke’ and ‘Jina Bolton’ developed new ‘320 & Up’ from root by considering ‘Design first for mobile’. So it’s highly recommended that one uses the latest version of 320 & up.
You will get latest updates on http://stuffandnonsense.co.uk/projects/320andup/
Less Framework-
‘Less Framework’ is also a CSS grid system for designing adaptive websites. It uses 'Media Query' for giving conditions to control how HTML will render in different devices. It also provides inbuilt collection of assets for developer.
You will get more info of Less Framework on http://lessframework.com/#how