After travelling around the world on the Creative Suite Evolution Tour as well as presenting at various Adobe Camps, I’ve been getting a lot questions around Dreamweaver CS5.5. Rightfully so since it has some great features and improvements.  So I thought I’d compile the questions into one post.

What is Dreamweaver? 

Adobe Dreamweaver CS5.5 is a web authoring and editing software that provides both visual and code-level capabilities for creating standards-based websites for the desktop, smartphones, tablets, and other devices. HTML, CSS, XML, JavaScript, Ajax, PHP, ColdFusion, and ASP.

What types of things can you do in Dreamweaver?

You can create websites for desktop browsers, smartphones and tablets. Pretty much any content online (excluding plugin content) or on a mobile phone now can be made with Dreamweaver. Examples:

  • Starwood Hotels and Resorts  – St. Regis, Sheraton, Westin, W hotels. “Dreamweaver CS5 helps us to rapidly develop landing pages or mobile application prototypes that can be easily shared among team members for review. Adobe BrowserLab, helps the team make sure they deliver a consistent customer experience across various browsers.”
  • Visa Signature created by Akqa. One of the worlds most awarded independent advertising agencies in the world.  With offices across the US, Europe and Asia.
  • paultrani.com 🙂

What are the key new features in Dreamweaver CS5.5?

  • CSS3/HTML5 supportStyle with the CSS panel, updated to support CSS3. Design view now supports media queries, applying different styles as you adjust screen dimensions. Code for the future with HTML5, with code hinting and Design view rendering support. Live View now includes support for <video> (with QuickTime) and <svg> tags.
  • Live View renderingCheck your page with Live View, now with an updated WebKit rendering engine. Preview designs for multiple devices with real-time media query  support. HTML5 and CSS3 capabilities and enhancements make designing for mobile devices even more efficient.
  • Multiscreen Preview panelDesign for smartphones, tablets, and personal computers with the Multiscreen Preview panel. With media query support, developers can style and visualize rendering for a range of devices in a single panel.
  • jQuery Mobile integrationAdd advanced interactivity with jQuery code hinting. jQuery is the industry-standard JavaScript library, making it simple to add a wide range of interactivity to web pages. Get a jump start with starter templates for mobile phones.
  • Native Android and iOS apps with PhoneGapBuild and package native apps for Androidâ„¢ and iOS with new PhoneGap functionality. Convert your existing HTML to a mobile phone application within Dreamweaver using the open source PhoneGap framework.
  • Integrated CMS support – Enjoy authoring and testing support for content management system (CMS) frameworks like WordPress, Joomla!, and Drupal. The Dynamically Related Files feature provides direct access to a page’s related files, even for dynamic pages, and Live View Navigation offers accurate previews of dynamic applications.
  • Site-specific code hinting – Code hinting support for PHP libraries and CMS frameworks like WordPress, Drupal, and Joomla!
  • FTPS, FTPeS support – Dreamweaver CS5.5 now adds native support for the FTPS and FTPeS protocols (security).
  • Support for leading technologies – Design and develop in an environment that supports most leading web development technologies, including HTML, XHTML, CSS, XML, JavaScript, Ajax, PHP, Adobe ColdFusion® software, and ASP.
  • W3C validation – Use the W3C’s own online validation service to ensure conformance with web standards.
  • Subversion support – updated to the version 1.7 protocol.
  • Adobe BrowserLab integration – accurately test web content across browsers and operating systems.
  • CSS inspection – Visually display the CSS box model in detail and easily toggle CSS properties without reading code.
  • Intelligent coding assistance – Code hinting with HTML, JavaScript, PHP, and Ajax frameworks such as Spry and jQuery.
  • CSS starter pages – Jump-start your standards-based website design with updated and simplified CSS Starter Layouts.
  • Comprehensive CSS support– Visually display the CSS box model without requiring separate utilities, and reduce the need to manually edit CSS code — even in external style sheets.
  • Integrated FLV content – Add FLV files to any web page with point-and-click ease and standards-compliant coding. Preview your movies with FLV playback capabilities in Live View.

What are Dreamweaver’s mobile capabilities?

  • Multiscreen Preview panelDesign for smartphones, tablets, and personal computers with the Multiscreen Preview panel. With media query support, developers can style and visualize rendering for a range of devices in a single panel.
  • jQuery Mobile integrationAdd advanced interactivity with jQuery code hinting. jQuery is the industry-standard JavaScript library, making it simple to add a wide range of interactivity to web pages. Get a jump start with starter templates for mobile phones.
  • Native Android and iOS apps with PhoneGapBuild and package native apps for Androidâ„¢ and iOS with new PhoneGap functionality. Convert your existing HTML to a mobile phone application within Dreamweaver using the open source PhoneGap framework.
An app I created in an hour using JQuery Mobile and PhonGap integration.

Using these technologies, what I did is make a quick mobile website and an app. Check it out!

Say I have CS3 and it works well for me to create basic websites, why would I want to upgrade to CS5.5?

