RESPONSIVE DESIGN OUR GUIDE TO HELPING YOU GET STARTED

(1)

RESPONSIVE

EMAIL DESIGN

OUR GUIDE TO HELPING

(2)

Email today is viewed in a number of different ways; from different email clients, using different browsers, on different devices and then on to different environments. The email experience your customer receives can either draw them in or drive them away. However, it can be difficult to make sure they receive the best possible email experience for the device they are using, at the time they want to view your message.

While many websites are now

optimised for the device they are being viewed on and respond accordingly, email messages still lag behind as many companies are yet to use

Responsive Email Design throughout their email campaigns. However, innovative companies are improving their conversion rates by delivering immersive email experiences; including dynamic design elements that are tailored to customers’ needs and to their particular viewing device.

The Communicator responsive email best practise guide will discuss our recommendations on how to transform your customers email experience,

based on some of our best work. This includes numerous desktop, mobile, and tablet implementations utilising Communicator expertise.

We can help you optimize your email campaigns with Responsive Email Design to deliver excellent customer focussed email experiences. This will help you serve your customers’ needs and preferences and strengthen relationships, ultimately building a more profitable relationship. As we’re sure you’re aware, mobile devices and their capabilities are forever changing and likewise so are the techniques used to make sure that emails render correctly on the range of available email clients.

Stephen Hill, Senior Designer

WELCOME TO OUR

RESPONSIVE EMAIL

DESIGN GUIDE

(4)

WHAT IS RESPONSIVE DESIGN?

It’s commonly recognised that by 2014, mobile internet usage will overtake that of

desktop internet usage. Even now it’s believed that currently 1 in 5 emails are being read on a mobile device. With this in mind, it is clear that any companies looking to take email marketing efforts more seriously, cannot afford to ignore responsive design.

For a while now web designers have dealt with designing for mobile, by having 2

different sites i.e. a maximum resolution one for desktop (www.communicatorcorp.com) and a minimum resolution one for mobile (mobile.communicatorcorp.com). Depending upon which device the site was viewed on, it would automatically choose which version of the site you ended up on.

However, for Marketing departments this then becomes challenging; 2 different layouts, 2 different ways of working, and possibly even 2 different types of content i.e. one long, one short. Not only that but sharing content between devices proves difficult.

For example, say a customer was viewing an interesting blog post on their mobile and wanted to share it with the rest of their office - it’s highly likely that the rest of their office would then be locked into viewing it on that context – creating a poor user experience.

Responsive Design is a current trend which reacts to a user’s actions and detects the device which the site is currently being viewed on, in order to provide the best user experience possible (in terms of navigability and readability). In short - the type of device the user views the initial website on, influences the experience they receive. Meaning they view the email in the best possible way for them, at that particular time. Example below:

(5)

WHAT ABOUT EMAIL?

Due to the variety of different email clients on the market, support on mobile devices is challenging. This is something we stress to anyone looking to use a responsive email design.

iPhone, iPad and Android devices all use the WebKit rendering engine, therefore it comes as no surprise that the support for @media queries between the two on their in-built mail clients is pretty good. However, there are some anomalies between the two; and one comes in the shape of Gmail’s own app that you can download on both iPhone and Android. Since the Gmail Web Client doesn’t support embedded CSS (and @media queries is a variant of that), media queries are not supported in any of the Gmail mobile apps either.

The other anomaly we’ve found during testing, is mixing the default Android email client, and email addresses which use a Microsoft Exchange Server to deliver those emails (usually Exchange 2010). In this instance, the required code to enable a responsive

design is stripped out by the server and users are faced with the standard email instead.

Blackberry are slowly moving towards using the WebKit rendering engine, but aren’t quite there yet. Therefore we would expect support to improve as newer devices appear on the market. As it stands, only operating system 4.7.1 and greater have partial support for @media queries.

Windows 7 handsets are different in the fact that the browser’s base functionality is built upon a hybrid of Internet Explorer 6 & 7, which do not support @media queries at all. This means that users of Windows 7 handsets will can only receive the basic email.

(6)

SO WHAT ARE THE PROS AND CONS?

Firstly, the most important benefit is that responsive design provides a much better user experience for the customer. Anything that’s styled for the device it’s being read on, is always likely to vastly improve the user experience, ultimately enhancing the customer relationship with a view to driving sales and subscriptions etc.

It also means there is no need for a ‘separate’ mobile email template. Having a ‘separate’ template is something we would always class as a ‘poor man’s’ responsive design. By all means capture user preferences as to whether they want to receive emails on their mobile device, but sending a ‘mobile only’ email means that there is always going to be that one time when the user does end up viewing an email on their computer - and although viewing a 300 pixel wide email on your computer isn’t the end of the world, responsive email design would solve that problem.

