Recently, Adobe released a new preview version of Edge Reflow CC which is available with a free Creative Cloud subscription. Edge Reflow allows you to easily and visually build responsive designs using a resizable design surface and media query breakpoints. If you are interested in learning how to use Edge Reflow, I recorded a series of five video tutorials that will guide you through your first steps with this awesome tool. Over the course of the series, we’ll walk through building a full sample responsive design and test it in the browser and on devices.
Before beginning, you can download the entire sample project with a step-by-step workbook here.
In this introductory episode, I cover the basics of Adobe Edge Reflow as well as how to navigate the interface of the tool. I’ll also briefly preview the project that we will build and test over the next four videos in the series.
Defining the Layout
In this episide I’ll walk through defining the layout for our sample responsive design project. You’ll see how to use the options provided by Reflow to get a pixel perfect layout.
In episode three, I go over the styling capabilities of Adobe Edge Reflow. In addition, we’ll see how Edge Web Fonts integration allows you to choose from a variety of web fonts.
Make the Layout Responsive
In this episode, I finally get to the most essential part of Reflow, which is how to make your layout responsive. I’ll cover how to use a “design first” methodology, whereby we add breakpoints wherever they are needed by our design rather than use common device size breakpoints.
Testing the Layout
In the final episode I discuss techniques for testing your design on different devices using both the Edge Inspect and Responsive Inspector tools.
Modern Web Newsletter
Subscribe to receive the Modern Web tutorials, sent out every second Wednesday.