Adobe Edge Reflow: Adapting with ‘Responsive Web Design’

We live in an age of screens. You are looking at one right now, and so am I. In our modern lives we are constantly staring at screens of various sizes, and as the diversity of resolutions and aspect ratios has grown over time, so has pressure on web developers to adapt their designs to the changing demands of the end-user.

The first reaction of many developers to having to cater to different screen sizes has been to create multiple static comps for the same project. But the drawbacks of this approach quickly become apparent when you imagine trying to design 4 or 5 versions of the same website, while trying to keep the design clean, functional and aesthetically consistent. You would then have to update each one separately every time the client makes a change. This could rapidly turn into a time-consuming nightmare!

So the need for intuitive designs that can automatically adapt to different screen widths can no longer be ignored. We coined this philosophy ‘Responsive Web Design‘ but until now developers have mostly been forced to either try and repurpose their existing tools to find work-arounds they were not designed for, or work directly in code  - which despite being accurate and clean, can hinder the artistic spontaneity that can be so important to the design process.

The newest addition to Creative Cloud, Edge Reflow, allows you to simultaneously design for different screen sizes using a visual workspace to set media breakpoints and is one of the only tools specifically designed with Responsive Web Design in mind.

Screen Shot 2013-03-14 at 11.14.47 AM

Screen Shot 2013-03-14 at 12.07.10 PM

 

As content is added, resized, edited and moved around on the canvas visually, Reflow translates these changes into CSS script in real-time in the background. This gives you the choice of working either visually, using the canvas to create a layout as you would in Illustrator or InDesign, or by editing CSS values in the context-sensitive side panel to alter the individual attributes of an object:

 

Ever-present at the top of your canvas is the media breakpoint bar. This is where you set color-coded breakpoints for each screen size:Screen Shot 2013-03-15 at 12.59.14 PM

Once you have settled on a layout for one, clicking on the next breakpoint causes the page’s content to manouevre automatically to try and fit within the new width (normally in an unhelpful way). You can then tweak the layout, replace or remove objects and reformat text until you are happy, and then move onto the next breakpoint.

Screen Shot 2013-03-15 at 1.15.39 PM

Reflow is very clever in its use of color-coding for content-specific attributes in the side-pane. When an object is selected, the backgrounds of related attributes change to match the color assigned to the layout in the breakpoint bar. This allows you to quickly see if a value is specific to the breakpoint you are looking at, or if it was originally set on another.

The beta still lacks the ability to choose your own colors for these labels, and although the CSS code Reflow writes as you design is very clean and uses a full array of CSS formatting controls, it does not yet allow you to name layers or text styles.

There are of course other flaws that will hopefully be addressed once the beta has been picked apart and the full version is released, but there is also some very nice extended functionality potential in Reflow being used as part of the Edge suite. Such as being able to preview your design on different devices in real-time using Edge Inspection, and the possibility of incorporating assets created in Edge Animate.

We are looking forward to the full release. It should tide us over until they come up with round screens, or say, 3D websites… and when that day comes, may the God of Responsive Web Design have mercy on us all!!

Adobe CS6 Release?

If you have been wondering when Adobe plans to upgrade the Creative Suite, history has a thing to tell us…

  • CS – Released in October 2003.
  • CS2 – Released in April 2005 (18 months after CS).
  • CS3 – Released April 2007 (24 months after CS2).
  • CS4 – October 2008 (18 months after CS3).
  • CS5 – Released April 2010 (18 months after CS4).
  • CS6 – If history is showing us a pattern….October 2011?

There is bad news for those still using CS3. Adobe has said that CS3 will not be upgradable to CS6. So if you are still using CS3, keep in mind that you will end up paying full price for CS6 whenever Adobe plans to release it.

*Ascend Training has no knowledge of any Adobe release dates.

Adobe CS5 Launch: June 3rd

Come experience the magic of CS5! Adobe has come out with a knock your socks off upgrade that is shipping soon. June 3rd, Ascend Training and Adobe are presenting 12 free seminars showcasing the new CS5 applications. Doors open at 4pm, and presentations continue through 8pm.

Ascend is offering all Adobe CS5 classes beginning in June. All students who take CS4 are still eligible to retake the class in version CS5.

Register for this free event.

Adobe Announces CS4 World Wide Webcast

With the campaign “It’s Going to be Brilliant,” Adobe has announced the release of the newest Creative Suite, CS4. The broadcast can be viewed at the Ascend Training Chicago facility with the Chicago Area Adobe User Group Sept. 23rd at 11am, or viewed online.

The release of CS3 saw major modifications in the original Adobe apps such as Photoshop, InDesign and Illustrator. While there were improvements in Dreamweaver and Flash, since the purchase of Macromedia occurred in the middle of the development cycle, the biggest change there was just getting these apps into the Creative Suite.

With the release of CS4, we can plan to see not only major leaps in the web apps, but tighter integration between the entire CS4 family. According to a Comscore report, 82% of online video viewings in the US and 73% worldwide use Adobe Flash technology. With the newest release of the Flash 10 Beta, code named Astro, expressive features and visual performance improvements.

Register for the Adobe Webcast at Ascend: http://www.ascendtraining.com/events.php

- Jori Curry