On the flip side, there needs to be an understanding that template/email layouts need to be much simpler. Single / two column layouts render best on mobile devices. They’re easier to read, and if somehow they do not render as expected on the mobile devices (which don’t fully support various techniques), they degrade much more gracefully.

It should be understood that current templates/emails cannot just be switched to be made ‘mobile-friendly’. Responsive design means a change of approach; from design to dispatch.

Finally, adding mobile-specific styles shouldn’t be confused with providing a slimmer or faster-loading version of your content. Mobile-specific styles just make the content easier to read on the device. In effect, the user will still effectively be downloading all of the content.

(7)

HOW CAN I BUILD A RESPONSIVE

TEMPLATE?

DESIGNING FOR MOBILE FIRST

More often than not, the mobile experience for a website / application is often designed after the desktop version – an afterthought if you will. To build a true responsive email it’s imperative that this approach is reversed and the mobile version is designed first. Designing for the mobile environment comes with a natural set of constraints – the most obvious one is screen space. Losing in the region of 80% of the screen space you are used to when designing for web / desktop email, forces you to focus on making sure that what stays on the screen is the most important set of features/information for your customers and your business.

Never has it been more important to understand the main goal of an email e.g. SquareSpace

Not only have SquareSpace utilised a single column approach which lends itself nicely to a responsive email, it has also ensured that they have remained focused on what their main call to action is, which in this case is obviously trying to get customers to purchase a bespoke domain name.

Research has shown that during a typical day: 84 per cent of people will use their smartphone at home, 80 per cent during miscellaneous times during the day, 74 per cent waiting in queues, and 64 per cent at work.

(8)

This comes mostly in short bursts; so not only will designing for mobile first mean a better user experience overall, but it will also give you the chance of slimming down the file size of your email - enabling people to access and read your emails quickly on the go using a mobile connection e.g. 3G, at their convenience.

A good example of using the ‘mobile first’ mentality is below. The email on the left (90% images and even longer than the screenshot suggests) wouldn’t work as a responsive email. Not only because of the slow loading nature of the large images when viewed on a mobile, but structure wise, it isn’t built using a single / two column layout.

The layout on the right however has been generally built with mobile in mind. It uses a mixture of 1 and 2 column layouts, is short and punctual, has a nice blend of text and images and more importantly will load relatively quickly using a mobile connection.

(9)

CODING A MOBILE TEMPLATE

In general, a lot of the best practice guidelines we recommend in our regular template guidelines, run true when building a responsive template. For example, where possible we always recommend using Inline Style Sheets (ISS) over its External and Embedded CSS brothers and sisters. The reason for this is that most web-based email client’s strip out any External and Embedded style sheets from the email header, resulting in the final email being displayed incorrectly using the default browser fonts. ISS, however, performs much better.

One key difference is that building a responsive template/email for mobile devices requires the use of CSS3 media queries (a variation of Embedded CSS which we normally recommend avoiding). For example:

@media only screen and (max-device-width: 480px) { table[class=”hide”] { display: none !important; }

img[id=”logo”] { width: 50px !important; height: 25px !important; } }

Breaking the above down, all the code is saying, is that when a device with a maximum resolution of 480 pixels or below views this page (for example an iPhone), then apply the following styles. Then within the email itself all we have to do is ‘reference’ the relevant style at the right time e.g.

When the email is viewed on a mobile device, the email (in this case the logo image (logo.jpg)) adapts based on these rules; however, it leaves any device using a bigger resolution (e.g. PC’s), untouched. Using the above as a guide, the media query can then be adapted based on a number of potential mobile resolutions should it need to, but as a guide; 480px is a good enough starting point to cover most mobile devices.

One thing you may have noticed which is different from your standard Embedded CSS, is the introduction of square brackets around class names. These are called ‘Attribute Selectors’ and the main point of these are to fix a well-known problem in Yahoo! Mail. For some unknown reason, Yahoo! Mail gives precedence to the @media query, which means that even if you view the email on a PC, you will still be faced with the mobile optimised version of the email (Fig 1 below). Using the ‘Attribute Selectors’ ensures the correct version is not only served up to Yahoo! Mail recipients but it leaves emails viewed in other email clients untouched.

(10)

BUILDING A SINGLE COLUMN TEMPLATE

Single column templates are by far the easier option when it comes to designing a

responsive template i.e. they’re easier to code, and if things don’t render as you’d expect, they degrade much more gracefully. Using the above media query as a guide we can do the following:

