We have a viable boilerplate. We have a customer. Let's get to work and code what we drew in Chapter 1, Prototyping jQuery Mobile. For this chapter, we'll stick to just the home screen to learn the core concepts:
Here's what we need to think about:
Logo: We'll simply include the logo from the desktop view.
Buttons: There are several ways we could accomplish this. At first glance, we might think about using standard
data-role="button"links. We could leverage a ui-grid (http://demos.jquerymobile.com/1.4.5/grids/) to add the formatting. If we were only intending to optimize for phones held vertically, this would be a great approach. However, we're going to think outside the box here and create a responsive menu that will react well at different resolutions.Icons: These are not standard jQuery Mobile icons. There are countless icon sets online that we could use, but let's go with Glyphish (http://glyphish.com/). They make high quality icons that include multiple...