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
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 head-aches in the future.
Using the HTML5 mobile boilerrlate
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:
- Go to http://html5boilerplate.com/mobileand click Download Boilerplate. At the time of writing this book, the current version is 3.0.
- When you open the zip file, copy the following files as shown in Figure 4-1 to another folder on your computer.
- Open the project in your favorite software editor, and click the index.htmlfile.
That’s it! Now that you have your structure set up, you code everything in a single HTML file. You just create new HTML sections to represent pages. To provide back button support, you use a method called onHashChangeto change active status of each <div>,which is discussed later in the chapter. All section content is placed within the parent <div id=”container”>area of the script, as shown in Figure 4-2.
Figure 4-1: Zipped contents in the folder view
Figure 4-2: The index.html page to use for layout
As discussed in Chapter 1, whether you design a native application or a web application depends on the type of device on which users will view your app. Since the example app is made for mobile only, you use the one-code base methodology to deploy this code to all platforms. This app uses static top navigation and provides the content underneath. As you scroll, the navigation becomes fixed and always remains at the top of the screen. (See Figure 4-3.)
Keeping the top bar fixed enables users to scroll down the page and change to another page without having to scroll back to the top of the page. Additionally, the fixed bar doesn’t affect Android menus or back buttons since the main navigation bar is at the top of the page. This is standard design pattern for modern web apps, including Twitter, Facebook, and Untappd.
Figure 4-3: Navigation elements always remain at the top of