A new tool for designing Responsive Web Design websites

My dear reader please welcome the first public preview of a new tool for designing Responsive Web Design websites called Edge Reflow (part of the Creative Cloud offering). While many of you might have seen this tool presented at one of the Create The Web events we’ve been doing for the past four months, this release marks the first time anyone can actually download the tool and give it a try.

edge_reflow_mn

Before doing this I just want to add that this preview has some work ahead before it will get a 1.0 status. This is a good thing because we can work together and make sure that the final product will actually help you build better websites – your feedback is valuable and it will be taken seriously.

What is Responsive Web Design?

If you know what RWD is then just feel free to skip to the next section. The Responsive Web Design movement was started by Ethan Marcotte back in 2010 (you should read his article and book on this topic).

A website designed using RWD principles/techniques will adapt to the device screen and potentially change its layout/appearance based on the screen resolution in order to offer the best user experience. This means that it can go from a three-column format (for desktop) to a one-column format (for mobile phones) and it can do this without relying on server side detection and serving different pages to different clients.

The three “secret ingredients” of RWD are: fluid grids, flexible images, and media queries. Using RWD technique you can build a website that offers a great experience on any device:

edge_reflow_concept

Why Edge Reflow

Last year I’ve spent a great deal of time attending sessions on Responsive Web Design and talking to people who use this. I’ve seen one pattern over and over again: while everyone is doing RWD each group has their own workflow.

Some people use a pen and piece of paper to design a new website. Others use Photoshop to design the website for one or two different resolutions and then they extrapolate for the rest of resolutions. There are people who use CSS/HTML and a browser/text editor to design a RWD website.

Now these are all great workflows and they clearly work as they were used by acclaimed designers/web agencies to produce great websites.  So I am not saying that these are not good. I am just saying that there must be a place for a tool that it is built from the ground up to support the design process for modern websites – a tool that it is not build around an image  processing software or a text editor, but rather around the browser.

And this is exactly what Edge Reflow is. Edge Reflow is a design tool for the web built on top of CEF (Chromium Embedded Framework). This means that:

  • it is a design tool, not a code editor for websites
  • the canvas of the tool is the browser itself (well to be precise it is WebKit-based browser)
  • the building blocks for your design are just normal HTML elements (DIVs, IMGs, and Ps)
  • all the transformations you apply to these DOM elements are just CSS properties

You can immediately see that one huge benefit of Edge Reflow is that it enables you to design a website while using only the tools that are actually going to work on any modern browser (HTML and CSS). So when you set a custom font, for example,  that will be a web font.

I think that this is huge because the distance between the method used to represent the design and what you use to create the final website gets basically to zero.

Crash Course on using Edge Reflow

I guess the best way to learn something is by actually doing it. So let’s see how you can create something like the site shown in the next pictures.

Desktop version:

Desktop version

Tablet version:

reflow-3

Smartphone version:

Smartphone version

Short tour of the tool

Let’s get started by exploring very quickly the user interface of Edge Reflow. On the top-left side are the building blocks you can use to define the user experience. From left to right you’ll find the Selection tool, Box tool (this will create DIVs), Text tool (this will create Ps with text inside), and Image tool (will insert an IMG).

Toolbox

On the top-right side you’ll find a button with a “+” sign. This allows you to add a media query break point (width equal to the current width of the canvas). Once you have set break points, you can select any of them and start altering the design for that given break point. As you would expect, the changes will be applied only for that breakpoint. In the screenshot below you can see the different breakpoints I set for my project.

reflow-toolbar-2

On the left side are the Layout and Styling panels plus the Grid Options control (it allows you to customize the grid). From these panels you can alter the CSS properties for the currently selected element on the Canvas – you can set things like background image or color for boxes, font family/size/web fonts for text, and drop shadows for boxes/text as well as size, floating, margins, and paddings properties. It is important to understand that you can choose what units you want to use for these properties – you can use pixels, ems, or percentage based values.

Layout/Styling panels

The main area is taken by the Canvas – this is where you are going to design your website.

The Canvas

Finally, at the bottom left is the Elements Panel (you can quickly see the DOM structure of your project and hide/show different parts of the design) and at the bottom right is a Zoom control (this allows you to change the zoom of the page so you can simulate a bigger canvas than your screen resolution, for example).

Botom-side controls

Step 1: Setting the general layout of your new project

Start a new project in Reflow and select the Container box either using the Elements Panel (located at the bottom-left) or by clicking on the central area of your canvas (where you should see a grid). The Container is the top DOM element, the DIV that will hold the rest of your design. Make sure the Columns value is set to 12, Size is set to 90%, and the Float property is set to Center – this is the third icon. Note that both Size and Float are part of the Layout panel). If you switch to the Style panel you can also change the background color to light gray.

r-1

Next, I set a background image for the Body element – just select the Body element from the Elements panel and then click on the Style panel and click on the first icon (Add Image Layer) under the Backgrounds sections. Then select the image you want to use and set the Repeat option to X and Y if you want it to be used as tile.

r2

Save the project. It should look something like this:

r3

Step 2: Creating the header part – the logo

It is time to add some content to our project. I will start adding the logo. I chose to work with an image but you could also use the Text tool to add some text. First, I will add a new box (using the Box tool) inside the Container. Position the box at the top of the Container, set the width to 100% and the height to 75px.

r5

Next, I will add the logo image by selecting the Image tool, choosing the logo pic, and clicking on the box I’ve just added. The next step is to set the size properties for the image. In my case I want to limit the height of the image so it stays in the logo box (the image I used is bigger than the box that will hold it) so I will set the Size width to auto, height to 100%, min width to 200 pixels and min height to 40 pixels.

r4

