A complete guide — Stripo.email

We all live in a mobile world and this is no longer a secret for anyone. According to statistics, 41% of email openings occur from mobile devices, and responsive email design is no longer an option, but a necessity. Creating email marketing campaigns that look good on both desktop and mobile is your key to cover more of your audience and not end up in the spam folder, but there is a hitch with this one.

Creating responsive email templates might be tricky, as it requires some degree of coding skills and knowledge. That’s our subject for this article, as we show you the essence of a responsive HTML email template, how to create it, as well as what code pieces you should add to achieve fully responsive email templates.

What is a responsive HTML email template?

Before diving into the code jungle, let’s talk about what a responsive email HTML template actually is. At its core is an email that adapts its entire design depending on what device it is opened on. This means that your audience gets a great experience on any device or email client, regardless of the screen size, as your email design adapts smoothly to any screen size.

And it’s pretty convenient, as you don’t need to prepare several email template pieces for different screen sizes (let’s be real, it’s impossible to prepare enough email templates for each possible screen size). Instead, you tweak your email code in a way that makes your email elements shrink or expand depending on screen orientation, its size, your pre-defined parameters, and more.

Media queries as the essence of a responsive HTML email template

The cornerstone of any responsive HTML email template is media queries. Media queries in the context of responsive HTML email template design are CSS rules that allow you to change the style of an email template depending on the characteristics of the device it is displayed on, such as screen size, orientation (landscape or portrait), pixel density, and other parameters.

Media queries are mainly used to:

• change font size or padding;
• change column widths (e.g., from two columns to one on mobile devices);
• hide or change the display of images depending on the screen.

These inline CSS rules are applied to various HTML email template elements and can look like this:

@media only screen and (max-width: 600px) {
 
    body {
        font-size: 16px;
    }
    .container {
        width: 100%;
        padding: 10px;
    }
}

This example code piece has a media query that only applies to devices with a screen width of up to 600px, meaning these style rules will be active if the screen size is less than or equal to 600px.

And that’s how you make your HTML email template responsive. By adding needed media queries, that include all the necessary styles that you want to apply to different screen sizes.

How to make a responsive HTML email template

Now it’s time to set you on a responsive HTML email design track. We’ve compiled the main things you should do to make your email template responsive, as well as code snippets of how corresponding media queries should look.

Implement an adjustable font size

First things first, what you should do to make your emails look good on various mobile screens is to implement font sizes that adjust themselves depending on the screen size. With the help of media queries, you can make the font sizes different depending on the screen size. In this case, the smaller the screen, the larger the font should be, to make it more readable on smaller screens.

/* Default font size for larger screens */
body {
    font-size: 18px;
}
 
/* Adjust font size for screens smaller than 600px (typically mobile devices) */
@media only screen and (max-width: 600px) {
    body {
        font-size: 16px;
    }
}
 
/* Adjust font size for screens smaller than 400px (small mobile screens) */
@media only screen and (max-width: 400px) {
    body {
        font-size: 14px;
    }
}

In this code we implemented three rules for our fonts:

1. For screens less than 600px (typically mobile devices), the font size is reduced to 16px.
2. For screens less than 400px (small mobile screens), the font size is further reduced to 14px.
3. All the other screens will have a default font size of 18px.

Here’s how similar responsiveness looks in action. In our email piece, fonts for mobile are slightly bigger than on desktop.

Create fluid images

Adjustable fonts are a good approach; however, your images should also be taken care of. You can implement fluid images that adapt to different screen sizes specified in the media query. Usually, these rules contain dimensions of the image that it should have depending on the screen, but sometimes the image sizes are defined as percentages of the maximum dimensions or relative units. This approach helps to avoid horizontal scrolling.

The typical media query for fluid images can look like this:

/* Default image size */
img {
    width: 100%;  /* Ensures the image is responsive and adjusts to the container width */
    max-width: 600px;  /* Limits the image size on larger screens */
}
 
/* Adjust image size for screens smaller than 600px */
@media only screen and (max-width: 600px) {
    img {
        width: 90%;  /* Reduces the image width to 90% of the container width */
    }
}
 
/* Adjust image size for screens smaller than 400px */
@media only screen and (max-width: 400px) {
    img {
        width: 80%;  /* Further reduces the image width to 80% on smaller mobile screens */
    }
}

Now, what’s this rule all about? Let’s break it down:

The default image size is set through img tag to width: 100% to ensure the image is responsive and takes up 100% of the width of its container.

To make sure the image does not stretch beyond a maximum width, we set the max-width: 600px rule.

Now, for the responsiveness we have:

• for screens smaller than 600px (mobile devices) the image width is reduced to 90% of the container’s width;
• for screens smaller than 400px (small mobile screens) the image width is further reduced to 80% of the container’s width.

Fluid images usually look like this.

Make your CTAs responsive

Now your email template looks good on smaller devices. But what about user experience? Email template CTA buttons created for desktops will have no use on smaller screens if recipients have to click on them with their pinky fingers. Media queries allow you to make CTA buttons change their size to a more appropriate one. For mobile screens, CTA should be made larger and wider for greater convenience, while on the desktop, such buttons will have a standard size.

Here’s the media query for this rule:

/* Default CTA button styles */
.cta-button {
    display: inline-block;
    padding: 15px 30px;  /* Default padding */
    background-color: #007BFF;  /* Button color */
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
}
 
/* For screens smaller than 600px (typically mobile devices) */
@media only screen and (max-width: 600px) {
    .cta-button {
        padding: 20px 40px;  /* Increase padding for larger button on mobile */
        font-size: 18px;  /* Increase font size for better visibility */
    }
}
 
