Home / Articles / Adobe Dreamweaver / Customizing Mobile Pages with jQuery Mobile in Dreamweaver CS5.5

Customizing Mobile Pages with jQuery Mobile in Dreamweaver CS5.5

Article Description

New starter pages in Dreamweaver CS5.5 serve as templates for building mobile-friendly pages with jQuery Mobile animation and interactivity. Or you can use jQuery Mobile widgets to design mobile-friendly pages from scratch, with your own choice of jQuery Mobile objects. All without coding! David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, explores this Dreamweaver magic.
Other Tools

Other Tools

Before diving into the process of building a jQuery Mobile–based page in Dreamweaver CS5.5 that relies on collapsible panels, let me briefly note other jQuery mobile tools that are beyond the scope of this particular article, and less central to the process of building pages, but valuable nonetheless.

Among these other jQuery Mobile tools, two stand out: layout grids and form fields. Let's look briefly at both.

You can design with layout grids that work like tables or use div tag–based CSS columns to divide content into columns. True, columns have a greatly reduced role in mobile page design, but there is a time and place for them, and Dreamweaver CS5.5 provides a rather creative approach to generating layout grid code (see Figure 2).

Figure 2 A mobile page with layout grids.

Input form fields have been customized for mobile devices to make filling out forms on a mobile device easier and more inviting. Dreamweaver CS5.5 includes options for creating mobile-friendly forms with fields like sliders and toggle switches (see Figure 3).

Figure 3 Adding mobile-friendly form fields.

5. Step-by-Step Collapsible Panels | Next Section Previous Section