RED - Responsive Email Design Workshop

All you need to know about Responsive Email Design, Email Design Best Practice, Interactvie Emails and ESPs

Get Started

Why this workshop?

This workshop was created to understand, improve and refine design skills for Responsive Email Marketing.
Remember Email is not the web, it’s the web’s finicky cousin.
There are various types of Email Marketing:

  • Non responsive
  • Hybrid
  • Responsive

We will focus on the Responsive, nearly 70% of companies send responsive emails these days. But how many of them are doing so as effectively as they could be?

Why choose Responsive?

Responsive email design has been growing steadily in popularity, and it’s no surprise as to why: 47% of email opens are on a mobile device, and some brands see upwards of 70% of their emails opened on mobile. These brands turn to responsive design techniques to create better experiences for their subscribers, and in many cases, increase their click and engagement rates.

WHAT IS POSSIBLE WITH RESPONSIVE DESIGN?

The possibilities are endless, but some common uses of responsive design techniques include:

Changing hierarchy

Changing navigation

Enlarging fonts

Changing colors

Changing layout

Scaling images

Adding padding

Changing or hiding content

47

Percentage of email opens happen on mobile devices

80

Percentage of people delete an email if it doesn’t look good on their mobile device

150

Times/day people look at their phones

A responsive email template is a template for email marketing designed to look great and function properly across any device. A responsive template will automatically adapt to any screen size, so whether the email is opened on a smartphone, tablet, or a computer, it will look great, function well, and be easy for the recipient to read.

Why is this such an important consideration for anyone conducting email marketing? Well, you know what really grinds my gears? When I open an email marketing campaign on my smartphone and have to pinch and expand to see the text.

It tells me that the sender didn’t take care in testing the email before it landed in my inbox, and that means they don’t care about my time or the quality of our interaction.

As a result, I don’t particularly care to do business with them.

In fact, 75 percent of subscribers admit they will delete an email if they can’t read it on a mobile device. In this day and age a lot of people rely on their smartphones to check email. And since emails are one of the top ways a lot of brands interact with their clients and followers, it’s important to keep this in mind and adopt responsive email design so that your message gets across clearly regardless of device type and screen size.

WHY YOU NEED A MOBILE-RESPONSIVE EMAIL TEMPLATE

So, what is a responsive email template? In summary, a mobile-responsive email templates automatically adapt to the size of the screen they’re being displayed on so your email looks great, has a functional layout, and is easy to read regardless of your subscriber’s screen size.

And with over half of all email now opened on a mobile device, looking good on mobile is essential to delivering a quality message to your customers and subscribers.

Conclusion

Designing and developing a professional-looking responsive email takes some planning. Follow the ten commandments and it’s easy to pre-empt potential problems along the way. That leaves more time to concentrate on the really important things like captivating copy and dazzling design.

So we’re not going to panic when James buys a tablet, Sarah finally upgrades her handset and Bob’s company jumps ship to Mac. We’ve thought ahead and can relax in the knowledge that our emails look great on any gadget.

Best Practice

Saying Mobile First is rather reductive since different devices need different views. When you are on the phone, it is at a distance very close to our eyes and therefore the perception of the spaces is focused on a small portion of about 414px, average size of modern smartphones.
When we are at the computer, instead, it is at a considerable distance from our eyes, so our perception of space is focused on a greater portion almost always greater than 1000px.

For this reason is best to use this rule:
Desktop = Landscape
Mobile = Portrait

To guarantee very high quality images of our emails on devices with retina screens, we should work with doubled sizes. How will we design our email if the dimensions are doubled? Easy, just follow this rule:

Artboard and design at 2x and view at 50%
Example: 1280px with view at 50% = 640px
Design: 72 dpi and RGB colours



