- Dreamweaver CS5.5 Rises to the Challenge
- Creating Visual Effects Without Images
- Gearing Up for Mobile
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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 bandwidth—both 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.
For really serious fun with mobile, it's hard to beat the integration of jQuery Mobile into Dreamweaver CS5.5. The jQuery Mobile framework uses sophisticated JavaScript and CSS to create a unified interface system across all popular mobile device platforms. The system is still under development, but Dreamweaver engineers are actively contributing to the code base. Although the built-in jQuery Mobile files are from an earlier version, you can install the most up-to-date version with a couple of clicks. The Insert panel has a dedicated jQuery Mobile section that automatically builds more than a dozen jQuery Mobile widgets (see Figure 8).
)
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.
Once you've built a site with jQuery Mobile, you can either deploy it on a web server where it can be accessed by anyone as a web app, or you can convert it into a native app for Android or iOS by using Dreamweaver's integrated version of PhoneGap. Android is supported on both Windows and Mac versions of Dreamweaver CS5.5, but conversion to an iOS-native app requires Xcode and the iOS Software Development Kit (SDK), which requires a minimum of Mac OS X 10.6. Dreamweaver builds a debug version of the app, ready for testing in an emulator or in an actual device; but it doesn't handle the digital signing required for deployment in the Apple or Android Marketplace. Still, if you fancy developing mobile apps using your HTML, CSS, and JavaScript skills, Dreamweaver CS5.5 makes it a fun and enjoyable experience.
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.