14 February 2013
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!
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:
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
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.
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.
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).
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.
Now, let’s add some introductory text within this region.
We can also quickly add a shadow to our text by clicking the “Add a Shadow” button.
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.
Do not apply these values to the other regions, these are the values that will override our base values for our text element.
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.
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.
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.
Notice that the image interferes with the text. What we would like to have happen at this screen size is that the image shrinks.
For both the 480 pixel and 320 pixel screen sizes, let’s not display the image at all.
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.
If you paste in a larger block of text, it might extend over the image.
For the smaller screens, since the phone image is no longer being shown, we can override the width of our text 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.
These elements are now contained within another
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.
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.
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.
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.