If all you’re doing is creating basic websites and it works fine for you, then you probably don’t need to upgrade.  But if you find yourself going to File > Preview in Browser a lot then Live View will save you time (read: money). Keep in mind that even though you haven’t upgraded, your audience has upgraded how they look at your content, which is through a phone or tablet. In fact, by 2014, mobile browsing will exceed web browsing! In fact, when I was in Brazil, about 80% of the population have only experienced the web through a mobile phone!
Keep in mind that if you own a registered copy of Dreamweaver CS5, CS4, or CS3 or Macromedia® Dreamweaver 8, you may upgrade to Adobe Creative Suite 5.5 Design Premium or Web Premium software for $400!

What’s different in CS5.5 from CS5, why would someone want to upgrade?

If you’re interested in targeting the mobile devices and tablets then it’s for you.  JQuery Mobile framework alone is worth it. As well as making apps. And if you’re interested in working with the latest in HTML5 and CSS.

What is the deal with the new subscriptions model in CS5.5?

Sign up for a subscription plan of $19 per month. The subscription gets you all updates as they come out. So if CS6 were to come out in June (not likely, but if…) you would get it as a part of your subscription. This makes Dreamweaver much more affordable for the average designer. And if you hire designers on a temporary basis, you can purchase one month of Dreamweaver and then turn it off until you need to buy it again. This makes it much more affordable for teams and companies that only hire designers periodically.

How does an average user get started with Dreamweaver, what skills do you need to use this program?

  • Start with HTML Templates and just modify them.
  • From the start page you can watch videos. And there’s even more on adobetv.com
  • Basic understanding of HTML is good.

What are the alternatives to Dreamweaver?

  • FrontPage
  • Adobe GoLive
  • Aptana Studio
    – Free and supports JavaScript, Ruby on Rails, and PHP development. It has Ajax, DOM, HTML and CSS support and plug-ins for Adobe AIR and Apple iPhone development. It has more of focus on people developing for Rails, but is equal as useful for PHP developers.
  • Microsoft Expression Web 4 – Create standards-based Web sites.
  • TextMate – TextMate is not an IDE but by using its powerful snippets, macros, and unique scoping system, it can often provide powerful features. It has enough project management features to keep most users happy, but is otherwise kept lightweight with a clean and minimalistic GUI.

I’ve heard that Adobe’s doing a lot with mobile integration and development. Can you tell me how Dreamweaver supports this?

  • Multiscreen Preview panelDesign for smartphones, tablets, and personal computers with the Multiscreen Preview panel. With media query support, developers can style and visualize rendering for a range of devices in a single panel.
  • jQuery Mobile integrationAdd advanced interactivity with jQuery code hinting. jQuery is the industry-standard JavaScript library, making it simple to add a wide range of interactivity to web pages. Get a jump start with starter templates for mobile phones.
  • Native Android and iOS apps with PhoneGapBuild and package native apps for Androidâ„¢ and iOS with new PhoneGap functionality. Convert your existing HTML to a mobile phone application within Dreamweaver using the open source PhoneGap framework.

Can you dive a bit deeper into what platforms/devices you can develop for in Dreamweaver?

  • Desktop web browsers. PC, Mac, Linux.
  • Mobile web browsers.
  • iOS devices.
  • Android devices.  Android 2.2 and Android 3.0 (tablets)
  • BlackBerry PlayBook using the WebWorks SDK.

Tell me about how you develop a mobile application. What steps would I take? Is it easier to do now than in previous versions?

  1. File > New > JQuery Mobile site.
  2. Add content/images.
  3. Site > Mobile Applications > Configure Applications Framework

  4. Modify Applications Settings.
  5. Build!

Dreamweaver CS5.5 is available as a part of the Web Premium suite, tell me briefly about the other products in the suite?

  • Photoshop
  • Illustrator
  • Fireworks
  • Flash Pro
  • Flash Builder & Flash Catalyst
  • Acrobat X Pro
  • Bridge
  • Device Central
  • Media Encoder

What is HTML5?

HTML5 is the latest version of HTML. Currently in development. A mix of features introduced by various specifications (W3C, WHATWG) and technologies (Flash) that should be easier to implement and standardized by HTML.  There are symantic elements. Elements that help computers understand the meaning of the data. Such as:

     

  • <section>
  • <article>
  • <header>
  • <nav>

There are also some popular media and graphic tags:

  • <video>
  • <audio>
  • <canvas>
  • Drag and drop.  Offline storage. History API. Geolocation. Web Forms.

Keep in mind that HTML5 is not CSS3. CSS3 allows for animation, gradients, rounded corners. Cool visual stuff.Also, HTML5 is not Javascript APIs. These JavaScript APIs allow you to draw on the <canvas> tag, for instance.

Check out Caniuse.com for what HTML5 tags and CSS3 properties you can use in different browsers.

What does Adobe think about HTML5, will it support HTML5 and Flash?

Yes! We want to support the community more than anything.  If the community wants HTML5 then we’ll devlier that.  If they want to use Flash then we’ll deliver that! Case in point, check out Wallaby. It is some new technology that converts FLA files to HTML.  How’s that for giving people what they want? And lastly. Released just yesterday is Google’s Swiffy.  It converts Flash to HTML as well.  So all those cool animations you’ve been seeing of the Google logo have probably been done in Flash Professional first. 🙂

Comments are closed.