/* For screens smaller than 400px (very small mobile screens) */
@media only screen and (max-width: 400px) {
    .cta-button {
        padding: 25px 50px;  /* Further increase padding for very small screens */
        font-size: 20px;  /* Further increase font size */
    }
}

Now, let’s break it down. We have a standard code for the CTA button with padding equal to 15px and 30px. Besides that, via font-size: 16px, we set the standard font size for the button to 16px. Once you have this foundation, you can add responsive HTML email template rules to make your buttons more convenient on smaller screens.

For screens smaller than 600px, we set the padding to 20px and 40px, making the button wider and more touch-friendly. Besides that, the font size also increases to 18px for better legibility.

Meanwhile, if your recipients have screens smaller than 400px, we expand the CTA button even more, with the padding increasing to 25px and 50px, ensuring the button is easy to tap on very small screens. And let’s not forget about the font size, which will be increased to 20px once the email is opened on this screen size.

For example, this Read More button we’ve made responsive and it looks different on both mobile and desktop.

Turn links into buttons

Diving more into a better user experience. Regular links, which are often in the text on the desktop emails (for example, Terms of Service, shipping or return policy, etc.), can be made into full-fledged buttons that will attract attention and be convenient for touchscreen users. The media query for this looks like this:

/* Default text link styles */
a {
    text-decoration: none;
    color: #007BFF; /* Default link color */
    font-size: 16px;
}
 
/* For screens smaller than 600px (typically mobile devices) */
@media only screen and (max-width: 600px) {
    a {
        display: inline-block;
        padding: 15px 30px;  /* Turn the link into a button with padding */
        background-color: #007BFF;  /* Button background color */
        color: white;  /* Button text color */
        text-align: center;
        border-radius: 5px;  /* Rounded corners for the button */
        font-size: 18px;  /* Increase font size for better readability */
        width: 100%;  /* Make the button span the full width on mobile */
        box-sizing: border-box;  /* Ensure padding is included in width */
    }
}
 
/* For screens smaller than 400px (very small mobile screens) */
@media only screen and (max-width: 400px) {
    a {
        padding: 20px 40px;  /* Further increase button padding on small screens */
        font-size: 20px;  /* Increase font size even more */
    }
}

We have a standard link that is styled with the default color #007BFF and text-decoration: none so our links appear without an underline. Meanwhile, the font size for our links is 16px.

The next part looks complicated, but we’ll try to explain it in simple words:

• the tag becomes an inline-block, making it behave like a button;
• we’ve added the padding 15px and 30px to make it look like a button;
• we’ve also applied background color #007BFF, and made our text color white (color: white);
• our button needs corners, so we applied border-radius: 5px to create rounded corners for the button;
• meanwhile, the font size is increased to 18px for better readability;
• besides that, the device’s width is set to 100% so the button spans the full width of the screen on mobile devices;
• the last important thing is box-sizing: border-box ensures padding is included in the width calculation.

Let’s not forget about responsive HTML email template rules. The code above is needed to turn the link into a button when the screen is smaller than 600px. But our code also has a part for even smaller screens, where the padding of our button is increased further to 20px and 40px, making the button even bigger and more touch-friendly. Besides that, the font size is also increased to 20px.

And here’s how this responsive email approach can look like:

Web-safe fonts

Web-safe fonts are the cornerstone of responsive HTML email templates. The browser retrieves these fonts from the local font directory on the recipient’s device. Web-safe fonts are safe to use because there is a good chance that your subscribers already have them. These fonts include:

• Arial;
• Verdana;
• Tahoma;
• Courier New;
• Times New Roman;
• Trebuchet MS.

In addition to the web-safe font family, when choosing a font, it is also worth remembering about readability and line height, especially on mobile devices in major email clients. We have analyzed the most suitable fonts for creating email templates in a special article.

Single-column layout

Another nuance you should think about is the layout you optimize emails to. If you use a two or three-column structure for mobile, you may end up with content that is so small that it becomes unreadable, and the same goes for all the buttons and links. You should consider a mobile-friendly design that uses a single column. And on top of that, the clickable element should be at least 44×44 pixels. You can also use nested tables to control the structure and layout of your email content.

However, if you have a hard time coming up with a perfect single-column layout for your email design we have hundreds of free HTML email templates that you can gain inspiration from or use straight for your email campaign. So pick your best HTML email template and make your email marketing shine.

Preview and test your email

This isn’t exactly a technical tip, but it directly affects what email recipients see in their inboxes. The responsive HTML email template you create should definitely be previewed and tested. You can’t be 100% sure that your email works like you intended if you don’t test it. As a result, you can send emails that may not render properly or have a broken responsive design.

Yes, we know that email template previewing and testing can be quite tedious, especially if you need juggling multiple tools. We have a solution to make your life easier, as we provide you with extensive preview and testing tools for your email templates.

Before sending your template to your email marketing platform, you can easily preview your email and see what it will look like on both mobile and desktop devices.

Besides that, we have a direct integration with Email on Acid service. It’s a real life-saver for many email marketers, as it helps them by simulating how emails render on email clients like Gmail, Outlook, and Apple Mail. You can also check how your responsive email created with drag and drop editor will look on different mobile devices and browsers.

We’ve made a full-fledged guide that shows how to make a rigorous testing of your templates with this feature and what it brings to the table.

Wrapping up

Creating responsive email campaigns is definitely not a thing that you can quickly hop on. You should be prepared to work with code, brainstorming the most appropriate design decisions and rules for how your content must be shaped depending on the screen size it will be displayed on. However, by making this effort, you ensure compatibility of all the templates you create, no matter the screen size.

This guide aims to be an easy entry point for responsive HTML email template creation to help all marketers achieve better email design on mobile.