Edge Of Glory (Part 2)

11/27/2012 9:22:00 AM

Edge Reflow

Unlike Animate, Edge Reflow is something of an unknown quantity at the time of writing, existing only in the form of screen grabs and a teaser video that doesn’t give much away. The idea seems very sound, however, providing a framework for working on responsive user interfaces that can be fully optimized for different screen sizes. If you’re not already familiar with the principles and techniques of responsive web design (RWD), see MacUser, 25 May 2012, p58 (

Description: Edge Reflow is Adobe’s innovative solution for responsive web design

Edge Reflow is Adobe’s innovative solution for responsive web design

With other layout tools including Adobe’s own Photoshop, Illustrator and Fireworks – still largely concentrating on fixed0-canvas design, there’s definitely a need within the web industry for something like Edge Reflow. But options are mixed on whether it can rise to the task. ‘It looks powerful, but I’m praying it’s not WebKit-specific, and it really shouldn’t have a code export function,’ argues JavaScript guru Remy Sharp ( instead, he told us, Adobe should concentrate on ‘letting designers take their PSDs and see then in a responsive tool’. That is, it should be offered as a prototyping aid rather than a way to create finished web content.

Mist, too, is skeptical: ‘Edge Reflow looks like a lovely tool, but at the most I’d recommend it as an educational experience in exposing the tech and methods behind flexible layout creation. Beyond that, it seems like it could cause more issues than it solves by angling itself as a tool for designers to create layouts to then pass to developers.

‘It’s no match for getting designers and developers to work together, in sync, and I’m unconvinced it will make its way into the usual responsive workflow.’

But Zurb partner Jonathan Smiley ( is one of the few developers who’s been able to spend time hands-on with Edge Reflow, and he’s a convert: ‘Adobe demoed the app for us, and it’s by far the most interesting thing I’ve seen from them in years. It could signal a shift from hand-coding to a more interactive tool, even among code-happy purists, myself included. It’s – possible – that good.’

Edge Code

Given the general disdain for Adobe’s generated code output – a view also widely held, it must be said, about visually led web tools from other vendors – it’s perhaps inevitable that our industry panel was most excited about the products in the Edge suite that invite users to write the code themselves.

Description: Edge Code is an environment for hand-coding HTML, CSS and JavaScript

Edge Code is an environment for hand-coding HTML, CSS and JavaScript

Edge Code is a highly optimized and efficient coding environment, built on the open-source project Brackets, that enables you to hand-code HTML, CSS and JavaScript. The app us built on web technologies, potentially setting up a virtuous circle, in that developers can contribute directly to the app.

It also features in-context inline editing (Quick Edit). Instead of searching through a number of individual files, updating, saving and refreshing, Edge Code often enables you to rapidly find the code you’re looking for, then immediately see how changes affect your work.

‘This could be a real cracker,’ developer Mist told us. ‘There’s strong community support for bug-solving and capability extending, and the inline editing is great. You can select an element in an HTML file and any CSS or JavaScript applied to it appears alongside, even if it’s in an external file.’

Webmaster Christian Oliff ( has also been using Edge Code, despite its beta status, and thinks it showcases Adobe’s new realisation that many web developers prefer lightweight code editors such as TextMate, BBEdit, and Sublime Text. He’s also a big fan of how it’s made: ‘My favourite part about the Edge Code story is that the devs working on it are developing it using Edge Code. Very meta!’

Web designer and front-end editor Jordan Moore ( is also encouraged by Edge Code: ‘As an avid Sublime Text user, it would take a very impressive tool to coax me away from the comforts and convenience I’ve become accustomed to, but Quick Edit is a neat improvement to our current workflow.

‘And with Edge Code built on web Standards, Adobe has lowered the entry barrier for making plug-ins and customisations.’

Edge Inspect

While Edge Code is all new, Edge Inspect is a more mature coding tool, formerly known as Adobe Shadow. We preferred its original mysterious moniker, but the new name is more descriptive: Inspect enables you to inspect your websites, on a variety of platforms representative of those your project is targeting.

Description: Formerly Adobe Shadow, Edge Inspect lets you quickly preview websites on iOS and Android devices

Formerly Adobe Shadow, Edge Inspect lets you quickly preview websites on iOS and Android devices

The way it works is by wirelessly pairing one or more iOS and Android devices with your Mac.Sites you browser in Google Chrome (the browser that Edge Inspect works with as a plug-in) will then automatically sync to the wireless devices. If you’re working on a responsive website, this alone will be a godsend. That you can also target any device for remote inspection, adjusting code and instantly seeing updates, is the kind of thing that would make web designers weep tears of joy, if they weren’t already busy using the tool and raving about it at every available opportunity.

‘Inspect is great,’ confirms Mist. ‘Live syncing and mirroring between multiple devices makes responsive design a breeze.’ His only issue: with Shadow having been available for months, it’s bow heavily used, but has suddenly gone from ‘essential and free’ to ‘essential and paid for’, with a rather limited version rushed out by Adobe to fill the freebie gap.

Like all of the Edge tools, however, Inspect is included in a Creative Cloud subscription if you have it; and if not, Moore reckons it justifies the asking price. ‘Having used Shadow, I knew it was useful and that I’d be happy to pay for it. At $15 per month, Edge Inspect is well worth the expense, considering how much time it will save you.’

Moore believes Adobe has created a tool that ‘should be part of every modern-day web workers’ arsenal’, and Aaron Gustafson (, a web developer and author, agrees: ‘In the months we’ve used it at Easy! Designs, Edge Inspect has become our de facto tool for multi-device testing. It has dramatically increased the speed with which we’ve been able to diagnose and fix issues with our code.

‘Fingers crossed it’ll roll out for Windows Phone and Blackberry OS as well.’

Video tutorials
- How To Install Windows 8

- How To Install Windows Server 2012

- How To Install Windows Server 2012 On VirtualBox

- How To Disable Windows 8 Metro UI

- How To Install Windows Store Apps From Windows 8 Classic Desktop

- How To Disable Windows Update in Windows 8

- How To Disable Windows 8 Metro UI

- How To Add Widgets To Windows 8 Lock Screen

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010
programming4us programming4us