Responsive web design helps you create a single website layout that intelligently adjusts to any device, including mobile phones, tablets, gaming devices, televisions, and an ever-growing array of Internet-connected devices.
In my last article, Getting started with responsive web design, I discussed what responsive web design is and where it began, and I described some of the templates and frameworks available to help make responsive design easier for you. While responsive templates and frameworks are great, they cannot replace good tools.
Thankfully, Adobe recently released a preview of a new tool called Edge Reflow that is built specifically for creating responsive designs. In this article, I take a closer look at Edge Reflow and explain how you can begin to use it to develop responsive layouts for your websites.
Frameworks can help ease the complexity of building responsive websites, but ultimately designers and developers need tools to help them fit these techniques more easily into their workflow. Some support already exists within applications like Adobe Dreamweaver. In addition, some web-based tools also support responsive web design. However, a few months ago Adobe announced a product called Edge Reflow that helps web designers create responsive websites. A preview of Edge Reflow was initially released in February 2013 and is available via Adobe Creative Cloud. If you are a Creative Cloud member, you already have access to the Edge Reflow preview. If you are not a Creative Cloud member, you can get access by signing up for the free Creative Cloud membership level.
Edge Reflow allows you to design websites that are responsive from the start. It also helps you visually build and modify your design based on the breakpoints you set, which are defined as media queries within the CSS. Edge Reflow is built on top of a fluid grid-based layout system and allows for a customizable number of grid columns and gutter sizes. Visually designing with media queries is important because a recent article in Smashing Magazine recommends setting media-query breakpoints based on content rather than predefined screen sizes.
To see how this might work for building a simple design, I have an example based on my blog design. Let me clarify that my background is as a developer, not a designer. This fact becomes obvious when you look at my blog on a mobile device (see Figure 1), which was actually created using a responsive template as a starting point. If someone with my meager design skills can get a handle on responsive web design using Edge Reflow, then certainly the tool shows great promise.
To address my site's lack of responsiveness, I plan to re-create the blog design from scratch using Edge Reflow. Because this article uses the existing design, I'll re-create the full-size design and then use Edge Reflow to adjust the layout to support smaller screen sizes at the widths where that design begins to break down.
In this walkthrough, I show you how to rebuild my site's header, which currently flows offscreen on mobile devices. This should give you a good introduction to how Edge Reflow works. Feel free to reference Chris Griffith's excellent guide, Introducing Edge Reflow Preview, if you need help understanding the various menus and icons within the Edge Reflow interface.
You'll start with a new Edge Reflow project and accept the defaults for the primary grid options for columns and gutters. However, in the Layout tab on the left, set the layout width to 100% and all the margins of the page to 0 pixels.
The three primary elements within an Edge Reflow project are a box, which equates to an HTML div, a text box, and an image. Since the header on my site is actually made up of a div element, start by adding that. The header element stretches the full width of the window and is 150 pixels high, so draw a box element on the page and, within the Layout Options tab, set the width to 100% and the height to 150 pixels. You may also need to set the margins to 0 pixels so that the design appears flush with the top left corner of the screen.
My current site uses a background image as a gradient effect, but that can be better achieved directly via CSS. With the header div selected, click the Styling tab, and under Backgrounds, click the button to add a gradient layer. Set the top gradient color to rgb (2, 31, 85) and the bottom gradient color to rgb (194, 210, 223).
The header also uses a background image for the geometric shapes that overlay the gradient. To create this in Edge Reflow, download the header image (which is called header.png) from my website. Then add an image layer to the background of the header div by selecting header.png (see Figure 2).
Begin by choosing a text element and adding it within the header div while changing the text to remote synthesis with a line break and a few spaces in between to create the offset. In the Styling tab for the text element, choose Courier as the font. (My site actually uses a custom font from Typekit, but Courier is close enough for these purposes.) Then set the color to white or rgb (255, 255, 255) and set the size to 3em. (As discussed in my previous article, using relative measurements like ems enables your design to better adjust to differing screen sizes.) Finally, set the line height to 0.8em. In the Layout tab, set the top margin to 45 pixels and the left margin to 150 pixels.
Note: You could have used the Edge Reflow integration with Adobe Edge Web Fonts to add typography from a wide variety of free fonts. See the Chris Griffith article cited earlier for details on this feature.
At this point, you've simply re-created the header as it currently appears on a desktop browser. However, if you grab the handle to the right of the design area and adjust the size of the screen, you will notice that the header appearance breaks down somewhere around 892 pixels in width (see Figure 4). With the screen size adjusted to that point, click the Plus sign in the upper right corner to add a breakpoint. Don't worry if you don't get the exact pixel width perfect. Once the breakpoint is added, you can refine its exact width in the media queries bar at the top of the page. The nice thing about designing responsive layouts visually in this manner is that it is much easier to see where breakpoints are necessary rather than being strictly dictated by common screen sizes.
As you can see, the tagline now falls well below the header. So grab the tagline and move it so that it sits beneath the site title with a top margin about 8 pixels from the bottom of the site title and a left margin of 30% from the left side of the page. Note that these properties are now color coded in the Layout tab with the color assigned to your breakpoint, indicating that these settings apply to that specific breakpoint.
You should also adjust the number of columns in your grid because they are starting to get condensed. Select the container by either clicking it on the design canvas or by selecting Container from the list of elements on the lower right of the design canvas. In the Layout tab, drag the number of columns down to nine (see Figure 5).
If you continue to resize the screen, at about 621 pixels wide, the tagline will drop below the header again. Add another breakpoint there and then simply hide the tagline by selecting Hidden from the Visibility pull-down menu in the Layout tab. You should also drag the number of grid columns down to seven.
If you drag the screen further to about 450 pixels, you'll see that the site name seems to be leaning too far to the right. Since 480 pixels wide is the target for iPhone 4 and 5, add your breakpoint there. Then grab the site title text element and drag it to about 45 pixels from the top of the page and 15 pixels from the left.
This looks better, but now the image in the background obscures the text a bit. You can fix this by selecting the header div, going to the Styling tab, and clicking the background image (header.png). Set the background image's position property to 200 pixels from the left margin. Feel free to adjust the grid columns down to five as well (see Figure 6).
If you are curious about the CSS that Edge Reflow is creating for you, you can always view all the elements on your page and see the styles via the Canvas bar at the bottom left of the design. In Figure 7, you can see the styles with the media queries required for the tagline text element.
You now have a header that is very similar to the existing one on my site, but it will adjust for a full range of screen sizes. However, the site title and tagline are missing their drop shadows.
Regardless of which breakpoint is currently active, select the site title and open the Styling tab. In the Shadows section, click Add A Shadow. Leave the offset, margins, and blurring at their default settings. Choose Black, or rgb (0, 0, 0), as the color and then set the opacity to 60% (that is, 0.6). After creating the shadow, hover over the shadow element in the Styling tab and you'll notice a button appear to the right. Click this button and it will apply the changes you just made to all the regions created by your breakpoints. Repeat this process for the tagline.
Now that you’ve completed the header, you need to test it. Of course, you can always test it on the desktop in Google Chrome by choosing View > Preview (or pressing F12). Adjusting the width of your Chrome window will give you some sense of how your layout will look on different screens, but testing it on a variety of devices is even better. This is where you can leverage Adobe Edge Inspect.
In the upper right corner of Edge Reflow is an icon that turns on Edge Inspect synchronized browsing. Assuming you already have the Edge Inspect desktop application installed and open, you can turn on synchronized browsing. Once you do, any devices currently running the Edge Inspect mobile application have a verified connection to your desktop and will automatically preview the Edge Reflow layout you are currently working on. Even better, as you make changes within Edge Reflow, they will automatically be reflected on the devices.
For example, Figure 8 shows the header layout I created running inside Edge Inspect on my Android device, a Samsung Galaxy Nexus.
As you can imagine, using Edge Reflow with Edge Inspect enables you not only to develop applications that adjust to a variety of screen sizes, but also to test them across multiple screens in real time.
While you haven't completely re-created my site design, I hope this exercise has given you a sense of how you can use Edge Reflow to build responsive websites. In fact, Edge Reflow has all the tools you need to complete the rest of the layout, such as adding borders and border styles, rounded corners, and transparent backgrounds. Clearly, I've only just scratched the surface of building responsive websites and using Edge Reflow as a tool to accomplish that.
I encourage you to give Edge Reflow a try, keeping in mind that it is still an early preview release. Feel free to share any feedback you have on the product with the team via Twitter @Reflow.