The maximum size of a template is 700px in order to have scalable dimensions for the different sizes of the screens:
Desktop: 700px
iPhone X: 375px
iPhone 6/7/8 Plus: 414px
iPhone 6/7/8: 375px
iPhone 5/SE: 320px
  • Choosing the right font for your email has never been too hard, considering the limited number of web safe fonts to choose from. But recently, things have changed. More and more email designers are pushing the boundaries and embracing the same development techniques that web designers have been using for years—implementing web fonts in their emails.

    Web fonts allow web designers to be more creative with their typography, enabling them to choose non-standard fonts in their designs.

  • Web fonts are specifically designed and licensed for use on websites and mobile apps. A couple of web fonts you might be familiar with are Open Sans and Roboto. They have to be downloaded, and often purchased, from a web font supplier for use on your own computer. Email designers commonly use what are called web safe fonts in their emails. Unlike web fonts, web safe fonts are the default fonts found across the majority of different operating systems and devices. A few you might be familiar with are Arial, Times New Roman, Georgia, and Verdana.

  • As a marketer and designer, you know the pressure to stay on-brand in email, with colors, design, and—yes—typography. Locking important copy in images has been a standard practice in email design as a way of staying on brand and being creative. But “hiding” text in images limits the accessibility of the email because screen readers can’t read the text on the image.
    Web fonts open up new avenues of creativity in typography, allowing email designers to be creative, accessible, and stick to your brand’s look and feel.

  • While web fonts don’t have universal support, here are the email clients where they are supported:
    AOL Mail
    Native Android mail app (not Gmail app)
    Apple Mail
    iOS Mail
    Outlook 2000
    Outlook.com app

  • Because web fonts don't have universal support, i suggest to use system fonts, here’s the full list of safe fonts:

    Arial, Helvetica, sans-serif

    Arial Black, Gadget, sans-serif

    Bookman Old Style, serif

    Comic Sans MS’, cursive

    Courier, monospace

    Courier New, Courier, monospace

    Garamond, serif

    Georgia, serif

    Impact, Charcoal, sans-serif

    Lucida Console, Monaco, monospace

    Palatino Linotype, ‘Book Antiqua’, Palatino, serif

    Tahoma, Geneva, sans-serif

    Times New Roman’, Times, serif

    Trebuchet MS, Helvetica, sans-serif

  • The copy sizes best practice are:
    Header: Design x2 font: 44px to 50px - HTML: 22px to 25px
    Line-height: Design x2: font-size x 1.2

    Body copy: Design x2: 28px to 32px - HTML: 14px to 16px
    Line-height: Design x2: font-size x 1.5

Formatting copy in Emails

Another best practice is the formatting of the text in Responsive Email.
Below you will see how the text behaves in different ESPs and obiously in mobile when it is not formatted and when it is formatted.
Both examples have the same dimensions and the text has been inserted in a table of the same size.

Example 1) The text table is large 350px and sits in an area of ​​300px, the text has no formatting and when viewed in mobile it behaves very well and does not present any visual interference when the hierarchy is modified

Example 2) Here too we have the same table and area, the only difference is the formatting of the test using <br> (break). The visual effect is the same but when seen in mobile it will present visual interferences when the hierarchy is modified to the point of seeming a work not very accurate

Desktop Email Client

Responsive emails are supported by:

iOS Mail app, Android 4.x Email (OEM) app, Windows Phone 7.5, BlackBerry OS7, BlackBerry Z10

Responsive emails are not supported by:

iPhone Gmail app, iPhone Mailbox app, iPhone Yahoo! Mail app, Android Gmail app, Android Yahoo! Mail app, BlackBerry OS5, Windows Mobile 6.1, Windows Phone 7, Windows Phone 8,

Some case of bad design

The Whisky Exchange

In this design there are many elements that can not be coded:

The orange banner because oblique and the text has shades and shadows

The products are superimposed on the banner and have background with gradient as well as for the description

Currys

Although the CTA sticks out, there’s too much text on this email and there’s not enough to inspire the recipient to actually click on anything. Currys also falls victim to the trap of cluttering its email with far too many different offers and promotions further down.

Macy's

This email is extremely cluttered. You don’t even notice the promo code the first couple of times you look at it.

It’s also followed by a huge amount of other content promoting homewares, furniture, cologne and even mattresses.

Macy's

Another busy, busy email from Macy’s, this time with a confusing selection of offers. The box on the left offers you an extra 20%, 15% and 10% off – which is it? Or you can get $10 off. Or there’s an online exclusive deal at the bottom for 25% off clearance products. Super Saturday sure is a confusing time down at Macy’s.

Reiss

Reiss sticks faithfully to its white, text CTAs, which maintains a consistent brand image but means they can occasionally be difficult to see. In this example I think it’s easy to overlook the CTA against the light background.

Interactive Email’s Opportunities and Challenges

