How to create a responsive newsletter

How to create a responsive newsletter

According to the most recent data, the number of e-mails opened and visualized on smartphones amounts to more than 48%. Back in 2011 it was only up to 8%. (source Litmus).

Nowadays all e-mail communications will have to be responsive, properly visible and accessible on any device available on the market.

Using a template to make e-mails adaptable to every type of device will require some changes to the code that lies behind that template, and these changes can be fairly significant at times. This activity requires time and effort even if you are familiar with HTML and CSS programming, but luckily for you we have the instruments to help you.

Our e-mail marketing platform, AltosMail, allows you to create responsive newsletters through a really simple and intuitive interface, providing you with some ready-to-use templates.

Our graphic department can also create new custom templates for your, so that you can achieve a more efficient style of communication.

Otherwise, if you know how to use HTML and CSS coding and you’ve had experience in creating newsletters, you may gain advantage from some of our following tips:

Using Media Queries

Media queries are instructions relative to the CSS language which allow you to apply specific instructions based on the width of the device through which the e-mails are seen.

@media screen and (max-width: 640px)

This way we can write specific CSS instructions dedicated to devices that have dimensions smaller than 641px, and display a table from two columns down to one by placing the instruction display: block for example, applied to the tag .

@media screen and (max-width: 640px {
    td {display: block !important;}
}

In case we developed a template with only one column and tables nested inside one another (which would result next to each other on a desktop version) we could use another technique in which we define a width for the elements contained within the template, such as e

With regards to images instead, we presume that we have a tag within the code of the newsletter with a class inside it: “responsive-image”.

@media screen and (max-width: 640px {
    img[class="responsive-image"]{
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}

The fundamental aspect necessary to make responsive e-mails is using Media Queries to declare the rules by which to adapt the elements on the device.
To achieve the best adaptation possible it’s usually necessary to insert the classes in all the various tags, leaving the inline style for the e-mail providers who might not interpret the classes, such as Outlook.

Once you have implemented the CSS code it’s usually necessary to verify that the layout is apt for the different devices. The most immediate way of checking this simply involves sending the newsletter to your personal device. Ideally you should own many different devices, even the outdated ones, and always be ready to purchase the new models which have just been released.

A valid alternative to this (simple, immediate and always up to date) is using the Device Emulator provided by AltosMail, which allows you to immediately verify the actual result (WYSIWYG) for every device.
With our platform you can test up to 50 mail providers in one go and check the graphic appearance immediately.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn