Smashing Mobile Web Development

Mocking Up Your Pages

An important part of the design process is mocking up what the pages will actually look like and how they will function. This process can help you understand which features you need and which features don’t make sense. During the course of development, an idea may seem like it can work with your product, but producing mockups can demonstrate that it doesn’t fit with your theme. Mocking up your pages can help you develop your app faster and avoid the temptation to put things in that don’t fit.

Because you have the basic structure in place, you need to plan the pages that you will be creating to support your application. As discussed at the start of this chapter, Corks has are the following goals:

• Record and save the wines you have in your cellar (using SQL-Lite, local storage)

• Query a wine locator (using geolocation)

• Use social APIs (using AJAX, JSON)

• Create web app settings (local storage)

• Enable searching for and adding wines

Each Page involves a different aspect of HTML5. Because you will be using HTML5 SQL-Lite, you keep all the data for the user in the browser. This will be retained unless the user removes all the data from his or her browser. In the following sections, I discuss each page and introduce a mockup for visual learners.

Settings/About

On the settings page, you give your users the capability to clear the database in case they want to start over and erase their data. This feature will request that users confirm the changes and then ...