Coding and designing responsive newsletters is hard

Email professionals say making a custom, responsive email takes days. They would be right—if it weren't for Responsive Email Designer (RED)! This article shows you how to create a custom responsive email, like the example below, in 6 short steps. We included video snippets that show the basic action.

Creating a custom, responsive email in 6 quick steps.

Before we start, it is important to realize that coding HTML emails is like web design....15+ years ago! Yep, back to nested tables for layout, inline styles, and a ton of hacks to solve display issues for uncooperative email clients. Remember IE6 and 7? Compared to coding for Outlook, designing for these archaic browsers would have felt, in hindsight, like a pleasure. Hold on now, there’s no need to be turned off already. There is actually some good news here too.

Responsive Email Designer is a revolutionary app that shields you from this complexity. The real-time visual editor—with the ability to drop elements, use of IDs & classes, plus the availability of familiar CSS styles—makes it feel like you are designing for the modern web! If you’re a web front end designer or developer you could skip this tutorial all together as you will be off to a running start using rows, columns and visual CSS tools to create what feels like a web page.

Also, RED offers more design freedom then any of the regular email editors offered by the email sending services. You can check out our theme page or watch the overview video to see some other examples.

To follow along, it will be handy to have a copy of Responsive Email Designer purring on your machine, so we went ahead and compiled fully functional versions of RED for Business, specially for this tutorial!

Download RED For Windows Download RED For OSX

What’s the catch? Exporting (for sending emails with our friends from Mailchimp, Campaign Monitor, etc.) is a bit limited. Yet, if desired, it’s also easy to remedy with our RED Mailer service ($9/mo — first 7 days free, cancel anytime) or simply by buying the license. After you have made your first responsive email by following along, we are sure you will find the remedy that fits you best!

Download successful and RED installed? Building up good the vibes? Alright, let’s look at what we're gonna make:

The responsive email we are recreating in 6 steps

Don‘t forget to use the slider to see how this email adapts to smaller screens, and scroll in the window to see all of it. In this design, no fancy images that might or might not show, just three icons and cool styles that will bring the message across. Cool? Alright then, let's get started!

Step 1: Drop in content elements

Add headings, paragraphs, images, buttons, social icons and more.

The element pane offers a large number of content components for constructing your email (message). Simply click on any item, and it will be inserted into the selected column. You can also grab an element and drop it exactly where you want it. Want to move it later? Simply drag and drop to rearrange!

The contents of the email are organized in rows and columns. In the email design example above, a text element is used for the pre-header text in the first row. In the second row, we dropped an image for where the logo will be placed and included a text link that directs recipients to a web page with similar content.

Right, the “similar content” remark was not an accident. Many people believe that this page needs to be the exact same as the email—preferably auto-generated even.

At CoffeeCup we have a slightly different view on this. RED has been designed to deliver the best possible experience to the reader when it is allowed to (by the email client). This principle of progressive enhancement also applies to the web page version. A web page offers more possibilities than an email, and they should be used (when possible and provided the content is sufficiently similar).

Other content elements in the example email include a Heading (H1) for the email title, with an accompanying text element that reinforces or clarifies the big text. A Section Header (H3) with a clarifying paragraph follows. Next comes the first of three key points. This section contains more detail and is supported by an illustrative image (or icon). Really, writing this down took more time than actually adding the content elements in RED!

Dropping in the first content blocks.

With a rough idea of the first content elements (and their hierarchy) in place, let’s look at what options we have to organize them.

Step 2: Organize your content with a custom layout.

Choose a width, add rows and create columns.

RED brings the power of grid-based web design to email creation. As mentioned, content is organized and aligned in rows and columns. Rows are divided into columns that will be used to place the actual content elements. Should you use 1, 2, 3, 4 or more columns? That depends on the design and is ultimately your choice!

In the example, the row that contains the logo stretches across the entire width of the available display space. For that we use a “Full-Width row”. The content will still be “constrained” by the width of the email body, but the background color of the row will give the visual full-width effect.

In the header row, we are using 2 columns, one for the logo and one for the text link. Columns are a great way for placing content next to each other. If elements are placed in the same column, they will stack by default. That is what we want to happen to the email title and subtitle, as well as with the section heading and intro paragraph. These elements are placed in a two constrained rows (no full-width background is needed), both with a single column and therefore, appear below each other.

