'

Adobe opens design box of delights with Edge Tools & Services

Adobe has packaged up a suite of tools and services — some existing, some new — aimed at helping web designers and developers create rich standards-based content for multiple platforms.

Adobe's Create the Web event in San Francisco on Monday saw the arrival of a suite of seven tools and services for web designers and developers.

Adobe Edge Tools & Services — all but one of which are available now via the Creative Cloud subscription service — aim to make it easier to create standards-based websites, digital content and mobile apps that are rich in layout complexity, typography and interactivity.

adobe-ets-1
Adobe's Edge Tools & Services comprise a mixture of existing and new products.

The suite is targeted at "web designers who code and developers who value design", Adobe said, and comprises a mix of the existing and the new:

  • Edge Animate  Formerly called Edge Preview , Edge Animate is a WebKit-based tool for creating Flash-like interactive, animated content using HTML5, CSS and JavaScript.
  • Edge Inspect  Formerly called Shadow, Edge Inspect is a preview/debugging tool that lets you sync multiple mobile devices wirelessly to a host computer running Chrome; you can then display the same content on all connected devices and see HTML, CSS and JavaScript changes update instantly.
  • Edge Code  An implementation of the open-source Brackets project, Edge Code — currently available as a preview — is a code editor optimised for working with HTML, CSS and JavaScript.
  • Edge Reflow  Only presented as a demo to date (a preview version is expected by the end of 2012), Edge Reflow is a visual tool that allows designers create scalable layouts for different screen sizes and export the CSS code to an editor such as Dreamweaver.
  • Edge Web Fonts  A free web open-source font library, Edge Web Fonts is hosted by the (paid-for) Typekit service.
  • Typekit  This is a commercial font library that's already available either standalone or as part of a Creative Cloud subscription.
  • PhoneGap Build  Another existing service (just emerged from beta), PhoneGap Build packages up mobile apps built using HTML, CSS and JavaScript for deployment on multiple mobile platforms.
adobe-animate
Edge Animate, currently a free preview, will sell for $499 after an undefined introductory period.

Adobe says that Edge Animate will eventually sell for $499 (UK pricing to be announced), or via a monthly subscription of $9.75. Initially, though, it is available for free via Adobe Creative Cloud to encourage developer take-up. More than 500,000 preview downloads have already been chalked up, according to Adobe.

At its Create the Web event, Adobe also revealed several proposed CSS extensions, namely: CSS Regions and CSS Exclusions, designed for creating responsive "magazine-like" web layouts; CSS Transforms, for applying consistent geometric transformations to HTML and SVG content; CSS Compositing and Blending for Photoshop-like blend modes; CSS Custom Filters for creating sophisticated "cinematic" visual effects.

Two new fonts used in the Edge suite — Source Sans Pro and Source Code Pro — have also been made open source.