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.
Design Constraints for Mobile Devices

Design Constraints for Mobile Devices

By nature, web design for mobile devices is pretty basic. When you're designing for a very small space like that, one artistic constraint is the need for simplicity. The current stage of mobile technology offers essentially only two ways to present portals to content in a cell phone's viewport: the two dimensions X and Y, vertical and horizontal.

One way to navigate to content on a mobile page is to have the page expand "sideways"; that is, the page appears to scroll to the right or left as a visitor taps on a link or drags on the page with his or her finger(s). The page doesn't really scroll sideways; instead, some content disappears, other content appears, and animated effects make this process appear to take the form of moving the page sideways. (The same principle applies to "scrolling" up and down.)

That scrolling approach is used in the Dreamweaver CS5.5 mobile starter sample page (the three versions are identical in design). Again, in my previous article, "Building Mobile Pages with Dreamweaver CS5.5," I walked you through how to create these pages for mobile devices, and how to customize their look and content.

3. How jQuery Mobile Works | Next Section Previous Section