Introducing Edge Reflow Preview

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

If you are a Creative Cloud subscriber, you can download the Preview right now. If you are not, sign up for the free version of Creative Cloud to get access and 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 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 (provided by the HTML div element), a text element, and an image. As of this preview release, Reflow does not support opening existing HTML documents.

The Reflow 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 (Figure 1). To adjust the width of the design area, drag the handle located along the right side. Dragging in this manner proportionally scales the width of the columns, along with any content that we have added.

Along the top of the design canvas is a pixel ruler below the Media Queries Bar.  The Media Query Bar shows each of the media query breakpoints (Figure 2). We will explore this feature in depth later in this article.

Beneath the Design Canvas is the Canvas Bar (Figure 3). This bar shows 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. 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.

Next to the Design Canvas is the Property Inspector (Figure 4). This is where you 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: box, text box, and image, as well as  the selection tool.

Before we add any content, let’s define our various media queries for our design. Following Luke Wroblewski’s Mobile First pattern, first define the width for a smartphone:

1. Drag the design canvas so that it is 320 pixels wide. Don’t worry if you can’t get the width perfect. You will  adjust that shortly.
2. To add your media query, click the Add Media Query button located to the right of the ruler. You 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. The number displayed indicates the exact pixel value that triggers this media query

3. If you did not position the region at 320 pixels, drag the pin to precisely where you want (here, 320 pixels) or edit it in the popover.
4. Add a display label by clicking and holding the Add Media Query Button. Keep the 320 pixel value for the media query, and edit the directional rule, and give it a label.
5. 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.

Resize your design canvas down to the 320 pixel mark. Notice that the columns have become quite small (Figure 6). Let’s fix that issue.

1. Return to the Property Inspector.
2. Make sure the content container is selected, and change the number of columns from 12 down to 4.

   In the property inspector, the column value is now shaded purple to match the media query associated with this value. Reflow automatically color codes any attribute or setting that is specific to the currently displayed width.

3. Feel free to change the number of columns in the other media query regions.

We are going to lay out the basics of the home page, so let’s begin by creating the "hero" region. The "hero" image refers to the main image on the page that is designed to be the biggest and most dramatic in order to catch your eye first.

Because we are going to have multiple elements creating our hero region, we need to start with the box element (as in, the HTML div element).

1. Select the Box tool and then click at the top of the page at the left of the leftmost column.

2. 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.

1. Select the Styling Tab to access the background, border, shadow, and opacity properties of the selected box.
2. 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).

3. Next, select the Add Image Layer Button. This displays the setting controls for a background image. We can set the positioning, scaling, repeating, and attachment, as well as the image itself. (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 automatically copies your image to an img directory within an assets folder at the same level as the saved Reflow project file.
4. Make a few other adjustments to the image properties. Change:
   • the horizontal positioning to center (or 50%)
   • the vertical positioning to top (or 0%)
   • the repeat property to No Repeat

Now, let’s add some introductory text within this region.

1. Make sure the page is at the 320 pixelbreakpoint.
2. Select the Text tool, and place it 15 pixels from the top and aligned to the second column.
3. Change the default text to be “Making Conferences Usable”.
4. 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.
5. Change the text color from black to white, again making sure to click the “Apply Property To All Regions” button. Ignore the size values for the moment.
6. 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.)

We can also quickly add a shadow to our text by clicking the “Add a Shadow” button.

7. Set the horizontal offset to be 1 pixel, and the vertical offset to be 2 pixels.
8. Adjust the color to be RGB(44,122,176).
9. Finally, set blur to 2 pixels.

   Now the text may appear grey in the region, but it will be displayed properly in the browser.

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.

1. 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.

2. Set the page to the 320 pixel breakpoint and make these setting changes:
   • Size: 100%
   • Height: auto
   • Left Margin: 0%
   • Alignment: Center
3. For the 768 pixel breakpoint:
   • Size: 48.85%
   • Height: Auto
   • Left margin: 12.75%
   • Alignment: Left
4. For the 1024 pixel breakpoint:
   • Size: 48.83%
   • Height: Auto
   • Left margin: 10.21%
   • Alignment: Left
5. Finally, for the Default size:
   • Size: 40.29%
6. For the wider screen, change the text alignment from center back to left, and provide a bit more offset to text as well.

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.

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.

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.

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

Let’s add an image to our hero region.

1. Set the design space back to the default width. This provides more space to properly position our image.
2. Select the image tool, then navigate to hilightedApp-1.png in the demo folder. Position the image to the location you want on the page.

   Because we want this within our hero region, make sure you see the blue glow along the border of the box that indicates the image will be added within that container and not outside.

3. Placed the image 15 pixels from the top, and along the third column from the right.

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

1. Resize the design canvas to the 768 pixel breakpoint.

   Notice that the image interferes with the text. What we would like to have happen at this screen size is that the image shrinks.

2. 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.

3. 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.

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.

1. Again, set the design canvas to the default size.
2. Add a new text element under the tag line.

   If you paste in a larger block of text, it might extend over the image.

3. Change the size of the text element to 50%.
4. Make the left margin the same as the tag lines.
5. Do so for each region.
6. 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.

7. Set the size back to 100% for the 320 pixel region. Add 10 pixels of padding to the right, bottom, and left of the element.

   While resizing the positioning, the phone image did not appear as expected in our larger regions. To solve this issue, group the tag line and the other text together, so they are within the same container.

8. Select both text elements and select Edit > Group (or command/control-G).

   These elements are now contained within another div.

9. As needed, to readjust margins and widths for the 480 pixel and 320 pixel regions.

Now we have a responsive image within our hero element.

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.

1. Select View > Preview in Chrome to open your project in Google Chrome.

   Note: This is still a preview release and Preview in Chrome is intended for sharing or communicating your design. This is not production quality code.

2. Click Ok.

   Chrome opens 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, refer to the ADC article, "Browser testing across devices with Adobe Edge Inspect."

Currently, Reflow does not support the exporting of the complete HTML and CSS it creates. To access the source, preview your project. Then, 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 HMLT5Boilerplate
  
• Reflow.css contains custom CSS, and the grid system

Copy any of the code from this Preview mode into your project.

Keep in mind that that this is not intended to be production code. This is a preview release. You may encounter some issues.

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. Feel free to talk about things that don’t work for you. Finally, know that it is early in the development process and the Reflow team is iterating quickly.