17 June 2013
This article assumes knowledge of HTML and CSS (specifically media queries).
Web designers today face many new challenges during the course of a project. In particular, ensuring that their designs work across a changing array of devices. A popular approach is what's called responsive designs. Using techniques like CSS layout and media queries are the first steps in solving this challenge, however, it's not a very visual or creative process. This is one of the primary reasons we are creating Edge Reflow, the next-generation of web design tool.
Edge Reflow is still in the early days of existence, but has aspirations of fundamentally changing the web design workflow. To do this, Adobe is changing the way we approach creating software. For starters we want to be very open and transparent about what we're creating and why. More importantly we want to hear from you our early users, to tell us what you want in a new next-generation design tool.
Today, Edge Reflow is focused on solving the core challenges of responsive design and giving you the means to communicate your "responsive intent" to project stakeholders or developers on the project. Edge Reflow is not a WYSIWYG, but a design tool that creates responsive comps. We will continue to evolve, providing more seamless integrations with other tools in the design and development process, such as Photoshop, Illustrator and Edge Code.
Let's take a look at some of the features and workflows that Edge Reflow CC offers.
To get Edge Reflow, you need a free or paid Creative Cloud subscription. Go directly to Adobe's Creative Cloud to download and install Edge Reflow through the Creative Cloud desktop application. Edge Reflow frequently updates, so make sure to grab the latest version from the Creative Cloud when Edge Reflow notifies you of an update.
Edge Reflow is still in (early) preview. We're extremely interested in your feedback! If you run into issues, or any other thoughts on missing or existing features, please send them our way.
Log Issues: Edge Reflow's GitHub Issues
Ask Questions or provide feedback: Edge Reflow Forums
This guide provides you with a sample project that I will use as a reference in various sections of this article.
When beginning design process, you must make the important decision to design for mobile or desktop first. This decision will dictate what type of media queries to use, minimum or maximum media queries. By default, Edge Reflow uses maximum media queries and a desktop first approach. To change to mobile first, use minimums, defined in the media query manager panel. To show the panel, press and hold the button at the right of the media query ruler. Click on the button 'Minimum' to use minimum media queries.
In addition to setting what type of media queries to use in your project, this panel allows you to name, define and manage all of your media query breakpoints. In case you're not familiar with media queries, media queries are like conditional logic for CSS in browsers. It's a way of defining changes based on different parameters, like width or orientation. If you're interested in using Edge Reflow, but need a better understanding of media queries, I urge you to do some research before going much further.
There are thousands of screen resolutions to support around the world and more arriving in the market every month. It's impossible to keep up with testing your design on all of these devices. Instead, create your design first without any worries about specific devices it will support. Using Reflow, you can test that your design will work at any screen size using the resizable canvas.
As you begin a project in Reflow, you should be introduced to the primary parts of the application which I will refer to throughout this article.
The ruler at the top of the Edge Reflow design surface helps to determine the current width of the design surface. Dragging the canvas handle can make the canvas larger or smaller and will help you see how your design looks at 899, 1223, 982, 433 or any other screen size.
Later in this guide, we will talk about how to create media query breakpoints and adjust your design where it breaks.
Once you have decided to design for mobile or desktop first, you will need to specify the properties of your grid. To change your grid settings in Edge Reflow, make sure that you have the primary container selected. At the bottom of your canvas, you should see:
Now, find the "Grid Options" pane in the "Layout" tab. The "Grid Options" pane allows you to specify the number of columns to use, gutter sizes, option to show outer gutters and an opacity setting. These settings can and should be adjusted for all breakpoints you create in your design. For the sample project in this guide, we have used the default settings of 12 columns.
As you begin to place, move or resize objects on the Edge Reflow design surface, the elements will snap to the grid. You have the option to turn off the snapping in: View -> Snapping -> Snap to Grid.
After defining a grid, you will want to specify any document level styles. These include the default font styles and background styles. To define these styles in Edge Reflow, ensure that you have the "Body" selected by clicking the text "Body" in the DOM bar. Your DOM bar should look like this:
The "Styling" tab defines styles like base typography and background styles. The value of base typography is what defines 1em, a relative sizing unit used in web design. This value can also be changed between breakpoints and affect the sizing of any em based elements. In the sample project, we defined a base font of "Source Sans Pro" which is an Edge Web Font. Edge Reflow currently supports adding Edge Web Fonts or Typekit fonts to your projects.
There are four primary tools used when designing a responsive site in Reflow. These four tools include the selection, box, text and image tools. The tools bar is located at the top left of the application window.
Select the box, text or image tools to begin placing your design on the Edge Reflow canvas.
When beginning a new project in Reflow, there will be two elements available to you, the Body and a Container. I will often refer to this initial container as the "primary container". Any element you add to the canvas will be a child of this primary container.
Boxes, text and images placed on the design surface can be manipulated via dragging, resizing or by changing properties in the "Layout" tab. All input values in the property inspector will allow you to edit a value and the unit type used, such as pixels, ems and percents.
By default, elements on the canvas are position:static and float:left. You can change these layout properties in the "Advanced" pane of the "Layout" tab. If you choose to use absolute or fixed positioned items, you will also have options to change z-index in the "Advanced" layout pane.
You can place boxes, text or images in the primary container, or as children of other boxes. As you move a box around, margin visualizations appear showing the relative position of the element on the canvas. If you hover a box over another box, you will see a brighter blue highlight to indicate that dropping the box there will make the highlighted box a parent of the one you dropped.
Resizing boxes may move other elements in your layout. These movements are determined by the css layout properties set on the other elements. For example, if all the boxes are float left, they will push each other out of the way as they get resized larger.
As you begin to lay elements on the canvas, you might want to "group" elements or give a set of elements a parent to inherit properties from.
To add a parent, select any number of elements on the canvas, then, choose: Edit -> Add Parent. This option will be disabled if your selected elements cannot share a parent. You can also remove a parent, by choosing Edit -> Remove Parent.
When boxes have children, the children are selectable by default. However, there are occasions when you will no longer want to manipulate children of a box. In this case, you will want to "group" these items. Select the parent box and choose Edit -> Group. You should see a group icon displayed in the DOM bar.
You can also group or ungroup elements using the status bar by clicking on the icon next to the element name. Clicking this icon or the box icon will toggle the element between between the box and group behavior.
Styling is one of the key steps in creating your responsive comp. This is done in the "Styling" tab of the property inspector. Styling options include adding borders, backgrounds, shadows and custom fonts. The styles on this tab view will change depending on the type of element you have selected. For example, if you have a text element selected, you should see a "Typography" pane at the top of the view that is not available if you had a box selected.
Edge Reflow is helping to streamline the design workflow by enabling you to "Copy Visual Styles" from one element to any number of selected elements. To do this, select an element you've styled, choose the menu item: Edit -> Copy Visual Styles.
Select one or more other elements and choose: Edit -> Paste Visual Styles.
Text elements have two different modes that you will be working with. When you first place text on the canvas, the actual characters will be highlighted.
This means that you are in editing mode. In editing mode, you can modify the characters in the text field or style individual words of the text block. To style specific text, select the desired text and make changes in the "Styling" tab. You will notice that backgrounds, shadows and borders are not available when styling specific text. For every substring of styled text, Edge Reflow is creating a <span> inside of a paragraph element. Here is an example where a span was added in a text element.
If you want to style an entire text element, rather than just a portion of that text, ensure that you are not in editing mode and the text block is selected. In this mode, you should see a text element's resize handles. No characters should be highlighted.
When styling text elements, you are defining various CSS properties on the paragraph tag. Edge Reflow gives you the options to change various typography properties, add backgrounds, borders and shadows to text.
To add a Typekit or Edge Web Font to your project, select a text element and go to the "Styling" tab. Click on the icon under the Typography pane. This will bring up the fonts dialog with two tabs. In the first tab, you have the capability to add any Edge Web Fonts to your project.
The default display is filtering for Sans-Serif fonts. Click on any of the buttons on the left hand column to modify your filters. To add a font to your project, click on the thumbnail. A blue checkbox will appear at the top right of the thumbnail to indicate that a font has been added to your project.
Once, you have chosen fonts to add, these fonts will be available at the top of the Typeface dropdown. You can remove fonts from your project by clicking on the thumbnail again to uncheck a font.
The second "Custom" tab on this popup dialog allows you to add Typekit fonts to your project. To do this, add the seven character kit id to the input field. For directions on finding the kit id, hover over the icon in the dialog.
Again, once a kit is provided, the fonts available in that kit will be added to the top of the Typeface dropdown.
Edge Reflow supports adding jpg, gif, png and svg elements to your canvas. Clicking on the image button will bring up a file dialog where you can choose an image file to add. Like boxes and text, you can place an image anywhere on the canvas. After placement, you can resize the image smaller, but not larger, than the original image via dragging. If you want to size the image larger than its original size, you can do this through the property inspector.
SVG elements can be sized bigger or smaller than their original size.
In the "Styling" tab of the property inspector, you can change the source of the image, add borders, shadows or modify its opacity.
Multiple background layers can be added to any box element. These layers can include background colors, background images or background gradients. To add a background image, go to Styling tab and click on the first button in the "Backgrounds" pane. This will bring up a popup where you can select the source of the background image and set its properties like position, scaling, repeat and attach.
You can add several background images, colors or gradients to a box. These can be reordered or deleted. To reorder background layers, use the gripper on the left of the layer and drag it up or down.
To delete a background layer, hover over the layer. You should see an "x" on the right side of the layer. Click on this to delete a background layer.
All images added to your project will be copied into an "assets/img" directory in your Reflow project folder. Any image assets in this directory will be viewable in the "Assets Panel". To view the assets panel, click on the icon at the right column of Edge Reflow.
The assets panel shows you all of assets in your project, their usage count, an icon to replace the image with another and the ability to delete an asset from the project. Deleting an asset or replacing it is an undoable action in Edge Reflow.
The asset panel will also notify you if an asset has been modified outside of Edge Reflow. In this situation, the icon will look like this:
When you open the asset panel, the modified assets will have a refresh icon Clicking this icon will refresh the asset with the modified version.
Edge Reflow does not automatically refresh modified assets on your canvas because these changes could be very disruptive to your design. We want you to explicitly accept the changed assets.
You can duplicate elements on the canvas by selecting any element and going to Edit -> Duplicate (Cmd/Cntl + D). This will attach the duplicated item to your cursor for placement on the canvas. Reflow does not currently support a classic copy/paste, due to layout and CSS complications, but is something we are actively investigating.
There are several ways to select items on the Edge Reflow canvas. These include:
Once you have multiple elements selected, you can nudge these elements up, down, right or left using your keyboard's arrow keys. You cannot drag multiple elements around the canvas. You can also modify styles in the properties inspector for multiple elements.
When you have a single selection, you can see what is selected in the DOM bar:
Here, we can see that a text element is selected along with that element's DOM hierarchy. If multiple items are selected, the DOM bar shows nothing. You can click on any element name in the DOM bar to select that element on the canvas.
There are also some available shortcuts to navigate elements on your canvas:
View the DOM hierarchy of your design by clicking the icon on the left of the DOM Bar. This action will bring up the elements panel.
From the elements panel, you can select items on the canvas, hide/show elements using the icon, rename elements and reorder elements.
The default labels in the DOM bar and Elements panel are editable. Simply double-click on the name and rename your element. This name elements will cause that name to appear in the HTML and CSS created in the browser preview.
As you continue to add elements to your canvas, there will likely be times when you want to size or align the elements to match other elements. Edge Reflow offers align options you are probably familiar with in other Adobe design tools. The align panel icon is located in the lower right portion of the screen and will be enabled when two or more elements are selected and have the ability to be aligned. Clicking on this button will display options to align the selected elements by their left, center, right, top, middle or bottom.
In addition you can use the align panel for matching the size of elements or for spacing elements equally apart vertically or horizontally.
Once you have created the initial design in Reflow, it's time to make a truly responsive comp. Using the resizable canvas handle, you should drag and resize the design canvas bigger and smaller. With each resize, you can begin to see sizes where your design will break down. Once you hit a size where the design breaks, move the canvas back to the last known good size and add a breakpoint. Clicking the icon will add a new media query marker to the ruler above the design surface. Any change you make will be specific to this new media query. As you change your design at this size, specific CSS styles for this region will be highlighted in the properties inspector as a matching color to the current region's color.
In addition to clicking the button to create breakpoints, you can double click on the ruler at the top of the canvas to create one. To delete a breakpoint, select a marker and click the button to remove. Removing and adding breakpoints are not undoable actions in Edge Reflow.
Switch back and forth between different regions by clicking on the colored region above the ruler or on the default section for the default region.
On some occasions, you will make changes to styles in a custom region that you want to propagate to all of the other regions. In this case, hovering over that style in the property inspector will bring up a button to apply that style to all regions. Pressing that button will push that style value to the default region.
Once you have created your design on Reflow’s resizeable canvas, created breakpoints and made adjustments where the design broke, your design will be fully responsive. Your design is now ready to be displayed on any device on the market or in the future.
One of the powers of Reflow is in its ability to communicate the details of your design. Providing a Reflow comp to developers or stakeholders will enable them to view your responsive intent. You can easily inspect the CSS that describes all of the element on the design surface. To grab the CSS of an element, select the element and then click the icon in the DOM bar. This will bring up the CSS panel. The CSS in the panel describes layout and styling across every media query you've defined.
By clicking the icon at the bottom of the popover, all of the CSS for the selected element will get copied to your clipboard and can be pasted it into the code editor of your choice. This workflow provides flexibility to developers who are working on a production site, allowing them to structure their code as they see fit, without losing the original design vision. By hovering over a region's CSS, you will also see a clipboard icon that can be used to copy only the CSS for that region.
The days of pecking around Photoshop files for colors, gradients and font information are over!
Edge Reflow offers the ability for you to preview your design in Google Chrome. To do this, save your document and select the menu item: View -> Preview in Chrome. When you do this, Reflow will open Chrome allowing you to preview your design. In addition, the CSS, Boilerplate and HTML are generated in the "assets" directory of your Edge Reflow project folder.
The HTML, CSS and image assets can be easily put on any web server to share your design with people on your team or clients.
What better way to show a client how your design works responsively on various screen sizes, than by physically viewing it on devices? Reflow offers direct integration with Edge Inspect to make the sharing of designs on devices seamless. You will need Edge Inspect installed on all the devices and your desktop machine. Installers can be found on Adobe's Creative Cloud and device app stores.
To use Inspect with Edge Reflow, start Inspect on your desktop and all your devices. If you also have the Edge Inspect Chrome extension, you will want to disable the extension. Click on the icon on the top right of Edge Reflow. This will open up the Edge Inspect panel. Start Edge Inspect on a device. From the device, add a connection to Edge Reflow by specifying the IP address of your desktop. Once a device is successfully connected, you will see something like this:
Now, any changes you make on the Edge Reflow canvas will be reflected on your device, in real time! This workflow is useful during the design process and during the client review stages.
Now that you have completed this getting started guide to Edge Reflow, go forth and design responsively! We would love to hear your feedback regarding the application and how we can improve. Now, directly from inside Reflow, you can send the team your thoughts and feedback. You only need to be online and submit feedback through the dialog in the lower right corner of the app. As mentioned earlier, Reflow will be updating builds every few weeks and is moving at a breakneck speed!
Special thanks to Jacob Surber and Victor Mitnick for their contributions to this article.
Comments are currently closed as we migrate to a new commenting system. In the interim, please provide any feedback using our feedback form. Thank you for your patience.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.