RESPONSIVE DESIGN BY COMMUNIGATOR

(1)

RESPONSIVE

EMAIL DESIGN

(2)

According to stats from Litmus, in 2014 at least 53% of emails were opened on a

mobile device. That is a huge increase from 2011 when the figure was as low as

8%.

We realised a couple of years ago that to accommodate this new trend in email opens we were going to have to drastically overhaul the way we designed and coded emails to ensure the best possible user experience and open rates for our customers and for ourselves.

By utilising responsive email design we have been able to detect the maximum screen size of the device used by a recipient of an email campaign and implement a specific set of CSS styles which in turn allows us to manipulate the design of the email, allowing it to display differently depending on the screen size in question, be it an internet enabled mobile phone, tablet or laptop.

Responsive email design requires a complete change of approach from static email design, all the way from concept to initiation.

The display of email on a mobile device differs greatly to an email viewed on your desktop computer. The most common problems include text that is too small to read, columns that are too narrow and heavily distorted layouts where the email design has been ‘squeezed’ to fit into a smaller window.

Following best practice guidelines we have always designed and built emails using HTML table code and inline styles and this is because emails have to be viewed on a wide variety of email clients, all of which render emails slightly differently to each other. Some support CSS and some don’t, others will strip out all content outside of the email <body> tags which is where style CSS usually sits.

With the arrival of the smartphone however we are able to include CSS in our email code so that we can manipulate how our communications are displayed across devices.

BUT CSS ISN’T BEST PRACTICE IS IT?

No, it’s not, which is why we’re only using CSS to control how the email looks on an internet enabled phone, not on a desktop computer.

HOW DO YOU DO THAT?

Easy, we use media queries!

(3)

MEDIA QUERIES

Media queries are a CSS3 module that allows the

way content is rendered to be adapted by applying conditions to elements such as screen resolution.

For example, a landscape view on an iPhone 5 and lower is 480px. Using a media query we can specify a particular set of styles to be implemented when your email is opened on a device with this maximum width.

Media queries DO NOT target specific devices or email clients, they are used to specify breakpoints in device screen width. If the device meets the width requirements and the email application accepts media queries, only then will the mobile version of your email be displayed.

WHERE DOES MY CSS GO?

The CSS for your email design goes at the very top of your email code, above all of the HTML content. Using CommuniGator you don’t need to include the HTML tags that you would if you were designing a website, all you need is the CSS and your email code.