The next row, the “Feature row” that contains the first key point, uses two columns. These columns are not divided equally; the first column (the one with the icon) gets a width of two (out of twelve), and the text column gets the remaining width of ten. The width of columns can be controlled with the “Span Drop-Down.” Responsive Email Designer uses a 12-column grid, meaning for example that a column with span-6 takes up half, and a column with span-12 takes up the full available width.

The following example shows the structure of our layout. The red text is not part of the actual content but helps to clarify the row and column structure.

The layout structure of our responsive email.

The different row colors only have been applied to make them easier to distinguish. The example is scrollable and shows a pre-header row, a header row, a row used for a further introduction of the subject, and the first feature row. Scroll down to see the feature row and columns in a darker grey color.

With the initial content elements and layout structure in place, it’s time to get the story straight. Let’s smith those words!

Step 3: Draft the message with the cool text editor

Write your story and edit texts with ease.

The Text Editor starts automatically when a text element is triple-clicked. Alternatively, you can click on the Pencil in the top section of the Design Pane (click the button below “Profiles” to access the design pane) to enable editing mode. Then simply paste your text or type your words right in the element itself.

You can select letters or words to change their appearance using intuitive controls that you are already familiar with from popular word processors. Tweak text size, decoration such as italic or underline, and use font colors or backgrounds to create that nice attention-grabbing typographical effect that will display automatically and consistently on all email clients.

What is the hidden editor gem? It’s the ability to add a (class) name to any combination of inline text effects and settings! This makes reusing these effects in other sections not only easy and precise but also allows you to make tweaks to the styles for all texts that use them at the same time. Want to make a slight change to the color of all text links? Select one, make the change, and all text links will be instantly updated.

Pretty snazy indeed, we’ll look into that a bit more while working on the design.

Before we continue with step 4, adding the design layer to our responsive email, let’s quickly look at an updated version of the design. In the example below, the various placeholder texts have been updated with (a draft of) the production content.

A few additional content blocks were added as well. Two more “key points” were added (in this case, two other ways people are making money using RED). The “key points” section is followed by three action choices, represented by three pure HTML buttons. Please never (never ever) use images to represent action items such as buttons. There’s too big of a chance they won’t be displayed, leaving the reader confused and unable to make the desired click. If an image is needed, a background image can be a good choice. It will show in most major clients, with the Outlook desktop clients being the big exception, and enhance the call to action when images are displayed.

Real—meaningful—content helps to guide the design direction.

In this version the colors and texts used to indicate the layout structure have been removed. The content is now largely there; it’s clear what we want to communicate. However, the email looks grey and boring and could really benefit from a dose of design love—not only to give the layout more personality, but also to use design to clarify the message and to make it easier to consume. Onwards to the powerful design tools!

Step 4: Design with familiar style controls

Add borders, backgrounds, font-styles, colors, shadows and more to craft impressive emails.

The design pane will launch upon a double-click on any element. The pane can also be reached by clicking on the pencil icon on the (top) right below the profiles icon. Styles can then be applied to the selected element only, or to various elements of the same type at the same time. If you want to follow the design part of this tutorial with the completed project from step 3, you can download it here.

RED for Business features a selector system—Type, Classes and IDs—very similar to what is used in “normal” web design. RED Personal uses a simplified workflow; design styles can be applied to a specific element or to all elements of the same type. After defining how broad or specific the styles need to be applied, any of the controls below the selector drop-down can be used to define colors, sizes, borders, spacing, and more. If you need detailed help on these controls, or anything else in the interface, please consult the RED manual.

Frequently, one of the first design decisions and actions is to choose a fitting font for the message. Or apply a font that resembles the house style. At CoffeeCup we are (slowly) switching from Open Sans to Roboto. Both are friendly Web fonts, supplied by the fantastic (free) Google Font service, and are very readable on screens. In our email example, Roboto is used for all text elements: headings, paragraphs and buttons alike.

To apply a font, first select a text element, for example a paragraph. Then, go to the by-now familiar design pane on the right, and set the “Apply to” drop-down to “All paragraphs” (RED Personal) or “Type” (RED for Business). In the Typography section, select the font family of your choice (our choice was Roboto) from the drop-down. All paragraph elements, old and new, will now have the selected font applied, unless a different font is applied to a more specific selector—class or ID in RED for Business, “To this - ” in RED Personal.

