Building Mobile Pages with Dreamweaver CS5.5
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 pagesand, 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 herenot 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.
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 herethe topic is covered pretty substantively in Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques.
Unfortunately, media queries have one significant glitchthey don't accurately detect the viewport size in Apple mobile devices. I include some advice in the book for how to handle that challenge.
Dreamweaver CS5.5 Plugs in jQuery Mobile
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 Mobilebased pages more or less from scratch, with more variety and options in available expandable jQuery Mobile elements.