<style> body {

background-color:#000000; }

</style>

SO HOW DO I WRITE A MEDIA QUERY?

An example of a media query for viewing emails on a device with a maximum width of 480px looks like the below:

@media screen and (max-width: 480px) {

GA

TOR

NO

TE

(4)

Using CSS might sound scary but it’s really not, once you get your head around how it’s written, you will be applying CSS classes in no time!

Currently we recommend applying styles to your email content by using inline style tags, an example of one is shown below:

<td style="font-family:Arial, sans-serif; color:#000000; font-size:12px;">This is your styled content</td>

IN A <TD> TAG

<span style="font-family:Arial, sans-serif; color:#000000; font-size:12px;">This is your styled content</span>

IN A <SPAN> TAG

ADDING CSS FOR USE ON MOBILE DEVICES

Writing styles using CSS is slightly different, you would put the formatting code at the top of the email between the two <style> tags and inside your media query.

So say you wanted to change the look of your content on a mobile device, you would write your CSS as follows:

@media screen and (max-width: 480px) { - Media query declaration

*[class=”body-copy”] { - Mobile device styles

font-family: Arial, sans-serif; color: #ff0000 !important; font-size: 14px !important; }

} – Closing curly brace of media query declaration

</style> - Closing style tag Now you begin your HTML code...

(5)

You would then need to apply the class name (in this case, body-copy) to the email content you want to have this particular style when viewed on a mobile/ smaller screen.

You call in your style using the class attribute.

<td style="font-family:Arial, sans-serif; color:#000000; font-size:12px;" class="body-copy">This is your styled content</td>

IN A <TD> TAG

<span style="font-family:Arial, sans-serif; color:#000000; font-size:12px;" class="body-copy">This is your styled content</span>

IN A <SPAN> TAG

Because the styles are inside of your media query they will only be activated when the specified device width is reached, leaving your desktop version to continue to display the inline styles already applied.

GA

TOR

NO

TE

(6)

The first thing you need to do with your mobile optimised email is to make sure you have a class applied to the master table which will reduce the overall width, for this example we’re using a media query with a max-width of 480px and want to reduce the table from 600px wide to 300px wide.

To do this you need to design your email template so that you have one table with all other tables nested inside. The nested tables shouldn’t have a fixed width, and instead be set to 100% so that they will resize automatically.

The code will look like this:

<tr>

</table></td> </tr>

</table>

You then need to create a CSS style inside of your media query which looks like this:

@media screen and (max-width: 480px) {

table[class="responsive-table"]{width: 300px !important;} }

(7)

However, we have defined it using an attribute selector because Yahoo! has a glitch which means that when viewing an email on a desktop email client, Yahoo! will use the styles defined inside the media query as the overriding styles to use, therefore using the styles you have defined for mobile use as its default. Luckily, Yahoo! ignores the styles if they’re using attribute selectors, so we need to make sure we code our styles like this:

table[class="responsive-table"]{ }

Back to our ‘responsive-table’ style. We have specified that when the email is viewed on a device with a max-width of 480px it is to change the width of the outside table (which has the class of ‘responsive-table’) to be 300px wide.

We have also used !important against the style to that it takes precedence over any other styles that might be applied.

Usually you would only define a class like:

.responsive-table { }

(8)

HOW DO I ENSURE MY IMAGES SCALE DOWN CORRECTLY?

When you add images to your email, be sure not to include the dimensions:

RIGHT

WRONG

You then need to create another style inside your media query so when images are displayed they are kept at their 100% width, but scaled down proportionally depending on the device the email is being viewed on:

img, object {max-width: 100%;}

Because you’re not applying dimensions to your images, they’re flexible in terms of their dimensions. Using this style means your images will display at the maximum widths they can be while scaling down proportionally when viewed on devices utilising a smaller width.

(9)

Because emails on mobile devices are on a much narrower screen and therefore more scrolling is involved it’s nice to have the ability to ‘hide’ elements of your design so that the mobile version is shortened and more streamlined.

If, for example, you have an article with a block of copy to the left and a thumbnail image to the right, you can opt to hide the image so that the content stretches the full width of the email design.

Firstly you need to include a class in your CSS, inside your media query, stating that anything that has this class applied will not be shown when the email is viewed on a mobile device.

The class looks like this:

*[class="mob-hide"] {display: none !important;}

All you then need to do is apply this class to any element of your email that you would like hidden when viewed on a mobile device.

(10)

Single column layouts work best when it comes to mobile devices.

Mobile screens are so much smaller, and narrower, that emails with more than one column tend to be cumbersome and difficult to read and navigate.

We recommend only using single column layouts when it comes to displaying emails on mobile devices. This is so you are using the maximum width for your articles, enabling your content to be clear and easy to interpret.

There is a nice simple way to do this that doesn’t require too much CSS effort, and it is outlined below.

HOW TO CREATE YOUR TWO COLUMN LAYOUT

Firstly you need to create a container table for your columns which includes the CSS class ‘responsive-table’ to reduce it from 600px wide to 300px wide on mobile devices:

</table>

Within this table you create your two columns, but because we want the content on the right to move underneath the content on the left when the email is viewed on a mobile, we need to create them as two separate,

independent tables.

This is your first table

Lorem ipsum dolor sit amet

Find out more

This is your second table

Lorem ipsum dolor sit amet

Find out more

Because your overall table width, as specified earlier, is 600 pixels, you would think you need to make two tables, each 300 pixels wide, and place them inside this container table. Not so. The lovely Outlook which uses Microsoft Word as its rendering engine likes to add its own padding to tables so you need to leave a gap in the middle to allow for this. 30px should be enough so your nested tables should be 285px wide each.

(11)

Align the table on the left, to the left and the table on the right to the right. This will ensure that the tables line up next to each other, rather than one underneath the other:

<tr>

</table>

</table></td> </tr>

(12)

<tr>

</table>

<!--[if gte mso 9]> </td>

</table></td> </tr>

</table>

ALTERNATIVE METHOD USING CONDITIONAL COMMENTS

Using the same method as above, if you didn’t want your email to have the 30px gap to allow for Outlook padding, you can use conditional comments in your HTML code.

An example would be:

<!--[if gte mso 9]> </td>

That comment basically says if this email is being opened in Microsoft Office 9 or greater then use this code.

This code basically turns the container table from one column (with two nested tables) to two columns, each with a nested table (you can see the closing <td> and opening <td> tags in the comment above).

(13)

The simpler your email is the better it will render on a mobile device.

Whilst it’s great that we can implement CSS to manipulate our designs for different devices we shouldn’t make it too difficult to begin with.

Keeping your email design simple means not only will it be easier to edit but it is far more likely to render correctly across a wide range of email clients on different devices.

SOME TIPS TO HELP YOU

• Keep your design to a one-column layout

• Design your email to no more than 600px in width

• The minimum font size displayed on an Apple iPhone is 13px, anything smaller than this in your email design will be scaled up and if you’re not careful, can cause your email to appear distorted

• Keep the important content at the top of your email, you need to scroll more on mobile devices than you do on desktop email clients

• Use the style attribute ‘display:none’ to hide unimportant elements of your email design on a mobile device

• Keep your fonts as large as possible and your content concise and to the point

• Place your buttons near the top and 44x44 pixels in dimension or larger. Remember, you’re designing for thumbs!

• Avoid using navigation bars, they will appear too small and fiddly on a mobile

• Space your links apart from each other otherwise you will rick people pressing the wrong one

MOBILE DESIGN TIPS

(14)

About CommuniGator

CommuniGator is one of

the leading marketing

automation software

providers in the UK.

Established in 2005, we’ve gone

through a period of evolution as the

marketing landscape has changed.

The core platform functionality caters to email

marketing with automated welcome series, a HTML

editor for designing your emails, templates, responsive

design, dynamic groups based on behaviour,

integration with the leading CRM platforms, an event

management suite, robust reporting and so the list

goes on.

On the marketing automation side we’re able to track

prospect activity across the web pages they visit on

your website and the email content they consume

and take action against. This means you can build up a

really detailed profile of who has done what.

To read all the juicy details of what the platform offers

and how we can help your business jump on over to

our website: www.communigator.co.uk

Give us a call: +44 (0)1483 411 911

This document and it’s contents are proprietary to CommuniGator or its licensors. No part of this document may be copied, reproduced or transmitted to any third party in any form without CommuniGator’s prior written consent.