Responsive Web Design Using Edge Reflow – Video Series

By Piotr Walczyszyn

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.

Intro

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.

Styling Elements

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.