@media only screen and (max-device-width: 480px) { table[class=table-shrink] { width: 325px !important; } }

Then, similarly to the logo example detailed above, we can then ‘reference’ that class on the relevant table:

<table width=”650” border=”0” align=”center” cellspacing=”0” cellpadding=”0” class=”table-shrink”> <tr> <td bgcolor=”#FFFFFF” valign=”top”>{{MainBody_650_325}}</td> </tr> </table> (Fig 6)

(11)

BUILDING A TWO COLUMN TEMPLATE

Building a two column template, although slightly harder, can still be done without having to resort to adding too much code to the main @media query or the template itself. In theory, the idea is that the second column will wrap underneath the first column when viewed on a mobile device:

To achieve the desired result when building a website, CSS properties such as float: left; would naturally be used but as we’re building an email, older HTML attributes such as align=”left” are an adequate replacement.

In the following example we will take a 650 pixel wide table with one table cell, and inside that table cell we insert 2 nested tables; one with the width of 325 pixels which is aligned left, and another similar table which is also 325 pixels wide but this time with no align property.

The outcome when viewed on mobile will cause the table with no align property to wrap underneath its partner. The code to achieve this looks as follows; firstly the @media query:

@media only screen and (max-device-width: 480px) { table[class=table-shrink] { width: 325px !important; } }

(12)

Secondly, the HTML itself:

<tr>

<td valign=”top”>{{Column1_325}}</td> </tr>

</table>

<table width=”325” border=”0” cellspacing=”0” cellpadding=”0”> <tr> <td valign=”top”>{{Column2_325}}</td> </tr> </table> </td> </tr> </table> (Fig 8)

BUILDING A FLUID TEMPLATE

(13)

@media only screen and (max-device-width: 480px) { table[class=table-shrink] { width: 100% !important; } }

This slightly amended @media query will mean that when a device with a maximum resolution of 480 pixels or below views this email, no matter what resolution the device has, the table will change to 100%. For single column templates this is a relatively small change; however for two columns it becomes slightly harder and requires some small amends to the template’s HTML:

<tr>

<td valign=”top”>{{Column1_325}}</td> </tr>

</table>

<table width=”50%” border=”0” cellspacing=”0” cellpadding=”0”> <tr> <td valign=”top”>{{Column2_325}}</td> </tr> </table> </td> </tr> </table>

As you can tell from the above HTML, we have amended the two side-by-side tables to percentages (50%) rather than fixed widths. Very little changes when viewed on either desktop or webmail client, but by changing it to a percentage means a fluid layout on mobile devices.

N.B. Because of the fluid nature of these templates, the chances of something not rendering as expected is much greater. We would recommend testing thoroughly on multiple devices before dispatching.

Our final bit of advice is that although ‘fluid’ templates may seem the way forward, it’s important that a wider view of your target audience is taken. For example, when using Communicator’s report module, you may see as an example that 90% of your recipients view your emails on one type of mobile device e.g. Apple iPhone. In this case, it may

(14)

HOW CAN I BUILD A RESPONSIVE

EMAIL?

From the above sections, you have seen how to design and build a responsive template. The following section shows how to build an email from that new responsive template using Communicator.

Importing your responsive template is exactly the same as importing any other template. Simply store all of your template images in the same location as your HTML file (i.e. don’t put the images into their own sub-folder), then create a ZIP file containing all of your images as well as your template HTML, then upload it into Communicator.

CREATING FLUID IMAGES IN A RESPONSIVE EMAIL

Mobile devices can come in all shapes and sizes so it’s important that no matter what resolution mobile the user has, the images and text make use of the screen size as much as possible. One solution is to create fluid images; which similar to a fluid template, shrink and stretch depending on the device.

To do so, an added @media query can be used in the main template which can then be ‘referenced’ when building the email. The added @media query looks like so:

@media only screen and (max-device-width: 480px) { img[class=responsive-image] {

width: 100% !important; max-width: 100% !important; height: auto !important; } }

To reference this class when building your email within Communicator, follow the steps below:

1. In the ‘Template Manager’, select your template; press the ‘Actions’ button beside it, then press ‘Create Email’.

2. Select your required mailing list and give your email a name.

3. Double-Click on the required placeholder to enter the WYSIWG editor. 4. Insert an image via the ‘Image Manager’ (Fig 2).

5. Swap to the ‘HTML’ view using the button at the bottom of the editor and then include the class appropriately on the image e.g. <img class=”responsive-image”> (Fig 2).

(15)

