Building Mobile Pages with Dreamweaver CS5.5
- Dreamweaver Responds to the Need for Mobile-Friendly Pages
- Building a jQuery Mobile Page
- Generating a Mobile, App-Ready Page
- Customizing Content
- Applying jQuery Mobile Themes
- From Here
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Dreamweaver Responds to the Need for Mobile-Friendly Pages
Am I the only one who was very pleasantly surprised by the new features in Dreamweaver CS5.5 that allow you to generate mobile-friendly pages—and, beyond that, mobile apps?
Sure, we all expected that Flash ActionScript coders would get tools to export Flash content, making it Apple iOS-compatible. But, to be honest, I wasn't prepared for how easy it is to create iOS and Android apps in Dreamweaver CS5.5. I cover the whole range of new mobile-oriented tools in Dreamweaver in a CS5.5 update that's available to everyone who registers a copy of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques (to register the book and download the update, you just need the book's ISBN). This article is the first of three that provide introductory tutorials for those new CS5.5 features. In this piece, we'll start by creating web pages that look and function well in mobile devices such as Android and iOS phones and tablets.
Let's back up for a moment to situate this exciting news. Mobile-friendly websites a) are here to stay, and a growing factor in the audience for web designers; and b) have their own particular design and technical constraints.
Desktop Sites, Mobile Sites, and Apps
As a bicoastal American, I frequent the Southwest Air website, and the experience is appropriately distinct on my laptop versus my iPhone. The laptop version is laid out in a typical two-column, 960-pixel design, with the large (left) column further subdivided into smaller columns (see Figure 1).
)
Figure 1 Southwest Air's laptop/desktop site.
On the other hand, when I book a Southwest flight on my iPhone or iPod touch, I get a convenient one-column layout with expandable "pages" that open as I click one of the icons/links (see Figure 2).
)
Figure 2 Southwest Air's mobile site.
Now, to be clear, we're talking about websites here—not apps. Southwest Air has an app, and I could download it. But I have enough apps on my devices already. Besides, the app and the mobile site are pretty similar.
On the technical front, mobile websites rely on JavaScript for interactivity and animation. When you click a "link" in a mobile site, you're likely launching a JavaScript program that opens what looks and feels like a new web "page," but is actually just different content on the same HTML page.
Having surveyed the basic aesthetic, functional, and technical elements of a mobile site, let's see how Dreamweaver CS5.5 has responded to this evolutionary development in the web ecosystem.
CS5.5 Builds on CS5 Media Queries
Dreamweaver CS5 included an important new feature that facilitates designing mobile-friendly websites: media queries. With media queries, you can define three different versions of a web page, presenting the version of the page that matches the visitor's viewport dimensions.
I won't review how to build media queries here—the topic is covered pretty substantively in Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques.
Unfortunately, media queries have one significant glitch—they don't accurately detect the viewport size in Apple mobile devices. I include some advice in the book for how to handle that challenge.
While Dreamweaver CS5's media query tools allowed us to create multiple designs for different viewport sizes, one important dimension of building mobile-friendly pages was missing: JavaScript.
Dreamweaver CS5.5 Plugs in jQuery Mobile
Dreamweaver CS5.5 takes giant steps toward integrating the essential JavaScript elements that are most widely used in designing mobile websites. By the way, looking ahead, these JavaScript elements translate well when you use CS5.5's new tools for generating mobile apps—not just mobile websites.
Again, eschewing the fine points (much less the technical details), the basic story is that usable JavaScript elements for web design have been organized into a library of editable scripts. That library is jQuery, and jQuery Mobile is a set of jQuery elements that are particularly useful to mobile website design.
jQuery Mobile elements are accessible via the menu in Dreamweaver CS5.5, in two forms. One form, which we'll explore in the remainder of this article, is mobile starter pages that have the most widely used jQuery Mobile tools (such as the ones used in the Southwest Air mobile site shown previously). In a later article in this series, we'll examine additional tools in Dreamweaver CS5.5 that allow you to design jQuery Mobile–based pages more or less from scratch, with more variety and options in available expandable jQuery Mobile elements.