Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013
Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive Email Design. Yes, this is a big change in doing things and it s not simple, but don't be worried if you are a little intimidated by it. We've been testing responsive design for awhile in order to help you answer the four burning questions everyone seems to have: 1. What is it? 2. Is it worth the effort and cost? 3. Can you really see a difference? 4. How do you build a responsive email design template? What is Responsive Email Design? Responsive Email Design addresses the need to design emails that can adjust to a range of screen sizes and resolutions. In responsive email design, a marketer would design an email that would automatically display an optimized version of the email depending on the device in which the email is viewed, as opposed to developing (for example, one email for desktops and a second mobile version for mobile devices). Responsive Email Design has more limitations than Responsive Web Design because of the inconsistency of rendering across email clients (such as Outlook, Gmail and Yahoo), lack of CSS support across email clients, and the inability to use scripts to aid with optimizing emails. Is it worth the effort and cost? Consider the following statistics: 38% of email is now opened on a mobile device, with 33% for desktop and 29% for webmail Litmus "Email Analytics" (September 2012) 78% Of U.S. Email Users Will Also Access Their Emails Via Mobile By 2017 Forrester Research Email Marketing Forecast 2012 2017 (2012) 56% of U.S. consumers made at least one purchase using their smartphone in response to an email 88% of smartphone owners check their email on the mobile phone daily
The above two charts make it clear that mobile email is very important. Mobile email will dominate over other types of email as more people purchase mobile devices. What does mobile mean? It can mean emails opened on a smartphone (with the lion s share going to the iphone and Android phones) as well as tablets such as Apple s ipad and Google s Nexus 7 or Nexus 10. What does all of this mean? When designing an email, marketers can no longer afford to ignore mobile email. Marketers must now consider how their emails will look on different sized screens across different media devices. Therefore, the effort and cost associated with responsive design is worth it. Consider this email that does not utilize responsive design:
Non Responsive Design Responsive Design
What were the differences? 1. Text automatically converted to 22px for easier viewing 2. Header text does not appear to condense email length 3. 2-column email collapsed to one column email 4. Email width is slimmer, no need to scroll horizontally to see entire email 5. Social Media icons appear double size for easy screen clicking How Do You Build a Responsive Email Template? Using media queries is a great method to implement Responsive Email Design. Happily, in the hospitality industry, for now, most mobile emails are read on ios devices, which use the Webkit rendering engine which has great support for CSS. This makes media queries a consistent method that will work across the majority of mobile devices. A media query is CSS code in your HTML that can check the following: Width and height of the browser window Device width/height Orientation (landscape vs. portrait) Resolution Then, depending on the query results, the HTML will render accordingly. Typically, when an email is designed with encoding for media queries, the email will become narrower, large images will become smaller, and text sizes become larger for easier viewing on a mobile device. Sometimes entire sections of an email will disappear when viewed on a mobile device, so as to condense the length of the email. The breakpoint for a media query is generally at 480px width, which is the landscape view of an iphone (iphone screens measure 320px by 480px). A media query takes this form: @media only screen and (max-width: 480px) { insert smartphone-specific style declarations for smartphone viewing here The code above tells the device that all code between the brackets applies to only devices where the screen is smaller than 480px. All desktop screens are wider than 480px; therefore, when the email is viewed on a desktop, the code in between this section is ignored; while the code is applied when viewed on a mobile device. In between these brackets are instructions for HTML formatting when the email is viewed on a mobile device. Instructions inside media queries can include: Increasing font size, so there is no need to zoom in to see the text Decreasing the email width, so that the email width fits flush with the smartphone Collapsing sections to make the email shorter in length Converting multi-column emails into a single-column email Decreasing image sizes Increasing sizes of social media buttons, to make it easier to tap with a finger on a phone Changing the image resolution for retina displays
What we want to do Build a fully responsive HTML email that displays properly in a desktop web browser as well as a mobile web browser and email client.
HTML Container CSS Styles Smartphone Style Desktop Styles Golden Rules There are a few Golden Rules to follow when doing responsive HTML design: Design using a one column layout. Using more than one column is usually not a good layout choice for small screens as those present in mobile devices. Never write styles in pixels. Try to always use relative sizes (%). And if that's not possible, you will always have to use media queries to adapt your element between different viewports. Remember that 300px looks completely different in a desktop or notebook monitor than in a mobile display. Don't repeat styles for the font family and font size in each paragraph, just once in the table tag is sufficient. Creating a Responsive Design Email The Email Container The first element we need to develop a responsive email is the main container. We will use a 600px width container for the desktop and a 100% width container for mobile devices. (See next page) The first thing we note in this code is the CSS Styles block in the top of the HTML. This block is composed of two segments. The first one (in red) is used for displaying the email in a desktop or notebook computer, while the second segment is used only for mobile devices. Each of these segments has two CSS rules. The first one sets the width of the container and its margins, while the second sets the font family, size and line height of the text in the email. The most important things to see at this point is that the container width is 600px for desktop while 100% for mobile and the font size differs from desktop to mobile, being almost twice as big in mobile than in desktop. This is one of keys when designing for mobile as we want to avoid the user constantly zooming in and out. <style type="text/css">.container { width: 600px!important; margin: 2em auto; * { font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 20pt; @media only screen and (max-device-width: 480px) {.container,.container table { width: 100%!important; max-width: none!important; * { font-family: Helvetica, Arial, sans-serif; font-size: 18pt; line-height: 28pt; </style> The second block (in green) corresponds to the HTML container where the email content will be placed. As we can see this container is a table inside a div tag. We should note that although designing layouts with tables is highly undesirable because of its rigidity, we have to do it this way because we want to maintain compatibility with Outlook. The width of the container div and table should match the width in the CSS styles. So in this case the div tag s max-width attribute should be 600px, and the table's width and max-width attributes should also be 600 in the first case (the width attribute for a table doesn't need the px suffix) and 600px in the second case. <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 600px; margin: 1em auto;" class="container"> <table width="600" style="width: 100%; max-width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 20pt;"> <!-- Here goes the content of the email--> <!-- End of the email content -->
Changing Email's Width for the Desktop The email container we defined above is set to 600px for a desktop. Let's show how to change it to 700px (but still maintaining 100% width for mobile). We will display only those lines of code that have to be changed. <style type="text/css">.container { width: 700px!important; margin: 2em auto; </style> <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 700px; margin: 1em auto;" class="container"> <table width="700" style="width: 100%; max-width: 700px;" align="center" border="0" cellpadding="0" cellspacing="0" style="style="font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 20pt;"> </div> Changing the Email's Font If we want to change the email font by default you can do it easily by changing the font-family in the CSS styles block and in the container table tag. The default font we are using in our example is Helvetica, but let's suppose we prefer to use Comic Sans as our preferred font. <style type="text/css"> * { font-family: Comic Sans ms, cursive; @media only screen and (max-device-width: 480px) { </style> * { font-family: Comic Sans ms, cursive; <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 600px; margin: 1em auto;" class="container"> <table width="600" style="width: 100%; max-width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: Comic Sans ms, cursive; font-size: 10pt; line-height: 20pt;"> </table> </div> Changing the Email's Border If we want to change the color border of the email we only have to change one line of code. Let's first suppose we want to change the border color from the current grey color to a green border (hex color code: #249100) <div style="border: 1px solid #249100; width: 100%; max-width: 700px; margin: 1em auto;" class="container"> </div> And now, as a second example, we will show how to remove the border. <div style="border: none; width: 100%; max-width: 700px; margin: 1em auto;" class="container"> </div>
Adding Email Content Now we ve defined a responsive container for different devices, we can start adding content to our email. We will do that in the HTML container section of the HTML. As we can see the inner container is a table, so each block of the email is going to be a row inside this table. It is important to note that we will use a single column table for the content, because this is the best and easiest way to create good looking designs for mobile devices. <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 600px; margin: 1em auto;" class="container"> <table width="600" style="width: 100%; max-width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica, Arial, sans-serif;"> <!-- Here goes the content of the email--> </table> </div> <!-- End of the email content --> Adding a Header Image Let's build our email following a top-bottom approach. The first element we are going to insert is a big header image with a nice picture and our logo. But we can't simply add an image tag, it has to be inside one row in the table, so we will wrap it with the row tags (<tr><td>image). <!-- Here goes the content of the email--> <tr><td> <img style="width: 100%" src="http://images.zmaildirect.com/img/73pnsds/bjkxi/images/responsive.png" /> <!-- End of the email content --> An important point when adding images to a responsive layout is that we never use width or height in absolute amounts (i.e. dimensions defined in pixels). We should always use relative dimensions (i.e. %). Here we are defining the image to fill all of the space (100%) that the container provides. Note that we don't have to specify the height of the image because the browser or email client will display it according to the width we specified. It's a good practice not to define the height of any image, just the width in %. Adding a Text Block In the following content we want to add our header image as a text paragraph. The code for this would be: <img <tr><td style="padding: 5%"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</strong></p> <p>excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> We ve highlighted a padding inline style that adds space around the text and helps make it a cleaner design. It's important to note again that the amount of padding is not in pixels or any other absolute amount, but as a percentage to make it a responsive design.
Adding a Text Block with a Divider It is very common to separate the different blocks of content with divider images or borders above or below the text blocks. In the following example we are going to illustrate how to add a divider image on the top of the text block and a border on the bottom of the same block. Again we start by wrapping our content inside a table row with padding of 5% and a bottom border of 1px, and then we put the content inside this row. The first element in the row is our divider image, we add a style width: 100% because we want this image to be adapted to all the width provided by the row. However, we have to note that, as opposed to the header image, this will have padding on the right and left side of the image because we defined a padding of 5% for the row which contains the image. <tr><td style="padding: 5%; border-bottom: 1px solid #DDD"> <img style="width: 100%; margin-bottom: 1em" src="http://images.zmaildirect.com/img/73pnsds/bjkxi/images/header.png" /> <img style="width: 35%; margin: 1em; float: right; box-shadow: 0 0 1em #333;" src="http://images.zmaildirect.com/img/73pnsds/bjkxi/images/img1.png" /> Ut enim ad minim veniam, quis nostrud exercitation ullamco:<br /> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>ut enim ad minim veniam</li> <li><em>sed do eiusmod</em> tempor incididunt ut labore et dolore magna aliqua.</li> <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</li> </ul> The second element we can see is a small image which is defined to float on the right side (ie float: right) of the text block. Using a float image instead of a two column table (one column for text and one for the image) offers a better result when displaying the email in a mobile device than using a two column table. If instead of displaying the image on the right side of the text block we would prefer to display it in the left side, the style would be float: left. It's also important to note that we defined again the image width as a percentage of the container, instead of using pixels, this way is strongly preferred when doing a responsive design layout. We also added a margin of 1em around the image to avoid sticking the image with the text. The measure 1em is a relative measure to the default font size. So if we have set up the desktop default font size to be 10pt, 1em will be equal to 10pt, and at the same time, if the default font size for mobile devices is 18pt, 1em in a Smartphone will be 18pt. The image also has a small shadow around it to make it prettier. Adding a Text Block with an Image on the Left Side and Different Font Family This block is very similar to the previous one, but in this case we don't want the divider image, just text and a floating image, this time on the left side of the text. We will also change the font for the text in this block and highlight one of the sentences in red. <tr><td style="padding: 5%; border-bottom: 1px solid #DDD; font-family: 'Times New Roman';"> <img style="width: 35%; float: left; margin-right: 2em; box-shadow: 0px 0px 10px #333;" src="http://images.zmaildirect.com/img/73pnsds/bjkxi/images/img3.png" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, <span style="color: #a00">sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip As you can see the structure is very similar to the previous block, in this case, because we want the text to be displayed with a different font than the default, we added our new font style in the row. The image is defined in percentage terms and floating, this time in the left of the text. We ve also added a margin on the right side of 1em to avoid sticking the image to the text of the block.
Adding a Footer with a Smaller Font Size and Different Color The last block to finish building our responsive email design is the footer. We want this footer to have a link centered with a blue color and a text paragraph with a smaller font than the default one <tr><td style="padding: 5%;"> <p style="text-align: center;"><a href="http://www.zdirect.com" style="color: #0ae; text-decoration: none; font-weight: bold;">terms and Conditions</a></p> <p style="font-size: 80%; line-height: 1.2em; text-align: justify; color: #BBB;">* Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> Because we want the link to be centered horizontally, we have to wrap it in a p (paragraph) HTML tag and give this tag a text-align: center style. For the inner link we also define a set of inline CSS styles like the color, no underline (text-decoration: none) and a bold font weight. The second paragraph contains the footer text which we want to have a different font size than the layout default. It is important to note that we don't define the font-size in pixels or pt, but in percentage. In this case we wanted the font size to be slightly smaller than the default size in the email (80% of the default font size). Appendix: Full HTML Code On next page
Appendix: Full HTML Code <html> <head> </head> <body> <style type="text/css">.container { width: 600px!important; margin: 2em auto; * { font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 20pt; @media only screen and (max-device-width: 480px) {.container,.container table { width: 100%!important; max-width: none!important; * { font-family: Helvetica, Arial, sans-serif; font-size: 18pt; line-height: 28pt; </style> <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 600px; margin: 1em auto;" class="container"> <table width="600" style="width: 100%; max-width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 20pt;"> <tr><td> <img width="100%" style="width: 100%" src="http://images.zmaildirect.com/img/73pnsds/bjkxi/images/responsive.png" /> <tr><td style="padding: 5%"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</strong></p> <p>excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <tr><td style="padding: 5%; border-bottom: 1px solid #DDD"> <img width="100%" style="width: 100%; margin-bottom: 1em" src="http://images.zmaildirect.com/img/73pnsds/bjkxi/images/header.png" /> <img width="35%" style="width: 35%; margin: 1em; float: right; box-shadow: 0px 0px 10px #333;" src="http://images.zmaildirect.com/img/73pnsds/bjkxi/images/img1.png" /> Ut enim ad minim veniam, quis nostrud exercitation ullamco:<br /> <ul> <li>lorem ipsum dolor sit amet</li>
</body> </html> <li>consectetur adipisicing elit</li> <li>ut enim ad minim veniam</li> <li><em>sed do eiusmod</em> tempor incididunt ut labore et dolore magna aliqua.</li> <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</li> </ul> <tr><td style="padding: 5%; border-bottom: 1px solid #DDD; font-family: 'Times New Roman';"> <img style="width: 35%; float: left; margin-right: 2em; box-shadow: 0px 0px 10px #333;" src="http://images.zmaildirect.com/img/73pnsds/bjkxi/images/img3.png" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, <span style="color: #a00">sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip <tr><td style="padding: 5%;"> <p style="text-align: center;"><a href="http://www.zdirect.com" style="color: #0ae; text-decoration: none; font-weight: bold;">terms and Conditions</a></p> <p style="font-size: 80%; line-height: 1.2em; text-align: justify; color: #BBB;">* Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </table> </div>