Adobe Dreamweaver CS5.5 Goes Mobile

September 7, 2011 1:23 am

Tags: Adobe, CS5.5, Dreamweaver

Product Review: Adobe's Dreamweaver CS5.5

file_472605.jpgThe world has gone mobile, and Adobe is consistently on the move, making sure that Adobe Dreamweaver CS5.5 is the software that webmasters turn to when designing interactive websites for mobile devices. The newest version of Adobe Dreamweaver allows designers to not only create more efficient sites across a variety of platforms, but it also allows designers to control how their creations will appear on specific mobile devices.

The major changes and enhancements from Adobe Dreamweaver CS5 to Adobe Dreamweaver CS5.5 are mobile device related: the enhanced Multi-screen Preview panel, enhanced jQuery support, PhoneGap integration, FTPS and FTPES support, HTML5 and CSS3 support, W3C validation, and Mobile UI widgets.

Multi-screen Preview Panel

One of my favorite new Adobe Dreamweaver CS5.5 features, are the enhanced multi-screen preview panels, which allow designers to view their website creations on three fixed screen sizes. This enhanced feature also gives the designers the ability to customize the size of each of the three preview panels.

This option gives the designer the opportunity to view their creations on an infinite number of mobile devices. As more mobile devices become available, this feature is especially invaluable with the ever-changing variety of different sized mobile device screens; with their interchangeable horizontal and vertical screens.

Changing sizes within the Preview Panels in Adobe Dreamweaver CS5.5

Adobe has also taken the guesswork out of knowing how your design will appear, or interact, on different devices. Adobe Dreamweaver CS5.5 now allows designers to assign specific CSS files to individual screens. This assures the designer that his or her site design will appear as intended; taking control of the site's appearance, and functionality, away from the mobile device and back into the designer's hands.

Media Queries allows designers to target designs for specific mobile devices

Enhanced jQuery Support

Enhanced jQuery support is another "can't live without" feature when it comes to designing for mobile devices. As anyone who designs websites knows, jQuery is the industry standard for cross-browser JavaScript library, designed to simplify the client-side scripting of HTML. The new built-in jQuery Mobile templates take the head-aches out of creating web content that will be viewed on mobile devices. Inserting mobile compatible objects is as easy as choosing items from the jQuery Mobile panel.

Using the jQuery Mobile Template

With five easy steps you can create interactivity into mobile device sites using the jQuery Mobile Template. In Dreamweaver's Welcome Screen, click on the More button, which will bring up the New Document panel. Within the panel, click on Page from Sample, then Mobile Starters, then jQuery Mobile (local). On the lower right bottom on the panel, scroll through the DocType and click create.

Within the jQuery Mobile Starter App, you can quickly design a site by inserting your own text and images into the template. The code automatically changes as you update your design with your content, or insert buttons, images, etc. from the Insert tab.

Inserting objects is easy using the Insert Tab

You can then switch to Live View (and simultaneously to Live Code) to view your design without leaving Dreamweaver.

View both your design and code using the Live View and Live Code feature

PhoneGap Integration

When designing for both Android and iOS Apps, the new Adobe Dreamweaver CS5.5 PhoneGap integration feature takes the guesswork out of how your design will appear and function between mobile operating systems.

FTPS and FTPeS Support

Uploading website designs to your server has never been easier, or more secure, using the enhanced FTP support. Dreamweaver CS5.5 now adds native support for the FTPS and FTPeS protocols.

Mobile UI Widgets

Adobe Dreamweaver CS5.5 now makes it easier to develop exciting mobile apps. Developers can now utilize the enhanced integration with Widget Browser (powered by Adobe AIR), making it easier to add mobile UI widgets to websites intended for mobile devices.

W3C Validation

The validation function (absent from Dreamweaver CS5) is now back in Dreamweaver CS5.5. Instead of having the validator sitting locally on your hard drive, it's now located on the external live W3C server (which is being constantly updated). This improvement assures designers of having consistent up-to-date website validation.

Location of the W3C Validation within Dreamweaver CS5.5

Locating Dreamweaver's W3C Validation for the first time can be tricky. It's hidden under Windows/Results/W3C Validation. Also, once you open the W3C Validation pane you have the options to control the validation settings by clicking on the small arrow-button in the left hand corner of the W3C Validation pane. Once you've selected the W3C Validation settings, they will remain for future site validations until you reset the settings.

W3C Validator Settings

HTML5 and CSS3

Although the ability to work with HTML5 and CSS3 was available as an update for Dreamweaver CS5, both HTML5 and CSS3 come pre-installed within CS5.5. Although HTML5 and CSS3 are still in their infancy, Adobe gives you the web designing tools for easy transition into the next generation of coding.

  • Adobe Dreamweaver CS5.5
  • Retail: $399 USD
  • Upgrade pricing available from previous versions
  • Free Trial
  • Dreamweaver CS5.5 ┬áis also available in the following suites:

Design Premium, Web Premium, Master Collection

OS Compatibility: Windows Vista, Windows XP, Mac OS, Windows 7

Before you "buy or try," be sure to check out the Adobe Dreamweaver CS5.5 Tech Specs page.
Get to know industry leaders and professionals
as they sit down and talk candidly with
Contributing Columnist, Dee-Marie,
Author of "Sons of Avalon: Merlin's Prophecy"

Visit Dee-Marie on Twitter: Dee_Marie_SOA

September 7, 2011

Please note: If you find the color of the text hard to read, please click on "Printer-friendly" and black text will appear on a white background.

Related Articles:

Article Comments

No article comments have been posted. Sign In or Register to share your thoughts.

Privacy Notice

This site uses cookies to deliver the best experience. Our own cookies make user accounts and other features possible. Third-party cookies are used to display relevant ads and to analyze how Renderosity is used. By using our site, you acknowledge that you have read and understood our Terms of Service, including our Cookie Policy and our Privacy Policy.