Skip to main content Skip to main navigation Skip to search Skip to footer
Type to Search Subscribe View Tags

Building Cross Browser Application Using HTML5 Boilerplate

Building Cross Browser Application Using HTML5 Boilerplate
Ajaya Kumar Maharana - Senior Developer | April 2, 2014
594 Views

As we all are aware that the year 2013 was called as the responsive year since users do not have to use multiple screens to view Websites. But a major drawback to develop a responsive Website is the lack of support on all browsers especially Internet Explorer 7.0 and 8.0 versions. Fortunately HTML5 boilerplate has saved the day for all the User Interface developers.

As a matter of fact, HTML5 Boilerplate is “not a framework”, but it is a template that can be modified and used for your own projects. You can use as much or as little as you want to and make your own additions and subtractions of code like CSS and JS. But we will have to make sure that, our code is added in appropriate place mentioned in the template. For example if we want to add our own CSS then we have to add it in the space mentioned with comments in the main.css file, else our CSS will override the template CSS. To setup a solid HTML5 base for your project, this is recommended starting point.

Scope

  • Cross browser normalization- HTML5 Boilerplate includes Normalize CSS for cross browser normalization.
  • Progressive enhancement and graceful degradation- The purpose of this template is to establish a base-level of user experience for most browsers and to support older browsers.
  • Performance optimization- This Template helps to increase Web site performance.

Critical Success Factors of HTML5 Boilerplate

  • Cross-browser compatible (Chrome, Firefox, IE6+, Opera, Safari)- This template helps us to make a Web page compatible with all major browsers including IE7.
  • Useful CSS helpers- This template has some in-built CSS helpers like Image replacement classes.
  • An optimized Google Analytics snippet- This template lets you customize the Google Analytics snippet.
  • The latest jQuery via CDN, with a local fallback- This template uses jQuery via CDN to increase speed of the Web Pages.
  • The latest Modernizr build for feature detection- This template uses latest Modernizer which makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not.
  • Includes Normalize.css for CSS normalizations and common bug fixes.
  • Build script- This template uses Ant Build script for optimization of code. This Script is a tool that optimizes your code for production use on the Web. It is designed to work with HTML5 Boilerplate with minimal configuration, but it serves as a rich source of Ant tasks, which can be used as the basis for your own custom build scripts.

Architecture

A basic HTML5 Boilerplate structure initially looks:

├── css
│   ├── main.css
│   └── normalize.css
├── doc
├── img
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
├── .htaccess
├── 404.html
├── apple-touch-icon-precomposed.png
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
└── favicon.ico

Features

The features of HTML 5 Boiler Plate are as follows:

  • Conditional body tag for IE and Firefox lower version
  • jQuery loading fallback
  • Optimized Images
  • Font Normalization
  • HTML Compression
  • CSS/JS Minification
  • Placeholder CSS Media Queries.
  • Default print CSS, performance optimized.
  • Designed with progressive enhancement in mind.
  • Build script

Brief description of some of the features as mentioned above

  • Cross browser compatible
    If we look at below Web page, I have used HTML5 elements, such as nav, aside, and sections and I tried to execute this page in Internet Explorer 7.0 and 8.0 versions. As we know that Internet Explorer 7.0 and 8.0 does not support most of the HTML5 elements so it renders normal HTML without styling. In second screenshot I have used HTML5 boilerplate to build this page and the output displayed with all the expected styles.

Screenshot-1: (Without HTML5 Boilerplate)

Cross browser compatible - Without HTML5 Boilerplate

Screenshot-2: (With HTML5 Boilerplate)

Cross browser compatible - With HTML5 Boilerplate

  • Conditional body tag for IE: Here if we can see below index.html, conditional statement for IE is already available.
    HCL: Doc Type of HTML5
  • Useful CSS Helpers: Here if we can see main.css, there is a class called .If what we may require for Image replacement with text.
    Image replacement with text
  • Print Styles: This helps to print text from browsers in compress format.
    Print Styles: This helps to print text from browsers in compress format.
  • Build Script (The original HTML5 Boilerplate build script is Ant Build)
    • Ant build script Combines and minifies JavaScript (via Closure Compiler), Combines and minifies CSS (using YUI Compressor), Optimizes JPGs and PNGs (with jpegtran, advpng & optipng),

Usage

Once you have cloned or downloaded HTML5 Boilerplate, creating a Website or app involves the following steps:

  • Set up the basic structure of the Web site.
  • Add some content, style, and functionality.
  • Run your Web site locally to see how it looks.
  • Optionally you can run a build script to automate the optimization of your site – For Example  ant build script
  • Deploy your Web site.

Software to be Used

The following software can be used:

  • Text Editor (Notepad, Notepad ++ etc)
  • Code Inspector (Firebug, IE Developer Tool)
  • Java JRE
  • Apache Winant (to run Ant script)

Conclusion

The HTML5 Boilerplate feature is an excellent resource for kick-starting any new project that requires cross browser functionality. There are many devices in the market now and it can be extremely difficult for you to understand from where to start. This feature gives you all of the skeleton code that you will need for mobile, tablet and desktop. HCL's web application services are tailored to each client and the needs of their industry and sector. HCL operates as a single global organization, leveraging proven industry and solution best practices from our offices and delivery centers around the world.

References

Here are some interesting forums about HTML 5 boilerplates

More from Ajaya Kumar Maharana

Contact Us
MAX CHARACTERS: 10,000

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

Sign in to Add this article to your Reading List
Register