Gearing Up for Mobile
Using CSS instead of images not only makes your life as a designer easier, but it also means fewer assets to be downloaded, and pages that consume less bandwidthboth are vital for visitors viewing your sites on mobile devices. But Dreamweaver CS5.5 goes much further in helping you to design for mobile. Now you can set the viewport of the Document window to the exact size of the devices you're targeting. Design view and Live view also respond dynamically to media queries in your CSS. The next two figures show the same page with the Document window set to different sizes in Dreamweaver CS5.5. Figure 6 shows the 320 x 480 screen of a smartphone, and Figure 7 shows a 1024 x 768 screen.
Figure 6 With the Document window set to a specific size, you can check how your design will look in different devices.
Figure 7 The Document window dynamically applies the correct set of styles depending on window size.
Media queries are an extension of the media attribute that tells browsers which type of devices should use your style sheet. Until recently, the only practical use of the media attribute has been to specify different styles for a printer. But media queries are about to change that situation. Now you can target styles based on features such as the width or orientation of the screen. For example, the following style sheet will be served only to browsers and devices between 401 and 768 pixels wide:
<link href="tablet.css" rel="stylesheet" media="only screen and (min-width: 401px) and (max-width: 768px)">
Although media queries are part of CSS3, they're supported by all the main browsers except IE 6[nd]8. The lack of support in older versions of IE doesn't present a problem as long as you create a basic set of styles that are served to all browsers, and use media queries to deliver other rules targeted at other devices. Mobile phones and tablets released in the past two or three years have strong support for media queries, so there's no reason to hold back on using them. Dreamweaver CS5.5 simplifies style sheet management by creating a site-wide media queries file that automatically imports dedicated style sheets. It also has default presets for the most common mobile-device widths.
Figure 8 The jQuery Mobile widgets speed up the development of dedicated mobile sites.
Using the Page, List View, Button, and other widgets, you can easily build a site with touch-responsive navigation elements styled for optimal display on mobile phones and tablets (see Figure 9).
Figure 9 The jQuery Mobile framework is integrated into Dreamweaver CS5.5, streamlining the creation of mobile sites and apps.
David Powers is an author and trainer. He has written or contributed to 15 bestselling books on web design, concentrating mainly on PHP, CSS, and Dreamweaver. David is an Adobe Community Professional and Zend Certified Engineer for PHP 5.3. Passionate about web standards, he frequently can be found offering advice in the Adobe Dreamweaver forums and Dreamweaver Community Help.