Dreamweaver CC: The Missing Manual, 2nd Edition

Chapter 14. Creating Pages for jQuery Mobile Sites

Media queries and Dreamweaver’s fluid grid layouts let you take one website and give it different designs for different devices, but what if you want to create a mobile site from the get-go? Perhaps you want to design a “mobile-only” version of your site, one optimized to look and perform like a native phone application, like the one shown in Figure 14-1? Dreamweaver lets you do just that with its support for jQuery Mobile.

jQuery Mobile is a JavaScript library that helps you build websites tailored to mobile devices. For example, instead of small text links, these mobile sites have big fingersized buttons that your guests can easily tap on phone and tablet touchscreens. With some simple HTML, some fancy CSS, and some complex JavaScript programming, jQuery Mobile lets you quickly create the navigation elements commonly found on smartphones. You can build a mobile website that really feels like a phone application, or you can use HTML, CSS, and jQuery Mobile to actually create a phone application that you can install on Android devices or upload to Apple’s App Store for use on iPads, iPhones, and iPod Touches. Dreamweaver CS5.5 introduced this jQuery tool, and since then, each version of Dreamweaver has added to and refined it.

jQuery Mobile

jQuery Mobile is a “mobile development framework,” which means that it provides the tools you need to build web pages that act more like mobile applications than traditional web pages. A page built ...