Responsive Design Made Easy

The Problem
As any designer not living under a rock the last year can tell you “responsive design” is the latest buzz word to take the industry by storm. While I believe that responsive design is a great and necessary thing, the problem pops up when a front end developer (that’s me) needs to incorporate this new technology into his current work flow. How can we take advantage of various screen sizes without devoting too much time and resources to study and trial-by-error?

The Solution
In an effort to become well versed in responsive design the Digital Brand Experience Team experimented with following three solutions:

1. A free software download that allows the user to set template parameters using an online tool and then exports out HTML/CSS that can be modified and tweaked in your favorite HTML editor.

2. Use a paid software from an industry giant that closely mimics existing design software that designers use day in and day out.

3. Writing the code from scratch using online guides and templates to get a base level of knowledge to hopefully expedite the learning/implementation process.

So, with that being said, today we are going to discuss option two. Since the Digital Brand Experience Team currently uses Adobe software through the Creative Cloud we were all curious/excited to give Adobes new preview software, Adobe Edge Reflow, a try.

Adobe Edge Reflow performs like 99% of the other Adobe products and is very easy to pick up if you have used Fireworks, Illustrator or InDesign for any length of time. I will give a brief overview on how the software works – if there is interest in going into more depth in a future blog post, let us know in the comments.

final screenFLAT

Edge Reflow is set up with your main canvas and a single toolbar to the left. All of our actions/settings can be controlled from this minimal view. There are four features that I would like to point out:

1. Four main selectors that allow you to select objects, create shapes, text, and graphics.

2. When one of these tools is selected the panel below changes to reflect different options and settings.

3. Canvas with a column grid and gutter width set to your liking.

4. The “plus” button is what allows you to set different break points for when your design will re-factor based on different screen sizes.

Since we all have a basic understanding of design software and how Adobe products behave, lets jump to a mock up already laid out in Edge Reflow.

final wide layoutFLAT

As you can see I laid out a very basic grid structure just for the sake of argument. Now for the fun part and where I think that Edge Reflow really shines. Easily manipulating the content on a smaller screen.

So, first, we are going to click the “plus” button in the top right corner (to set our break point). Once the button is pressed the entire bar lights up and you can drag the arrow to the width that you need. We are going to set ours to 320px for the iPhone.

final small width bad layoutFLAT

Now from the screenshot above you can see that this caused my layout to get a little squirrely. No need to freak out, adjusting this layout is as simple as setting up the the initial layout. You just need to resize and reorganize.

So, to fix this layout we are going to do a few things:

1. Change our column structure from 6 down to 1.

2. Reduce the top/bottom margin around the logo since we have less area to work with on mobile.

3. Reorient our main navigation and make the button size larger to account for tapping.

4. Reduce the size of our main banner graphic.

5. Adjust the body copy and right hand rail.

final small width good layoutFLAT

I wish you could have seen that in real-time, as it only took me 10-15 minutes to re-organize that layout.

Now that we have this done, how do we get the HTML/CSS exported so we can upload it to its final destination? Ah, you have found the main weak spot of Edge Reflow. I cannot figure out a way to export the code – which to me is a major stumbling block. The best I can figure is that under “view > preview in chrome” you can see the page in the browser. At that point you can view source and cut & paste the code out of the browser and into the HTML editor of your choice.

The Verdict
Edge Reflow is a very powerful tool that is very easy to pick up for any designer with a working knowledge of other Adobe products. You do not need any HTML/CSS experience and can do the entire layout through the visual interface. It is a great product for front end developers that are just getting their feet wet in the responsive design arena.

That being said I do have a few cons to point out:

1. Exporting HTML: Adobe really needs to come up with an “Export to Dreamweaver” feature. To me this is a no brainer and should have been included even in the preview release.

2. Editing someone else’s code: For me, it is not time efficient to make edits to someone else’s code. I always have problems finding a specific style or the main site structure is not laid out the way I would do it.

Final Thoughts: I am going to reserve this tool for quick prototyping when I need to show a rough responsive design to a client. Using this tool I can get the work done in an afternoon and be able to show the client a visual of what their site will look like on both a desktop and mobile screen. Today, I do not feel comfortable writing final website code with Edge Reflow—I will reserve that for writing the code from scratch.

Ben Vance
Senior Web Designer