RESPONSIVE DESIGN BY COMMUNIGATOR

Size: px
Start display at page:

Download "RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR"

Transcription

1 RESPONSIVE DESIGN BY COMMUNIGATOR

2 RESPONSIVE DESIGN According to stats from Litmus, in 2014 at least 53% of s 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 opens we were going to have to drastically overhaul the way we designed and coded s to ensure the best possible user experience and open rates for our customers and for ourselves. By utilising responsive design we have been able to detect the maximum screen size of the device used by a recipient of an campaign and implement a specific set of CSS styles which in turn allows us to manipulate the design of the , allowing it to display differently depending on the screen size in question, be it an internet enabled mobile phone, tablet or laptop. Responsive design requires a complete change of approach from static design, all the way from concept to initiation. The display of on a mobile device differs greatly to an 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 design has been squeezed to fit into a smaller window. Following best practice guidelines we have always designed and built s using HTML table code and inline styles and this is because s have to be viewed on a wide variety of clients, all of which render s slightly differently to each other. Some support CSS and some don t, others will strip out all content outside of the <body> tags which is where style CSS usually sits. With the arrival of the smartphone however we are able to include CSS in our 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 looks on an internet enabled phone, not on a desktop computer. HOW DO YOU DO THAT? Easy, we use media queries! 2 Responsive Design by CommuniGator

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 is opened on a device with this maximum width. Media queries DO NOT target specific devices or clients, they are used to specify breakpoints in device screen width. If the device meets the width requirements and the application accepts media queries, only then will the mobile version of your be displayed. GATOR NOTE WHERE DOES MY CSS GO? The CSS for your design goes at the very top of your 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 code. <style> body { background-color:#000000; } </style> <table width="100%" cellpadding="0" cellspacing="0" border="0"> SO HOW DO I WRITE A MEDIA QUERY? An example of a media query for viewing s on a device with a maximum width of 480px looks like the screen and (max-width: 480px) { } CommuniGator Ltd 3

4 IMPLEMENTING CSS 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 content by using inline style tags, an example of one is shown below: IN A <TD> TAG IN A <SPAN> TAG <td style="font-family:arial, sans-serif; color:#000000; fontsize:12px;">this is your styled content</td> <span style="font-family:arial, sans-serif; color:#000000; fontsize:12px;">this is your styled content</span> 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 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: <style> - Opening style 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... <table width= 600 cellpadding= 0 cellspacing= 0 border= 0 > 4 Responsive Design by CommuniGator

5 You would then need to apply the class name (in this case, body-copy) to the content you want to have this particular style when viewed on a mobile/ smaller screen. You call in your style using the class attribute. 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. GATOR NOTE IN A <TD> TAG IN A <SPAN> TAG <td style="font-family:arial, sans-serif; color:#000000; fontsize:12px;" class="body-copy">this is your styled content</td> <span style="font-family:arial, sans-serif; color:#000000; fontsize:12px;" class="body-copy">this is your styled content</span> CommuniGator Ltd 5

6 CHANGING YOUR WIDTH The first thing you need to do with your mobile optimised 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 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: <table width="600" cellpadding="0" cellspacing="0" border="0" class="responsive-table"> <td><table width="100%" cellpadding="0" cellspacing="0" border="0"> <td> </td> </table></td> </table> You then need to create a CSS style inside of your media query which looks like screen and (max-width: 480px) { table[class="responsive-table"]{width: 300px!important;} } 6 Responsive Design by CommuniGator

7 Usually you would only define a class like:.responsive-table { } However, we have defined it using an attribute selector because Yahoo! has a glitch which means that when viewing an on a desktop 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 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. CommuniGator Ltd 7

8 SCALING IMAGES HOW DO I ENSURE MY IMAGES SCALE DOWN CORRECTLY? When you add images to your , be sure not to include the dimensions: RIGHT <img src="images/image.jpg"> WRONG <img src="images/image.jpg" width= 650 height= 44 > 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 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. 8 Responsive Design by CommuniGator

9 HIDING ELEMENTS Because s 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 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 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 that you would like hidden when viewed on a mobile device. CommuniGator Ltd 9

10 2-TO-1 COLUMN LAYOUT Single column layouts work best when it comes to mobile devices. Mobile screens are so much smaller, and narrower, that s 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 s 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 width="600" border="0" cellspacing="0" cellpadding="0" class="responsive-table"> <td> </td> </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 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. 10 Responsive Design by CommuniGator

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: <table width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <td><table width="285" border="0" align="left" cellpadding="0" cellspacing="0"> <td> </td> </table> <table width="285" border="0" align="right" cellpadding="0" cellspacing="0"> <td> </td> </table></td> </table> CommuniGator Ltd 11

12 ALTERNATIVE METHOD USING CONDITIONAL COMMENTS Using the same method as above, if you didn t want your 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> <td align="left" width="300" valign="top"> <![endif]--> That comment basically says if this 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). The conditional statement would go between your nested tables, so the full code would look like the following: <table width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <td><table width="300" border="0" align="left" cellpadding="0" cellspacing="0"> <td> </td> </table> <!--[if gte mso 9]> </td> <td align="left" width='300" valign="top"> <![endif]--> <table width="300" border="0" align="right" cellpadding="0" cellspacing="0"> <td> </td> </table></td> </table> 12 Responsive Design by CommuniGator

13 MOBILE DESIGN TIPS The simpler your 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 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 clients on different devices. SOME TIPS TO HELP YOU Keep your design to a one-column layout Design your to no more than 600px in width The minimum font size displayed on an Apple iphone is 13px, anything smaller than this in your design will be scaled up and if you re not careful, can cause your to appear distorted Keep the important content at the top of your , you need to scroll more on mobile devices than you do on desktop clients Use the style attribute display:none to hide unimportant elements of your 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 CommuniGator Ltd 13

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 marketing with automated welcome series, a HTML editor for designing your s, 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 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: Give us a call: +44 (0) 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. Our products and services include: MarketingAutomation I GatorMail I GatorLeads I GatorEvents I GatorDocs I GatorExpress GatorSurvey I GatorSocial I GatorData I CRM Integration I Managed Services