Adobe Bolsters HTML5 Tooling With New Creative Cloud Offerings

Adobe announced a bunch of new HTML5 Web design and development tools for its Creative Cloud members.

Adobe delivered a new wave of HTML5 tooling to its Creative Cloud subscribers with a set of new Web design and development offerings.

The design tools leader announced the first public preview of Adobe Edge Reflow, a new responsive tool for Web designers and developers creating Websites and content for screens of virtually all sizes. In addition, as part of the Feb. 14 announcement, the company released new feature updates for Adobe Edge Animate, Adobe Dreamweaver and Adobe Edge Code preview. All today's announced product releases are available exclusively to Adobe Creative Cloud members.

Adobe Edge Reflow is a new Web design tool for creating layout and visual designs with Cascading Style Sheets (CSS) and is available as a preview at no charge in Creative Cloud. Edge Reflow features an intuitive resizable design surface that shows how layouts and visuals will adapt to different screen sizes, said Jacob Surber, senior product manager for Adobe Digital Media, in a briefing with reporters.

"Reflow is for designers who care about code, and for developers who drive toward a nice aesthetic," Surber said.

Leveraging the power of CSS, Edge Reflow enables users to create high fidelity Web designs on the application's native Web surface, Surber said.

It maintains the design vision, through development, by allowing users to preview in the browser, inspect their design in real time via the Edge Inspect extension, and extract the CSS for use in Edge Code, Dreamweaver or any code editor. During the preview period, Adobe is actively seeking user feedback for Edge Reflow to help evolve the product. Users are encouraged to submit their feedback to Adobe through Github at

Adobe also announced updates to Adobe Edge Animate to give it new CSS-based features, including gradients, CSS filters, and enhanced font support, Paul Gubbay, vice president of product development for Adobe Digital Media, said at the media briefing.

Users will now be able to style and animate elements using radial or linear gradients, and preview Edge Web Fonts live in a new interface. New CSS filter support for Edge Animate allows users to take advantage of exciting CSS capabilities found in modern WebKit browsers, including blur, gray scale, sepia, brightness, contrast, hue-rotate, invert and saturate filters. Previously, filter effects could only be achieved using tools like Adobe Photoshop.

"The job of a Web designer and developer has become more challenging, with Web standards progressing rapidly and the number of screen sizes and form factors increasing exponentially," Gubbay said in a statement. "Adobe Creative Cloud enables our teams to deliver product innovation to our customers the moment that new features are ready, helping designers and developers tackle the new challenges of the modern Web and more seamlessly create Websites and interactive content for the latest browsers and different screen sizes."

Dreamweaver Update

In addition, Adobe delivered an update to Adobe Dreamweaver exclusively for Creative Cloud members that improves interoperability with the Adobe Edge Tools and Services family and includes several new features to enhance code authoring ability and workflow. Fluid grid layout, a feature first introduced with Adobe Dreamweaver CS6, now allows developers to leverage class tags in addition to ID tags and features a new editing interface. Developers can also now easily preview, select and incorporate Edge Web Fonts into their Dreamweaver projects.

This preview release of Adobe Edge Code includes features such as Live Development, which allows users to see changes in the browser immediately as they make code edits, and also Quick Edit, which lets users edit code in context instead of switching between files. This latest update adds code hinting for CSS properties and HTML tags and attributes, making this release an even more productive code editor for Web designers and developers working with Web standards.

Adobe Creative Cloud membership for individuals is $49.99 per month based on annual membership; existing customers who own Adobe Creative Suite 3 (CS3) or later get their first year of Creative Cloud for individuals at the discounted rate of $29.99 per month. Students and teachers can take advantage of a special limited-time promotion to get Creative Cloud for $19.99 per month the first year based on an annual membership if they purchase before March 11, 2013, after which the standard price is $29.99 per month. Creative Cloud for teams is priced at $69.99 per month per seat with an annual contract required; existing customers who own CS3 or later get their first year of Creative Cloud for teams at the discounted rate of $49.99 per month per seat.

Gubbay said there are more than 1 million free Creative Cloud members and more than 326,000 paid members. Ninety percent of those choose the annual plan versus paying month-to-month, and 81 percent choose the full Creative Cloud subscription versus paying for point products, he said.