Responsive Email Templates

Why Do We Need User-Friendly Designs and How to Create them?

The most essential feature of any product, be it a service or an application, is user-friendliness. The same can be said about email templates. 90% of email receivers read the emails on their phones, therefore creating mobile-friendly email templates is a necessity.

The concept of responsive web development was first proposed by Boston designer Ethan Marcotte in his book “Responsive Web Design”, where he describes the process of creating responsive email templates as follows;

By marrying fluid, grid-based layouts and CSS3 media queries, we can create one design, that, well, responds to the shape of the display rendering it

So the idea of creating responsive email templates is providing content that is optimized for the user’s various devices. Responsive Email uses media queries, which identify the size of your device and demonstrate the content based on the detected information.

Why to implement responsive email templates?

  • The number one reason of creating user-friendly designs is that according to Constant Contact study 75% of email receivers would delete the mail if it’s not convenient to read without further zooming and scrolling.
  • Secondly, being a great tool for easily engaging the customers, responsive email templates are the future of email marketing.
  • On the third place is navigation: The readers do not have to pinch or zoom in order to read the content. Better optimized content and buttons clearly suggest to them what they should pay attention to or where to click.
  • In addition, responsive email templates make it possible to enlarge fonts, change colors, hide content, scale images etc.

How to implement responsive email templates?

Before diving into coding, I suggest discussing the optimization of a couple of elements, as there are certain criteria a developer should follow when coding.

Responsive email templates include optimization of the following elements;

It is highly recommended to create single-column layouts, which are no-wider than 500-600 pixels.

For iPhones the minimum size of fonts is 13 pixels, for Androids, it is preferable to use at least 14 pixels. Anything smaller will break the layout.

Links and buttons should have a minimum size of 44×44.

Images are made fluid in responsive email templates; when coding, set the max-width of the image 100%, which means that regardless their original with, they are optimized for all the types of screens.

Including above-mentioned rules, one of the most important tasks is to pay a detailed attention to devices you target. Various devices have differences in screen resolution and support different media queries. The iPhone 4, for example, has 2 device pixels per CSS pixel, it has a regular screen layout viewport of 640×960. This means that the device-width of the iPhone4 is 320×480.

Here is a snippet of the code which is written based on above-mentioned general rules

.standardCSS {
color: #5d5d5d;
font-size: 20px;
@media only screen and (max-width:480px) {
.mediaQueryCSS {
color: #d9d9d9 !important;
font-size: 25px; !important;

Creating responsive email templates we ensure convenience for the users, which is for us as developers one of the most important goals. Above I have presented the basic concepts related to responsive email templates, however, if you are going to implement one, I suggest exploring the following source as well.


Leave a Comment