Save the project and move to the next item from our menu which is … the menu :)

Step 3: Creating the header part – the menu

Using the Box tool I will add a new box positioned right under the logo’s box. Set the width of the box to 100% and the height to auto. Then go to the Styling panel and set the Background color to black and the Opacity level to about 0.6. And inside this box I will add another box that is centered (select the third option from the Float setting). Set the width to approximatily 80% and the height to 50 pixels.

r6

Now let’s create the first menu item. Using the Box tool add a new box inside the centered box you’ve just added and set its width to 25%, height to 100%, Float to left, and make sure all the margin values are set to 0 pixels. Next, select the Text tool and click inside the box and type in Home. Position the text on the vertical axis so it is in the middle and select the Center version for the Float setting. Finally let’s change the font family, font color, font size, set a drop shadow, and change the text align property. With this text selected choose the Styling panel and set the properties as in this image:

r7

Next, with the box where the text was added selected, duplicate this box (press Ctrl/Cmd + D or chose Duplicate from the Edit menu) and then click inside the centered box where you already have added the first menu item. Do this three times so you end up with four menu items. Those four menu items should be on the same line – to achieve this you should pay attention that the margins are set to 0, and the float is set to left. The last task is to change the text on these new menu items – just double click on each text element and change it.

r8

Step 4: Creating the header part – the hero unit

Under the menu let’s create a hero unit. First, add another box under the menu and set the width to 100% and the height to 340 pixels. Go to the Styling panel and add a background image, and then set Scaling to cover and Repeat to No Repeat.

Grab the Text tool and add a title inside this box. Set it to be centered (Float setting, the third item), set the width to 90% and position it at the bottom. Next, go to the Styling panel and set the font color to white, set the size to 3 em, the font family to Doppio One, and add a shadow.

r9

Step 5: Creating the main content area

Let’s add three blocks that will represent the main content area. These blocks will be added to a new box that we position under the Hero unit and set the width to 100%. We will use the grid system to align them nicely. They will be floated to left and render on the same line with the first one taking 6 columns and the other two taking 3 columns each. You can play with border color/border radius, background color, and shadow to make them stand out a bit.

r10

Next you can add to each box some content – title, images, and text.

Step 6: Changing the design for different screen resolutions

Now that we have built something that looks like the home page of a website, let’s see how we can use the tool to alter this design for mobile and tablet. Basically what we have now is the desktop design. And if you shrink the canvas size to let’s say 600 pixels this is what you get:

r11

This is clearly not pretty. So let’s add the first breakpoint for a width of 900 pixels. So grab the right handler of the canvas and drag it to left until you hit 900ish pixels. Then press on the “+” button from the top-right side of the tool. You should see a new breakpoint represented by a bright color above the top ruler.

One design change we can do for this screen resolution is to change the layout of the main content from three columns to something like one column for the first block and two columns for the other two blocks. The easiest way is to select the first block and set its width to 100%. This change should push the other two columns below. Then grab and increase the size of the two smaller columns to take the whole width of the container and make them even. You should get something like this:

r12

Now, if you grab the canvas handler and increase the width of the page you will notice how the original design is restored. This is the power of media queries in action :)

Lastly, you can add another breakpoint for 750 pixels. This could accommodate a large array of devices, from a portrait-held iPad to the smaller smartphone screens. For this resolution you might want to change the design more dramatically:

  • Change the menu from a horizontal to a vertical layout – you can select all four menu items and set the Float value from Left to Center
  • Change the font size (make it bigger) for menu items, titles, and paragraphs
  • Arrange the three boxes with content in a single column layout

Here is the new layout for smaller screens:

r13

What I’ve shown you here is probably the most basic tutorial one can write. As you have seen (if you tried to follow me) the possibilities are basically endless and you can choose a different path from what I showed you here. So make sure you explore other options.

What else can you do in Reflow?

You are probably asking “OK, I have a design now. What can I do with it?”. There are a number of things you can do.

You can pick up any element from the design and see the CSS that was generated and export that CSS (select the element you are interested in and then click the angled brackets from the Elements Panel):

r14

Another thing you can do is to preview the design in a Chrome browser (this feature is experimental; this means that the code that is generated will be better and more semantic in the coming sprints). From the View menu choose Preview in Chrome.

Another cool feature is pushing the design via Edge Inspect to your connected mobile devices. All you have to do is to make sure:

  1. You have the latest version of Edge Inspect (you can download it from Creative Cloud)
  2. Start Edge Inspect and connect your mobile devices and computer to the same Wi-Fi
  3. Disable the Edge Inspect Synchronized Browsing in Chrome and turn on the Edge Inspect feature in Reflow (top-right corner of the tool, the icon with mobile devices):

r15

Where to get it

If I managed to raise your interest for this tool then you should know that all you have to do is to go and sign up for a Creative Cloud Membership (there is a free tier and a paid one, both give you access to Reflow) and then you will be able to download the tool.

creativecloud

Conclusions

I hope that you will find Edge Reflow a promising tool and something you’d want to have in your toolbox as designer/developer who works on modern web sites.

And if you find something that you think is not good enough or is just broken then by all means join our forum and send us your feedback. This is your chance to influence the product and make sure that by the time it reaches 1.0 it will be the best possible tool. You should know that this is how we built Edge Animate 1.0, together with you – the community. So let’s do it again!

In the end I want to congratulate Reflow team for what they have done in such a short period of time. Keep the great features coming, guys! You can read the team’s post about this first preview here.

PS If you build something or just want to share quickly some feedback you can always send me an email or drop a comment here.

One thought on “A new tool for designing Responsive Web Design websites

  1. Pingback: RWD: Responsive Web Design | SNOOWS

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>