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!!

The battle behind the screens – Flash vs. Silverlight

It’s definitely a war–it’s just that it’s a Cold War.

Since Microsoft released Silverlight, (and by the way, watch what happens when you surf over there) their answer to Adobe Flash, in 2007, there’s been a (sort of) silent war going on behind the two software giants about who gets to play your movies.

When you go to a site like Youtube or Hulu to watch videos (and who among us does not, these days?), isn’t it awesome how fast it is? How clear? How the videos you watch don’t take up space on your hard disk or really even slow down what you’re doing in the background? That’s because when you go to those sites (and soon others like Vimeo and possibly Dailymotion), your browser loads a plugin to let you read the Flash Video that someone has posted and that the website has slightly reconfigured–and plays it right from the source, like you’re looking through your computer to where the video really is, somewhere else. This means that anyone, anywhere can see it, which is good news for video producers and marketers alike. Just as Mac OSX, Windows, and Linux can all (usually) read the same types of files, now we can all see almost any type of video–the trouble is that not everyone feels like they’re making enough money this way.

Any guesses who? (*coughSilverlightcough*)

Well, you’re mostly right, but it isn’t JUST Microsoft. There are plenty of people out to get Flash, now that it’s the standard for video playback on the web: Sun Microsystems (who makes Java), plenty of open-source proponents, and Apple have either resisted or worked around integrating Flash into their video products (iPhone, anyone?) but more than ever, Adobe is realizing that if they want their product to stay at the top, they’re going to have to get into some heretofore unexplored venues. To that end, the rumors are flying about new tools for developing iPhone apps using Flash, putative Flash support on the theoretical Apple Tablet (if it exists, right?), and more.

Microsoft is responding to this by leveraging their power toward pushing Flash out of certain areas; ever notice that the streaming function of Netflix is run on Silverlight instead of Flash?

So here’s the question: both Flash and Silverlight are proprietary software, and both are the big boys when it comes to video playback on the web–now whom would we prefer as the keeper of our vids? Because someones’s going to win this battle–and either way, it’s going to mean a lot about how we get (and what we can do with) our video.

Cloud Computing then and now; a look at how far we’ve come

About a year ago (specifically last February), “Cloud Computing” was a fairly new techno-buzzword. In fact, when Jori blogged about it then, we got a fair few comments asking what it was. At the time, the “cloud” was a nebulous thing true to its name; when something went into the electronic “cloud,” just where was it going and how were you supposed to get it back?

For those who don’t know: the “Cloud” is the general name for the dynamic, functional space on the internet (so on servers all over the world) where data can be stored and accessed by anyone through the web. Think of your Gmail account; your messages live online somewhere, and when you log into Gmail to get them, you go out to the web instead of the messages coming to you. The same functionality can be applied anywhere, and we see it being used more all the time. Apple’s MobileMe (formerly .Mac) essentially rents subscribers a chunk of space on Apple’s servers to post photos, host a website, send and receive email, etc. Practically, the user doesn’t really do anything she or he didn’t already; you still put in a username and password and there’s your stuff, whatever it is–the difference is that all of that stuff used to have to be on a hard drive somewhere, and now it’s in the aether, floating around between computers, easy to access but impossible to locate-and for some, this is troubling.

But not everyone sees it that way; many respected institutions including universities, government agencies, and even corporations are beginning to see Cloud Computing as a way not just to maximize investment but a way to reach more people. In September of this year, the White House announced a multi-billion-dollar initiative aimed at streamlining the transition of much of its data into “cloud-accessible” form. Even NOAA (National Oceanographic and Atmospheric Administration) uses the Cloud, and in a way that would have been impossible without the architecture built by Google, IBM, Apple and others; Satellite data from multiple government agencies are aggregated together in “constellations”, or mini-clouds, so that anyone behind the firewall can see it all at once.

Speaking of making our jobs easier, I’d love to mention the success we’ve had at Ascend using Adobe’s Acrobat Connect, which in addition to being incredibly cool (think of a Wiki, only everyone can work on it at the same time), is incredibly useful. Ascend uses Acrobat Connect to hold online training sessions on Adobe’s own software–so now, thanks to the “Cloud” in which the class data and all the various users’ information can be temporarily housed, students in London can tune in and take a Photoshop class with students in Phoenix, which is good news, since most companies are going global faster than we can keep up.

