One of the challenges of modern web development is designing a responsive web site. Responsive web design (RWD) uses newer CSS techniques like media queries and fluid grids to adapt your page for various dimensions. What this means is that, instead of designing for a single screen size, we are now designing for multiple screen sizes, from smart phones to tablets to desktops. Unfortunately, many of our standard design tools were not created for this new world.

Publicly shown last year, Adobe Edge Reflow is a new tool created to fill this gap in our design workflow.

Getting Edge Reflow

If you are a Creative Cloud subscriber, you can download Preview 1 right now. If you are not, signing up for the free version of Creative Cloud will give you access to give it a try.

Just as Adobe Edge Animate was released as several previews to the public before its 1.0 release, Reflow is also being released in an early development stage. Not all the planned features have been implemented, and there might even be a bug or two. However, these early releases give the team the ability to listen to and incorporate your feedback and suggestions. So, with those words of caution, let’s dive in!

Why this Tool?

Reflow is not meant to replace Photoshop/Fireworks for design or Dreamweaver/Edge Code for development, but to provide a place to explore responsive layouts and design using standards based CSS on a web based design surface. Following the design philosophy of the Edge Tools, it is intended to be lightweight and focused on a primary task. Reflow currently supports three basic elements: a box (AKA an HTML div), a text element, and an image. As of this preview release, Reflow does not support opening existing HTML documents.

Understanding the Interface

Reflow’s interface is divided into two basic regions, the design canvas and the property inspector. Let’s look at the design canvas first. By default, this region is divided into 12 columns, matching the current trend of many responsive design frameworks. To adjust the width of the design area, you can drag the handle located along the right side. This will proportionally scale the width of the columns, along with any content that we have added.

Figure 1. Edge Reflow

Along the top of the design canvas is a pixel ruler below the ‘media queries bar’. The Media Query Bar, allows us to visually see where each of our media query breakpoints are. We will explore this feature in depth later in this article.

Figure 2. Media Query bar

Beneath the design canvas is the Canvas Bar. This bar will show you the element path of the selected item. Once we have started adding content, and setting various property values at different media query setting, we can quickly inspect its CSS using the <> button. You can access the elements panel by clicking on the icon at the start of the element path. This allows you the ability to quickly view the complete structure of the project, as well as the ability to toggle the visibility of an element. The Canvas Bar also contains an alignment panel and the page zoom controls.

Figure 3. Canvas Bar

Next to the design canvas is the property inspector. This is where you will be able to adjust the layout and styling parameters for each element, and the container itself. Above the property inspector are the three design elements that are available to Reflow (i.e. box, text box and image) and the selection tool.

Figure 4. Property Inspector Panel

Defining our Media Queries

