Adobe Edge CC review

The proliferation of mobile devices has resulted in a reassessment of how we craft online experiences. Where once safe defaults could be assumed, we now see the web as the unpredictable beast it has always been. Our processes are adapting to meet this demand. Cross-disciplinary roles, agile teams and a high degree of collaboration are important tenets of a responsive workflow – with the boundary between design and development increasingly blurred.

For a while, Adobe looked hopelessly out of touch with these developments. It believed its proprietary Flash technology was a key component of the web, and marketed a suite of web design applications conceived well before the introduction of broadband, let alone smartphones. Recognising the need to change course, the company engaged with standards bodies to improve specifications, and developed a modern suite of web design tools called Edge – smaller task-orientated software and supporting services, built from the ground up, and updated regularly.

Is this new approach likely to be successful? Will these new tools help creatives craft compelling experiences that work across the full gamut of today’s web? As the Edge suite joins Creative Cloud, we are about to find out

Edge Reflow CC (Preview)

At first sight, Edge Reflow is a confusing proposition: should it be used for prototyping? Design? Development? When viewed as a communication tool, it starts to show more promise. Primarily intended for designers, Edge Reflow helps them produce quick responsive mock-ups to show clients, and share precise CSS styles with developers.

The application itself is built on top of WebKit, and while it lacks native OS appearance and behaviour, this does mean documents are rendered accurately using HTML and CSS. Designs can be previewed in Chrome, although this output is not intended for public consumption – a point the application goes to great lengths to make. Edge Reflow also works with Edge Inspect, allowing you to preview your work on mobile devices, too.

Much of Edge Reflow’s interface is given over to altering the appearance of a page at different breakpoints. The presentation of these is clear, and undoubtedly helpful for those new to responsive design. Designers are free to use either pixel, percentage or em measurements. The interface is a little clunky – and downright confusing at times – and it may take a while to understand a WYSIWYG editor that’s so tightly coupled to CSS layout conventions.

Edge Reflow is clearly a product in its infancy, but its future looks bright. Although you can create complex layouts and designs already, future updates will allow a Photoshop or Illustrator file to be imported as a starting point, speeding up the responsive design process for users of those tools.

It could also be said that Adobe is over-thinking the problem. In my own experience, simple activities like sketching or having a conversation with a colleague next to a whiteboard can solve even the toughest responsive design issues.

Edge Code CC (Preview)

No suite of web development tools would be complete without a code editor. Edge Code is based on the open source Brackets application, a genuinely innovative text editor with unique features such as live previewing in the browser (again, this only works with Chrome) and quick inline editing functions. It’s still in beta.

Edge Inspect

Like Edge Web Fonts, Edge Inspect is the glue that binds the Edge suite together. Formally known as Shadow, Edge Inspect allows you to pair your computer with iOS and Android devices, and then remotely inspect or preview your work. Once again, only Chrome is supported on the desktop.

Although other similar (and cheaper) services are available, they can be complicated to set up. If you are a Creative Cloud subscriber, it makes sense to use Edge Inspect, given its tight integration and ease of use.

Edge Animate CC

A tool for creating animated, interactive web content, Edge Animate CC is undoubtedly the flagship application within the suite, and possible pretender to the Flash crown, too. The application looks incredibly polished, providing an endless supply of buttons and knobs for animators to tweak.

The timeline clearly breaks down the structure of an animation, to which complex easing transitions can be added. Interestingly, Edge Animate implements graphic effects (such as blurs and filters) using CSS3 styles, which are not supported in all browsers. This is a Good Thing – to my mind, websites don’t need to look the same in every browser – and it’s encouraging to see Adobe embrace progressive enhancement.

Well, to a point. Whether animating empty tags is a sensible approach for animation on the web is open to debate. I suspect those concerned with accessibility and performance will go the extra mile to make Edge Animate’s output amenable to their needs. That said, the generated JavaScript seems fairly reasonable in terms of download size, and much of it can be edited directly within the application.

Possessing neither scripting or animation skills, I’m misplaced to provide a qualified opinion on this application and the code it generates. Still, it looks like a fun and capable tool that I’m sure many will enjoy using.

So is it all worth it?

With workflows requiring closer collaboration between clients, designers and developers, Adobe’s software could have a valuable role to play. A strong focus on communicating ideas makes Reflow a particularly promising application in this respect. Using web fonts on the desktop, and previewing designs across mobile devices simultaneously with Edge Inspect are standout features. It’s just a shame these are not available separately, instead locked behind a prohibitive subscription model.

Should you pay a monthly subscription to use these tools? Unless you require the animation features of Edge Animate, I would find the price hard to justify – especially when similar features can be found in services like Typecast and Gridset. For more experienced teams, I’m not sure how useful these tools are when simpler tools may suffice – one shouldn’t overlook the power of pen and paper. However, if you are already a Creative Cloud member, heavily wedded to Adobe’s app eco-system, they may prove more useful.

Broadly speaking, it’s encouraging to see Adobe improve its attitude to the web. By developing Edge Code in the open as Brackets, it has produced an innovative IDE that makes writing code fun and creative. Its work in bringing advanced graphic capabilities to CSS (shapes, regions, blend modes, custom filters) will benefit the web community for years to come. In that respect, the company’s greatest contribution may not be these applications, but its work on web standards and within the open source community instead.

---

Company

Adobe

Price

Creative Cloud for individuals from £14.65​+VAT​/month. Creative Cloud for teams from £37.11​+VAT​/month

Supports

Windows 7 or 8, OS X 10.7 or 10.8

Pros

Tight integration with other Creative Cloud applications; preview design and code easily on iOS and Android devices; use web fonts on your desktop; powerful animation tools.

Cons

Applications lack native UI and share an inconsistent design; preview functions limited to Chrome browser; applications not available to purchase separately.

Rating

★★★☆☆