Product Review: Adobe's Dreamweaver CS5.5
The 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
- New! Monthly and yearly subscriptions also available
- Compare previous versions: Dreamweaver Buying Guide
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 professionalsas 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.
|
|
||||||
|
||||||
|
|
Comments