Personally, I think the Cloud is awesome; I use MobileMe and Gmail for my email, PhotoBucket to share photos, and YouTube to express myself and get my daily dose of entertainment–but you know what? For the moment, I’m still making back-ups of it all on my external hard drive, and that sits on my desk…so I can keep an eye on it. Know what I mean?

For further reading:

White House unveils cloud computing initiative

Microsoft’s Azure

The Future of the Desktop: Cloud Computing and Adobe Photoshop

The Desmise of the Desktop: How will Cloud Computing Affect the Graphic Designer?

–by Jori Curry

I was at Adobe headquarters last February and there was much discussion about the future of the desktop. Adobe chief executive Bruce Chizen has recently elaborated on the shift in software from the desktop to the web, and speculates it should happen within 10 years. Adobe seems to be following the lead from the web based Google Apps, such as Writely, an online word processing experience, and Picasa which is an online photo manager. It seems that even Microsoft and IBM are jumping on the online bandwagon of “Cloud Computing.”

The whole industry seems poised to step away from buying product licenses, and moving towards the online-based subscription for software. Time Magazine February 2008 issue is stating that by the year 2010 the internet will slow to a crawl due to the video streaming that is growing exponentially.The question is: How will the graphic designer and developer be affected? Will the internet be able to handle the demands of the designer?

Adobe AIR

Another interesting aspect of the future of Cloud Computing is Adobe AIR. Adobe AIR, allows web applications from Flash and HTML be deployed as cross-platform desktop applications, and is taking the direction of “Cloud Computing” to the next level. For example, the AIR iPhone, by Ribbit, allows you to put a simulated iPhone on your desktop and allows you to make and receive calls on your desktop. It’s powered by the Ribbit platform, and includes a new feature called “Shout” which records voice messages and sends them to their email as an audio attachment.

How will our Design Process Change?

So the question is this: If Adobe shifts to free/cheaper online versions of Photohop and the other CS3 family (or CS9 by the time this comes to fruition), how will it affect us? Will it be completely free and advertiser driven, or come at a cost? Adobe has already dipped it’s toe in the water by adding online Express versions of some of its’ applications, but my two biggest questions are firstly, how will we deal with large file sizes, and secondly, security? Especially with the professional Photoshop user base, I think the complexity it takes to perform such tasks as Liquify or Lighting Effects would challenge the speed of todays’ broadband. If you’re anything like me, your Photoshop files can be extremely large, and the idea of relying on both a WiFi connection and a server out of my control leaves me a bit shaky.

Adobe has Adobe SHARE in beta format, which just fuels the fire that Cloud Computing is the wave of the future. Share is a free web-based service that allows you to share, publish and organize documents. You can share with a list of those you specify, or with anyone. You can host up to 1GB of documents, but not the ability to collaborate such as Adobe InCopy. Adobe does plan to include an embedded code with a Flash preview for all documents–not just PDF’s.

Possible Solutions to Online Applications

One solution to the issue of taking a monster such as Photoshop to a strictly online experience would be to break it down into segments. For example, most people that use Photoshop have “tunnel vision.”

The retoucher only uses a fraction of the tools to get their job done, the web designer uses it for laying out their site. Segregating the online version of Photoshop into the different markets, such as Photoshop: Web Design, Photoshop: Retouching, Photoshop: Special Effects might just be an answer to tackle this problem.

As a company, we at Ascend Training have recently started using BaseCamp. It’s an online project collaboration application that includes tools for those working on projects together. I will say that in a few short weeks, our work as a team has streamlined and projects are more on task. So as far as Ascend Training stepping into the online world of applications, so far so good.

While I do think that we are already on the speeding locomotive towards online applications, I do think that those of us that work with 70 MB files are very concerned about logistics. Until WiFi becomes as prevalent as electrical sockets, this future could leave us with nothing to do. While this might create more time to read a book, or have a leisurely dinner, most of those in the creative market are under deadlines and the idea of relying on an internet connection is quite daunting.