Enthusiasm for email interactivity is at an all-time high. Marketers told Litmus that creating interactive email experiences was going to be the biggest design trend of 2018, and that’s a year after marketers declared that 2017 is the year of interactive email. Marketers are right to be excited.

Allowing subscribers to click in an email and activate additional content within that email reduces friction by not forcing them to visit a website or app. However, email’s disruptive evolution from static message to mailable microsite presents many challenges.

But first things first. Before we look at the challenges, let’s look at all the opportunities that interactive emails offer to marketers.

For more Interactive and Advanced Email Design Techniques click Here

INTERACTIVE EMAIL OPPORTUNITIES

Email interactivity allows brands to add a wide variety of elements to their messages—everything from image galleries and offer reveals to hamburger menus and add-to-cart functionality.

A majority of brands that have used interactivity have used it to add carousels and hamburger menus to their emails. On the other hand, review and rating submissions, add-to-cart functionality, and search bar entries have been used by relatively few brands.

Here are some more details and examples for some of those interactive email elements…

CAROUSEL OR IMAGE GALLERY

Interactive email is becoming more popular than ever. Using a carousel in an email can be a powerful tool, especially for mobile where vertical space is at a premium.

HAMBURGER MENU

A familiar element in mobile apps, hamburger menus save valuable screen real estate, while still keeping navigation links handy. This has become the most pervasive interactive email element as it has been incorporated into mobile email designs across a number of large brands, including REI, Chili’s, Aeropostale, and Neiman Marcus.

Full Page Intro Animations in Email

This is a simple technique to show a brief animation of an object or text against a blank page and having the rest of the email “fade in” after the animation ends.

Games in email

Sonic the Hedgehog Game in Email

One of the exciting possibilities of interactive email is games. Kristian Robinson of Two built two really cool versions of Sonic the Hedgehog games that you can play within an email. I was blown away with the slick execution of both these games as playing them had an authentic albeit brief experience.

Side Runner

In this version, the goal of the game is to jump and avoid the spikes at exactly the right moment. This technique uses two sets of CSS animations. The main (default) animation sequence has Sonic running into the spikes at the end. The alternate sequence takes over when the user taps on a “jump” button at the right time and has Sonic jumping safely over the spikes.

See the example.

First Person Runner

Not content with his earlier achievement, Kristian built a version of Sonic with a “first person” view. The goal of this game is to collect a bunch of rings before the time runs out.

The implementation used radio inputs to keep score and the build-out of a very elaborate path consisting of background image sprite animations.

see the example.

The Dawn of Kinetic Email

Although HTML email has been around for almost as long as the Web, email has often been regarded as the Web’s ugly stepchild. The inconsistent and outdated HTML support in email clients seem to reflect a mindset that as long as senders can place some images and text in an email, it’s enough. Why ask for more? Apparently, email is not a medium for innovation.

Recently, that perception began to change as designers began finding ways to implement interactive and dynamic content within email. These techniques not only captured recipients’ attention, they offered new and exciting creative avenues for email designers.

B&Q, a major UK retailer, attracted a lot of attention last year when the company sent a series of emails that featured fully interactive components using just HTML and CSS.

In a press release, Oracle, the developer of the campaigns coined the term “kinetic email” to refer to the techniques used. I personally like the term — “kinetic email” is catchy and appropriate.

However, what exactly is kinetic email? And while we’re talking about it, what isn’t kinetic? I’d like to offer my perspective on what kinetic email is and open a discussion to move email innovation forward.

Interactive Hotspots in Email

As you can see from the example above, interactive hotspots, or user initiated information overlays are an effective way to deliver additional contextual information on an image.

Click here to see a Live Demo

Beginnings of Kinetic Email

In the past, although email clients such as Apple Mail had robust modern HTML and CSS support, the vast majority of email clients didn’t. This forced email designers to code for the lowest common denominator.
The launch of the iPhone changed everything. The iPhone email client, like Apple Mail, supported modern HTML5 & CSS3. However, the immense popularity and adoption of the iPhone – and later the similarly capable Android phones – gave designers a reason to create email designs tailored for the mobile screen. Using media queries, designers were able to create mobile optimized responsive layouts.

Once designers started to experiment with responsive layouts, they discovered CSS tricks that allowed email to be interactive and dynamic. In 2011, Campaign Monitor posted an article on implementing “progressive disclosure” in email where hidden email content in mobile could be selectively displayed when the recipient tapped on a button.

