We have reached a point where the majority of email opens occur on mobile devices. This means that people open their email on the go - during their commutes, breaks and sporadically throughout the day. For this reason responsive email is no longer a fancy option, it is a requirement.

Not only must businesses focus their efforts on responsive design, they must also take the time, resources and effort to make sure their responsive emails load and render well on multiple devices. Users have little patience for emails that don't render well on mobile devices; most of the time they will not hesitate to delete emails that fail to render on their mobile devices.

The following will cover what responsive email is, what its benefits are, and how you can get started with it:

What is Responsive Email?

Responsive email uses responsive design. Responsive design is a type of design/code template that automatically adapts and renders itself to whatever is being used to view it. It adjusts to any devices that support HTML and CSS such as HDTV, mobile phones, tablets and desktop computers.

On an HTML and CSS workspace/template, responsive emails use @media queries to automatically identify the screen size so that the email adjusts its settings accordingly.

Benefits of Using Responsive Email

Since nowadays people view their emails on their phones or tablets, responsive email is the first and foremost way of engaging them. Interestingly enough, it has come to a point where it is actually faster and more efficient to build an email from a responsive email template as opposed to building an email from a standard HTML template. Why is that so?

  1. Responsive email only requires a few lines of code instead of unique, custom layouts for different devices or platforms; it is all based on one predefined template.
  2. Since responsive emails have saved content area layouts that utilize HTML, this streamlines the QA process that would otherwise be a time-consuming roadblock with traditional email templates.
  3. Responsive emails are easier to revise since they utilise more HTML text
  4. Responsive emails, unlike traditional email templates, are more structured and pre-defined thus saving time on the design and building stage.

Adopting responsive emails now will put you ahead of any competition that has not caught up to speed- customers' attention is the first step towards business success and profits.

How it Works

It starts with @media queries. This powerful tool in CSS is the foundation of responsive design. For example, let's say that you wanted your emails to adapt to screen sizes that were no more than 640px. It would look something like this:

@media only screen and (max-width: 640px) {
/*styles for this device/screen size here*/

If you wanted it for mobile landscape (480 px wide) you would adjust it like so:

@media only screen and (max-width: 480px) {
/*styles for this device/screen size here*/

You now can program different styles. You can have many images, colours, and shapes to the point where each different style is a unique experience even though the content is the same. While there is a learning curve as well as a time commitment to get responsive emails just right, it will be a necessary step for acquiring and retaining customers.

Before Getting Started

Here's some things to think of before going ahead with designing and building a responsive email template:

  • Pre-header: The standard approach is to place it on the top-left-most area of an email template.
  • Width: Template width must not exceed 600px.
  • Minimal Images: Keep in mind that not all email clients display images by default. Avoid images for headings and try to keep them to a minimum.
  • Bold Fonts: Use bold fonts for headings in order to draw attentions.
  • Fonts: Use readily-available fonts.
  • Font Size: Default font size should be 13pt - default on iOS devices.
  • Wrapping: Wrap email content inside two tables.
  • Buttons: Things get glitchy if buttons aren't at least 44x44px.
  • Javascript: Not allowed in emails.
  • CSS: Since email clients strip down external stylesheets, only use inline CSS in your code.

You should now have the basic idea of what responsive email is, what benefits it has and how it works. Knowing that switching to responsive email is effective in retaining subscribers and customers, increasing email open rates and consolidating the online presence for your business, we really encourage you to start responsive email marketing today!