N.B. Because of the ‘max-width: 100%’ property on the @media query, it’s important that any image you insert into the relevant placeholder has been saved at the appropriate fixed dimensions. For example, if the width of the placeholder is 600 pixels, when viewed on desktop and webmail clients, it’s important that the image you use is saved at exactly 600 pixels.

Inserting an image which is too big for the placeholder to begin with and scaling it down using Communicator rarely produces good results.

HIDING/ SHOWING CONTENT

Although very much a contentious issue amongst Web / Email Designers, some may find it necessary to pick and choose which content to display to recipients when viewing the email on mobile devices. The argument is that most mobile users do everything desktop users will do, so all content should remain the same, only presented in a usable way. This is very much a judgement call, however should you choose to remove certain content on mobile devices e.g. limiting the amount of stories; this is how you do it:

@media only screen and (max-device-width: 480px) { td[class=table-cell-hide] { display: none !important; } }

The above @media query is saying when a device with a maximum resolution of 480 pixels or below views this page, then set the content (in this case a table cell) not to display. To reference this class in Communicator, we follow a similar process to that of when we want to insert a fluid image:

1. Presuming you have already created an email from your responsive template, double-click on the required placeholder to enter the WYSIWG editor.

2. Insert a table via the ‘Table Wizard’ (Fig 10).

(16)

(Fig 10)

PUTTING IT ALL TOGETHER

Email recipients seek personalised, relevant content delivered to them efficiently for the device that they are viewing your email message on. The primary goal of Responsive Email Design is to enhance the recipients email experience and help companies achieve the full revenue potential from the email channel. To optimise the email experience, customers and prospects must be offered the best experience possible within their inbox. Responsive Email Design will elevate the email experience for the recipient to make itenjoyable, relevant and rewarding for you

.

The techniques and best practices used and discussed within this guide are based on our experience of Responsive Email Design and are to be used as a starting point to your responsive email design program. By altering and enhancing the above code, as well as using the core functionality found in Communicator, you can achieve your desired outcome on mobile devices with relatively little effort.

If you’d like to know more about Responsive Email Design, or would like the

Communicator design team to design and build a bespoke responsive template using the above best practice know-how and expertise, please contact your Account Manager for more information.

(17)

ABOUT COMMUNICATOR

Communicator first entered into email broadcasting in 1999 and has since grown into the UK’s leading global enterprise management company. We provide technology, strategy and expertise across the key digital channels of email, mobile,social and web, to enable successful and profitable marketing campaigns.

Cross-channel marketing and consumer interaction is essential to building brand communications and driving revenue from new and existing consumers in the current market. Communicator are part of the Trinity Mirror group, the UK’s largest multi-platform media business with 5 national newspapers, 130 regional titles and over 500 digital sites. As a result Communicator are the only email service provider capable of combining email, mobile, social and web campaigns with targeted offline advertising and editorial to provide true cross channel value.

It is our opinion that successful cross channel marketing is driven by data, yet few organisations have the capability to consolidate disparate data sources together into a single customer view - thus they are unable to unlock the power of their own customer data. To facilitate this we have invested heavily in Communicator, including full relational data capabilities.

Communicator combines an easy to use, yet functionally-rich user interface with secure, robust and scalable underlying infrastructure.

Our experience tells us that technology must be aligned with knowledge, thought leadership and management to enable clients to achieve their business goals. Our Professional Services team covers the key disciplines of Campaign Management, Consultancy, Deliverability, Email Design, Integration, Reporting and Training.

(18)

THOMSON HOUSE, GROAT MARKET,

NEWCASTLE UPON TYNE NE1 1ED

UNITED KINGDOM

RESPONSIVE DESIGN OUR GUIDE TO HELPING YOU GET STARTED

RESPONSIVE

EMAIL DESIGN

OUR GUIDE TO HELPING

CONTENTS

WELCOME TO OUR

RESPONSIVE EMAIL

DESIGN GUIDE

WHAT IS RESPONSIVE DESIGN?

WHAT ABOUT EMAIL?

SO WHAT ARE THE PROS AND CONS?

HOW CAN I BUILD A RESPONSIVE

TEMPLATE?

DESIGNING FOR MOBILE FIRST

CODING A MOBILE TEMPLATE

BUILDING A TWO COLUMN TEMPLATE

BUILDING A FLUID TEMPLATE

HOW CAN I BUILD A RESPONSIVE

EMAIL?

CREATING FLUID IMAGES IN A RESPONSIVE EMAIL

HIDING/ SHOWING CONTENT

PUTTING IT ALL TOGETHER

ABOUT COMMUNICATOR