In 2013, LinkedIn introduced a tool called Intro. It was an add-on for the iPhone email client that inserted a toolbar at the top of an email containing information about the sender. The interactive nature of the toolbar seemed as if LinkedIn had modified the iPhone email client itself or somehow found a way to use JavaScript in email. It turned out the engineers at LinkedIn discovered a way to embed interactive CSS into an email that would render in the iPhone email client!

Kinetic Email vs Interactive Email

Isn’t kinetic just a different way to describe interactive email?

No. For two reasons – the term interactive email comes with some baggage and kinetic encompasses more than just interactivity.
Interactive email comes with baggage because various forms of technologies have been called “interactive email” – email that required users to install proprietary software to experience interactivity; emails that contain video and animated gifs; and emails with call-to-actions that spur the user to click to landing pages and do an interactive activity such as vote, take a survey, or play a game. I wouldn’t consider any of these true kinetic email.

I also believe that kinetic should include techniques that make an email dynamic but not necessarily interactive – such as CSS animation and transitions and time triggered display of content. Although video and animated gif images can be considered dynamic, I feel that kinetic should be limited to the use of CSS to dynamically control elements in email and not simply display dynamic media.

So What Really is Kinetic Email?

At the core, kinetic email encompasses interactive and dynamic designs in email that are implemented completely in HTML and CSS. Going further, we could categorize kinetic email into three distinct types:

  • Kinetic
    Email that uses CSS transitions and animation to deliver key content in a campaign. An example is an automatic sliding carousel with each slide displaying a different set of content.
  • Kinetic Interactive
    Kinetic email with the addition of elements that respond to user action. For example, user driven carousels containing navigation buttons, collapsible menus and elements that use progressive disclosure. Kinetic interactive emails would typically involve use of the :hover, :active, :focus or :checked CSS selectors.
  • Kinetic Effects
    The term kinetic effects can be used when CSS animations and interactivity are mainly used to embellish content. For example, highlighting content upon hovering, falling snow and CSS entrance and attention focusing effects.
Kinetic emails also often incorporate fallback techniques that ensure that these emails do not render poorly on email clients that do not support kinetic content. For example, kinetic content may simply be hidden or an alternative simpler static layout may be displayed.

Below you will find some examples

User Controlled Carousel (Kinetic Interactive)

Creator: Oracle for B&Q
Background
Source

Falling Snow (Kinetic Effect)

Creator: Wax Media for B&Q
Source

Collapsible Menu (Kinetic Interactive)

Creator: JM Web Services for PBC Credit Union
Background
Source

Carousel with Navigation Controls (Kinetic Interactive)

Creator: Nest Labs
Background
Source

Realtime External CSS Driven Twitter Feed (Kinetic)

Litmus
Background

At Retentiongrid they’re able to embed real-time content from Twitter, Facebook and Instagram into any email, if we are willing to have it in our clients email we can get in touch with Kevin Dykes (CEO), obviously they sell the script, but we can make our clients pay for it.

What is not Kinetic?

Anything that isn’t HTML or CSS, dynamic and supported natively by an email client is not kinetic.

Kinetic email is not:

  • Animated gifs
  • Kinetic Interactive
  • Video in email
  • Interactive content that requires non-native plugins
  • Image based “realtime” content that is generated on the server when the email is opened. However, kinetic email can leverage attributes of realtime (see twitter feed example above)
  • Off email interactivity. Emails that contain content such as placeholder images that elicit a click by the user to a landing page where the real interactivity resides

What’s Next for Kinetic Email?

Although kinetic email is not a substitute for a well-crafted and targeted campaign, when used appropriately kinetic email can bolster a brand’s message and increase the recipients’ engagement and delight.

We believe that kinetic email has the potential to attract new interest to email – especially from developers. Who knows? The email client developers at Google, Yahoo! and Microsoft might even begin to take HTML support seriously.

Some good example of Responsive Email Design



Team

Chris Freeland

RAPP UK Chief Executive Officer

John Markham

RAPP - CTO, Code - Senior Technical Solutions Partner

Scott Alexander

Front End Team Lead

Robert Cahoon

Senior Front End Developer

Claire McIntosh

Front End Developer

Scott Bentley

Email Executive

Dario Daniele

Email Developer

Mariana Osgood

Digital Artworker

Our Clients