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 first screen since it's all we need to teach the skills.
Here's what we need to think about:
Buttons: There are several ways we could accomplish these. At first glance, we might think about using standard
data-role="button"
links. We could leverage aui-grid
(http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html) to add the formatting. If we were only intending to optimize for phones held vertically, that 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: Those are not standard jQuery Mobile icons. There are countless icon sets online that we could use but let's go with Glyp hish (http://glyphish.com/). They...