Before we add any content, let’s define our various media queries for our design. Following Luke Wroblewski’s Mobile First pattern (http://www.abookapart.com/products/mobile-first), we will first define the width for a smartphone. Drag the design canvas so that it is 320 pixels wide. Don’t worry if you can’t get the width perfect, we can adjust that shortly. To add your media query, click the Add Media Query button located to the right of the ruler. You will now see a purple colored bar along the top of the ruler, running from 0 to where the left edge of the right side of the design surface. The chevron pattern on the bar is used to indicate whether the media query is based on the maximum or minimum screen width. By default, the media query’s orientation is defined as a maximum value, providing a desktop first approach. You will now also see the exact pixel value that will trigger this media query, so, if you did not position the region at 320 pixels, you can drag the pin to precisely where you want or edit it in the popover. In addition, you can add a display label. To do this, click and hold on the Add Media Query Button. This will allow you to edit the pixel value of the media query, the directional rule, and give it a label. Take a moment, and define additional media queries for a 480 pixel width screen, a 768 pixel width screen, and a 1024 pixel width screen. (Note: One thing you cannot change in this version is the color that each region uses.)

Figure 5. Media Query Bar set with 4 breakpoints

Adjusting our Grids

Resize your design canvas down to the 320 pixel mark. You will notice that the columns have become quite small. Let’s fix that issue.

Figure 6. Grid Options

Return to the property inspector, (make sure the content container is selected) and change the number of columns from 12 down to 4. You might notice something else occurring with the property inspector. The column value is now shaded purple to match the media query that this value is associated with. Reflow automatically color codes any attribute or setting that is specific to the currently displayed width. Feel free to change the number of columns in the other media query regions.

We are going to be laying out the basics of the home page, so let’s being by creating the hero region.

Adding Content - Boxes

Since we are going to have multiple elements creating our hero region, we need to start with the box element (AKA div). Select the Box tool and then click at the top of the page at the left of the leftmost column. Now drag out the box to the full width of the region. Currently Reflow only shows the margin left and top values while you are drawing the box. Using the property inspector, change the width to 100%. When you are editing a value you will see a dropdown arrow and another icon appear. The dropdown allows you to change the units each element uses defined (pixels, percents, ems, or auto). The other icon allows you to push that value to the default breakpoint, applying that property to every region.

Figure 7. An empty box placed on our design region

Changing the Background

Select the Styling Tab to access the background, border, shadow, and opacity properties of the selected box. We are going to define a background color and a background image to be used by this box. Reflow supports all three web color models: RGBa, Hex, and HSLa. Set our background color to RGB(44,122,176).

Figure 8. Background color picker

Next, select the Add Image Layer Button. This will bring up the setting controls for a background image. We can set the positioning, scaling, repeating, and attachment, as well as the image itself. (you can drag an image onto the popover or click it to bring up the file select dialog) From the demo folder, select featured-bg.jpg. Reflow will automatically copy your image to an img directory within an assets folder next to the saved Reflow project file. Let’s make a few other adjustments to our image properties: change the horizontal positioning to center (or 50%), the vertical positioning to top (or 0%), and the repeat property to No Repeat.

Figure 9. Background image popover

Adding Content – Text

Now, let’s add some introductory text within this region. But first, make sure the page is at the 320 pixelbreakpoint. Select the Text tool, and place it 15 pixels from the top and aligned to the second column.

Change the default text to be “Making Conferences Usable”. Switch to the Styling tab. Since Reflow is a part of the Edge suite of tools, it has Edge Web Font support built in. Click the Typeface button to display the Edge Web Font panel. Select Lustria from the serif section and then click the “Apply Property To All Regions” button. Next, change the text color from black to white, again making sure to click the “Apply Property To All Regions” button. We will ignore the size values for the moment. Let’s change the weight of the font to 700 (according to the CSS spec, a weight of 700 is the same as bold while a normal weight is defined as 400).

Figure 10. Adobe Edge Fonts popover

We can also quickly add a shadow to our text by clicking the “Add a Shadow” button. Set the horizontal offset to be 1 pixel, and the vertical offset to be 2 pixels. Adjust the color to be RGB(44,122,176). Finally, set blur to 2 pixels. Now the text may appear grey in the region, but it will be displayed properly in the browser.

Figure 11. CSS Shadow popover

Take a moment to try resizing the page to each of the breakpoints. Our text is not displaying very well, is it? Here is where the power of Reflow shines.

Set the page to the 480 pixel breakpoint. Now, adjust the following properties of the text element:

Size: 100%

Height: auto

Left Margin: 0%

Alignment: Center

Size: 2em

Do not apply these values to the other regions, these are the values that will override our base values for our text element.

Now set the page to the 320 pixel breakpoint and make these setting changes:

Size: 100%

Height: auto

Left Margin: 0%

Alignment: Center

For the 768 pixel breakpoint:

Size: 48.85%

Height: Auto

Left margin: 12.75%

Alignment: Left

For the 1024 pixel breakpoint:

Size: 48.83%

Height: Auto

Left margin: 10.21%

Alignment: Left

Finally, for the Default size:

Size: 40.29%

For the wider screen, we change the text alignment from center back to left, and provide a bit more offset to text as well.

Using the Element Tree

In the Canvas bar is the element tree control. This control shows the hierarchical path of the selected element. In addition to being able to quickly navigate to other elements within the path simply by clicking on them, you can also inspect the media query rules for the selected element by clicking on the <> icon.

Figure 12. Element’s Media Query CSS

This panel allows you to see all the properties that each media query will set. You can copy all of them to the clipboard, or just the specific rule set you might need.

Using the Elements Panel

To the left of the element tree is the elements panel. This panel allows you view the entire DOM, its’ hierarchy and control its’ visibility by clicking on the eye icon.

Figure 13. DOM tree popover

This a powerful tool to let you see the structure of your project.

Adding Content-Images

Let’s add an image to our hero region. Set the design space back to the default width. This will give us more space to properly position our image. Select the image tool, then navigate to hilightedApp-1.png in the demo folder. You can now position the image to the location you want on the page. Since we want this within our hero region, we need to make sure we see the blue glow along the border of the box telling us that the image will be added within that container and not outside. I placed it 15 pixels from the top, and along the third column from the right.

Figure 14. Placed image on the design region

One of the first properties to change is the float to right. In doing so, Reflow will automatically change the margin values to reflect our new float direction.

Now resize the design canvas to the 768 pixel breakpoint, you will see the image interferes with the text. What we would like to have happen at this screen size is that the image shrinks. So in the size property of the image, change the value to 25% for this region.

For both the 480 pixel and 320 pixel screen sizes, let’s not display the image at all. In the Advanced pane, change the Display option from Block to None. You will still see the outline of the element in the design canvas, but the element will not be visible. Now we have a responsive image within our hero element.

Grouping Elements

Another feature in Reflow is the ability to group elements together. This becomes very useful as your design grows and you need a collection of elements to respond in a similar manner.

Again, set the design canvas to the default size, and add a new text element under the tag line. If you paste in a larger block of text, it might extend over the image. Change the size of the text element to 50%. Now make the left margin the same as the tag lines. You will need to do this for each region. Then go ahead and adjust the font face the text color, and other visual properties you want.

For the smaller screens, since the phone image is no longer being shown, we can override the width of our text element. Set the size back to 100% for the 320 pixel region, then add 10 pixels of padding to the right, bottom and left of the element.

Now you might have noticed while you were resizing that the positioning of the phone image was not what we expected in our larger regions. To solve this issue, let’s group the tag line and the other text together, so they will be within the same container. Select both text elements and select Edit > Group (or command/control-G). These elements will now be contained within another div.

You might need to readjust some margins and widths for the 480 pixel and 320 pixel regions. If you need to realign some elements, remember there is a align panel in the Canvas bar.

Figure 15. Align and Resize popover

Previewing your Work

Although we have been seeing the results of our efforts in the design canvas, what we really need to see is how it works in an actual browser. Select View > Preview in Chrome to open your project in Google Chrome. Since this is still a preview release, we will be cautioned that this is not production quality code. Click Ok, and Chrome will now open with your design. You can also use the Edge Inspect button to broadcast to your mobile devices. If you are not familiar with Edge Inspect, you can refer to this article on the ADC.

Figure 16. Edge Inspect popover

Currently, Reflow does not support the exporting of the complete HTML and CSS it generates. However, once you Preview your project, you can use the Chrome developer tools to view the HTML and CSS. Reflow creates three files: an index.html, boilerpate.css, and reflow.css.

Index.html contains the markup of our design Boilerplate.css is a version of the popular HMLT5 Boilerplate (http://html5boilerplate.com/) Reflow.css contains the custom CSS that we have generated, and the grid system(s) we may have

used.

You can copy any of the generated code into your project but keep in mind that, as mentioned before, this is still a preview release and you may encounter some issues.

What’s next?

Experiment, play, create with Edge Reflow. If you have feedback, you should report back and help drive the future direction of the product. Provide feedback to @Reflow, and feel free to talk about things that don’t work for you. Finally, know that it is early the development process and the Reflow team are iterating quickly.