With the paragraph selected, we might as well define all typographic styles we want to use for our paragraphs. The font size is set to be 16px and color hex code #575757 (click on the color tile and type or paste the code in the hex box). The relatively large font size in combination with the calm typeface and background color, makes the text easy on the eye and invites reading. That’s all. A few of these small tweaks can make a big difference (as our Diego shows me time and time again). No other styles have been applied to the paragraphs.

The other styles are applied in a similar way. Simply select an element then define the desired visual effect on the Design Pane. Just follow the listed styles changes below, and the email will have the same appearance as the email that we are recreating.

• Select the preheader text element.
• Under Typography, set the font size to 15px;
• Under Typography, click on the color icon and use #a6a6a6 as color value;
• Under Dimensions, select ‘Right’ from the Alight drop down;
• Under Dimensions, set a 2px top and bottom margin (or padding in RED Personal).
• Select the second row.
• Under Background, click on the color icon and use #404040 as color value.
• Select the image in the second row.
• Under Element, select Local Image from the Source drop down. Add the image to the project resources, then press Select.
• Under Dimensions, choose to left-align the image.
• Select Read online.
• Apply the font settings to the type (use ‘All text elements’ for RED Personal);
• Font styles: Roboto (Arial for fallback and RED Personal), size of 14px, and color #e0e0e0;
• Alight right with a top margin or padding of 3px.
• Select the email title (Responsive Email Designer).
• Under Typography use font Roboto (Arial for fallback and RED Personal) with a light font weight, a size of 33px, color #ff8c00 a line height of 1.2 and center align;
• Under Dimensions set a 10px top margin (or padding RED Personal).
• Select the column with the email title.
• Use top and bottom paddings of 20px and left and right paddings of 10px;
• Set the background color to #ebe8e4.
• Activate the left and right bottom corner controls by clicking on them, then apply 5px (rounded) corners.
• Select the subtitle.
• Use font Roboto, a size of 16px, color #8f8f8f a line height of 1, and italic;
• Under dimensions set Align to Center and use a bottom margin / padding of 10px.

Select the key-message heading.

• Use font Roboto, a size of 24px, font-weight light, color #ff471a a line height of 1.2;
• Under dimensions, add a top margin (or padding) of 10px.

Select the column with the key message.

• Give it 30px left and right padding. This is used for most columns that contain text in this design. When using RED for Business it is a good idea to give it a class name that is easy to remember for re-usage like for example “main-column”. With RED Personal the padding can be applied to all columns and removed for columns that don’t need it.

BAZUMM! The first four rows have been squared away. How long did that take you? About 10 - 15 mins? Even if it took you a bit longer, it does not really matter. Practice makes perfect, and if you got this far, completing a design is just a matter of repeating the steps you’ve already done. Let’s do one more row here to practice a little more. There are also a few text editor tricks to share that you might like.

Alternatively, you can download the completed project, select an element, and peek at the design pane to learn exactly how we did it. Having this project will also come handy when we start with step 5 and 6. Before that, let’s practice a bit more with the key points row and use the editor for some inline style changes.

To re-create the feature rows, follow these steps:

• Select the small image (icon).
• Under Element, select Source > Local Image and add your image(s) to the project. Then click on the image or icon of your choice followed by Select at the bottom of the dialog and the image will appear in the email. In case you don’t have a suitable icon, you can go here to download the icon set we used in this email;
• Under Dimensions, set the max-width to 80px and right-align the image.
• Select the paragraph.
• The font styles should already be in place; they were done in one of the very first steps. Just in case they are not: we are using Roboto (with Arial as fallback and used in RED Personal) at 16px, and with color #575757;
• Select the column that contains the paragraph and give it the same class name as all other columns that hold text (the “main-columns” we used earlier for the column in the fourth row).
• Here’s where it gets interestingly different... Triple-click on the paragraph to open the text editor, and place the cursor after the word ‘activities’. Now add a period and hit enter. Then, select/highlight the first sentence, and click on the color icon in the editor toolbar and use (you can paste or type this in the hex box) color code #c22d23. The first sentence should now have a nice, distinguishing reddish color.
• Making a selection bold or italic works in the same way. And if you type a name in the top left box, you can reuse what you just did in any section of the email by simply typing the name. How cool is that!

