Responsive Design in Email, Part 2: Edge Reflow

Edge Reflow graphic

Update: On November 30, 2015, Adobe announced that they would be discontinuing the development of Edge Reflow, along with all the other Edge tools. Most of the features of Reflow have already been incorporated into Dreamweaver.

In last week’s article, we talked about the pros and cons of using responsive design in your emails. In response to the increased interest in responsive design, Adobe recently introduced Edge Reflow, a program designed to simplify the process of creating responsive designs. With Edge Reflow, you can create as many size-based variations on a web page as you want. Most of the formatting information goes into the separate CSS file, which you will then need to add to the head in your email. If you are using Adobe Creative Cloud, the program is available for download now. The program is still in beta, so it’s possible that some of the problems I discuss here will be addressed before the final release. It was originally scheduled to be released in July, but that deadline has come and gone, suggesting that Adobe recognizes that the program is still not ready for prime time.

In Edge Reflow, you draw boxes, place images, and create text boxes as separate elements on a default field. A resizing handle on the right lets you see what happens to your design when you reduce the size of the viewing platform. You can then reorganize the information in your design for different widths. For instance, you may want to set the default version of the file to a width of 900 pixels, and then create a version for viewing on a phone that is set to start displaying at 425 pixels. You can drag the various elements to different positions, change their float attributes, and hide them when necessary.

3 views of responsive design

With this file, the text and graphics were moved into a stacked position for the tablet view, and then the images were hidden for the phone view.

It sounds easy enough, but the sad truth is that, when it comes to email design, Edge Reflow offers few, if any, advantages over coding the email yourself. It has some nice features, but it’s worth mentioning the 800-pound gorilla in the room: Edge Reflow will not open HTML documents; only its own Reflow (.rflw) files. If you want to experiment with existing designs in Reflow, you have to recreate them from scratch. Nor does Reflow directly give you the option to save or export the files you create as HTML formatted files. To do so, you have to choose “Preview in Chrome” from the View menu and then it will either open in Chrome, or open the folder containing the HTML and CSS files. You can open these up in Dreamweaver and modify them, but there is no way to import those changes back into Reflow.

In an attempt to improve Reflow’s compatibility and usefulness, Adobe recently added a feature to Photoshop CC that lets you generate a Reflow file in Photoshop. This has some interesting aspects, such as the ability to keep any text layers you’ve added in Photoshop file as editable elements. This is a welcome addition, but it doesn’t address the real problem, which is that you are never working with your actual HTML document. During our tests, it became apparent that to use this feature you have to start from a predefined approach that may not be compatible with your previous designs. In our tests, we found very little advantage to using this feature. Your results may vary.

Edge Code

As part of the Edge gallery of programs, Reflow was primarily intended for use with Edge Code—a repackaged version of Adobe’s free HTML editor, Brackets. Edge Code has the features, such as color coding, that we’ve come to expect from HTML editors, but it is a bare bones affair. Notepad++ (on the PC) and TextWrangler (on the Mac) offer more features, and they are also free. As with Reflow, previewing files from Edge Code requires the Chrome browser to view the final results. Other programs in the Edge line include Edge Animate (just what it sounds like), and Edge Inspect, which is primarily intended to view web pages on various devices before publishing them (of little use for email marketing since you must still send the files to various email clients to see how they handle them).

What You See is NOT What You Get

For now, according to Adobe, only Chrome displays Edge Reflow’s responsive features to their full potential. Opening the same file in Firefox or IE can often lead to entirely different results. On one level, this is understandable. Some aspects of Reflow may not work as well in the other browsers, but this is the least of your worries when it comes to creating email. How well various browsers handle responsive design is less important than how well the various email clients and devices respond to the code. Like Dreamweaver, Edge Reflow was intended to help create responsive web pages, not email. Media queries and other style attributes are automatically saved to a separate CSS file. Before you can use these attributes in your mailing, you’ll need to transfer them to the head section of the email. Unfortunately, it is not possible to insert this information inline, so media queries are only usable with email clients that use the head information. [See last week’s article for information on which email clients are compatible with head tag information.]

When you are finished designing your email with Reflow, and have saved to preview in Chrome, you should end up with four files:

  • page1.html
  • Project_Previewer.html
  • page1.css
  • boilerplate.css

“Project_Previewer.html” is intended for use with multiple page constructions and can be ignored or deleted if you are working on an email design. “Page1.html” is the actual HTML you’ve created in Reflow, and “page1.css” is the style information for that page. “Boilerplate.css” contains several master style elements that may be important to your final results.

You can copy the CSS and place it between Style Tags in the email head, but this isn’t advisable. Not every email client uses the head tag information. You’re still going to have to convert all the CSS except the media queries to inline styles if you want your email to look good in as many email clients as possible. Once all of this information has been converted to inline styles and the media queries have been added to the head, you’ll need to send out test emails to various email clients and look at the results on various devices. Your design may look perfect in Edge Reflow and then fall apart completely when it’s transferred to your email marketing software. Similarly, it may look fine in your email marketing software and come out completely wrong in certain email clients, so testing across as many clients and devices as possible isn’t just a good idea—it’s absolutely necessary.

Gmail & Thunderbird comparison

Here is the same email in two different email viewers. On the left, Gmail strips out the header information so all the formatting is lost. On the right, the same email appears as it was intended in Thunderbird. Inlining the style information will solve this problem.

Form Follows Features

If you want to use responsive design, Edge Reflow might help you sketch out an idea, but it is not a complete solution. It is also very email-unfriendly. Although you can use tables in responsive design, Reflow provides no easy way to do so. Not to mention the fact that you still have a fair amount of work to do to prepare your final files for mailing. I do want to stress once more that Edge Reflow is still in beta testing, so everything I’ve said here may be negated by the time it is finally released. I certainly hope so, but I’m not holding my breath.

However you decide to tackle responsive design, it is important to make sure that your design is flexible enough to be easily read on as many devices as possible. Until all email clients—and especially Gmail and AOL—accept head tag information, email containing responsive design information must be readable and visually appealing under all circumstances. In our next post, we’ll look at how to do this, by combining media queries with inline information to create the most compatible email possible.

Next Time: Handling Media Queries in HTML.

Go to Goolara website

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.