Smashing Mobile Web Development

Using HTML5 to Aid in Structure and Design

One of the hardest things to do when developing your web app is to create a good template and structure that you can replicate throughout the pages. You can save time and be more efficient if you use HTML5 boilerplates that enable you to create HTML5 structures and handy JavaScript functions.

Creating a template or boilerplate can help you build faster and effective code. A lot of times, developers skip this step and end up spending a lot of time backtracking to add new features or increase the scope of a project. Doing it right the first time always saves you from headaches in the future.

Using the HTML5 mobile boilerplate

Using a pre-structured HTML5 template will help you easily start developing and keep your structure clean. Paul Irish, who was involved with the jQuery Project, invented the HTML5 boilerplate framework for desktop browsers, and more recently made this very popular boilerplate available for mobile devices. To obtain the kit, follow these steps:

1. Go to http://html5boilerplate.com/mobile and click Download Boilerplate. At the time of writing this book, the current version is 3.0.

2. When you open the zip file, copy the following files as shown in Figure 4-1 to another folder on your computer.

3. Open the project in your favorite software editor, and click the index.html file.

4. Lines 79 through 83 hold the JavaScript code for Google Analytics, which you should remove for this example. If you want to reuse it in ...