So, that’s how easy designing email with RED really is. Time to get started with the responsification. Since the exact tweaks for mobile screens depend on the original content and design, it’s easiest to follow along with the completed step 4 project opened in Responsive Email Designer.

Step 5: View the email at every possible width

See and test the email design at every possible width.

A truly responsive design looks great on every screen and every size. You see, phones and tablets come in many sizes and resolutions, making designing for “phone” or “tablet,” in general, impossible. However, with the slick slider, you can see what the design looks like at every possible width, pixel by pixel, and cover them all!

Grab the handle, and move it left or right to slide your way onto and past any screen (size). Does text feel squished, are images too tiny, or do you want to change the column structure at any pixel width? Then add a breakpoint…

Step 6: Adjust for an optimal recipient experience

Making magic with custom breakpoints.

Responsive Email Designer is the only app that allows the creator of the email—you in this case—to make adjustments to the design and layout at every possible pixel width. That’s right, anywhere the reading or using experience could be improved, a change should be made. Update everything design or layout-related—like spacing, alignment, column width, font size, or contrast—where and when needed.

Changes are made at so-called “breakpoints.” Simply click on the plus icon, or on the line above the slider, to add one. Then you can change font sizes, adjust spacing, stack columns by increasing their span (width) on the layout pane, and so on. These changes will apply to all (screen) widths to the left of the little dot above the slider. Simply move the slider to the right and left of the breakpoint to see the responsive changes in action.

With all that behind us, it’s time to do some actual work and responsify our design. The start is simple: just make the display area smaller by moving the slider to the left. Pause now and then to scroll up and down the email to make sure everything still looks good in the middle and bottom parts as well. They will very likely disappear at the bottom when the email gets longer, simply scroll down to see or work with these elements.

In the example, everything looks good until we start passing the default breakpoint represented by the red dot. Slowly continuing to decrease the display area, the size of the paragraph texts starts feeling a bit large relative to the other page elements such as the feature icons. All paragraph font sizes can be changed at the same time, so why not experiment a little and give a slightly smaller size a try!

First and foremost, let’s add a breakpoint at the place where want to make the change by clicking on the plus icon. In our design, we decided to use a font size of 15px for widths below 650px—but sticking with a larger font size for a while would have been cool too.

This is also where the buttons start feeling squashed. To give these important action items some room to do their job select the one on the left. Switch to the layout pane and under the columns section change the spans from 4 to 6. Do the same for the middle button and change this to 12 for the last button. More changes can be made if desired, the last button can for example be given a larger max-width for a different visual effect. You will get the main idea here though, content needs room to breath and this can be done by increasing the span width of the columns.

Continuing to slide to the left, the feature paragraphs become a little suppressed. To give them more room, the icon can be positioned above the paragraph text instead. To do this, select the icon, or column in which the icon is placed, and go to the layout pane. In the columns section, use the drop-down to change the spans from 2 to 12. BAM!

Well, almost. The icon on the right is still a bit weird. The fix is easy; first, double-click the icon, then select the center align option from the drop-down in the dimensions section. Done—for real this time.

Now we need to give the paragraph the much needed space to breathe. Select the element (or parent column) and change the spans to 12 as well. Looking good? Let’s construct the same layout for the other feature rows as well. Just select the respective column or element inside the column and adjust the span so the fill display width is occupied.

That’s all looking pretty good now, but what would this layout look like with centered text? Select a paragraph and make sure the change is going to be applied to the type (all paragraphs). Now click the center align icon under typography and see the text center for all paragraphs. A single click, and everything changes, nice! Personally I feel this looks good in this design with the centered icon, especially when the screen gets even smaller. My vote is to keep it, but I will let you be the judge. If you don’t like it, just press “undo” to reverse the changes or set the align button back to left.

That’s it, ladies and gentlemen, a responsive email design in an hour instead of days. Feel free to test the design on different devices and clients. You will find that all the tricks baked into the Code Generator will make the email display very consistent and certainly prevent the design from breaking. If you want to play with the final— responsified—project, you can download it here.

Anything you found while following along or any suggestions on making the tutorial or design better? Hit me up on twitter, and I will be right with you. If you prefer you can also leave a note in the forums or on the CoffeeCup Facebook page.

Happy Email Building!