Creating The  Prototype in Mobile Web Development

Creating The Prototype in Mobile Web Development


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 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:

  1. Go to 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.htmlfile.
  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 the future, just change the UA-XXXX-X to your correct site from Google.

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.

Creating The  Prototype in Mobile Web Development

Figure 4-1: Zipped contents in the folder view

Creating The  Prototype in Mobile Web Development1

Figure 4-2: The index.html page to use for layout

Application design

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.

Creating The  Prototype in Mobile Web Development2Figure 4-3: Navigation elements always remain at the top of
the screen.

Written by imkits