Design responsive emails with the INK framework

Worried that your HTML emails might not look right on some devices? The builders of the Foundation framework offer it's very own solution with Ink


Worried that your HTML emails might not look right on some devices? The builders of the Foundation framework offer it’s very own solution with Ink



Use an all-in-one stylesheet

The final code that is sent by Email Service Provider (ESP) is just one file, with links to images stored on a server somewhere. With that in mind there’s no point in complicating things by linking to a separate stylesheet. Better still, use one of ZURB’s templates to get you started and take care of the basic necessities like the setup, client-specific styling and resets.

001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
002 <html xmlns="">
003 <head>
004     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005     <meta name="viewport" content="width=device-width"/>        
006     <style>
007     * Ink v1.0.5 - Copyright 2013 ZURB Inc        *
008     /* Client-specific Styles & Reset */
009     #outlook a { 
010     padding:0;
011 }


Control the width

Managing the width of your email is probably the single most important factor in ensuring a good user experience across multiple devices, so ensure consistent and full use is made of the available space.

001 body{ 
002 width:100% !important; 
003 min-width: 100%;
004 -webkit-text-size-adjust:100%; 
005 -ms-text-size-adjust:100%;         
006 margin:0; 
007 padding:0;
008 }
009 .ExternalClass { 
010 width:100%;
011 }

More resets and basics

The basic Ink template is around 1,000 lines of code and the first 100 lines or so are given over to core setup, so you are unlikely to want to change too much here. Don’t try changing the minimum and maximum widths unless you really understand what you are doing.

001 img {  
002 outline:none;  
003 text-decoration:none; 
004 -ms-interpolation-mode: bicubic; 
005 width: auto;             006 max-width: 100%;  
007 float: left; 
008 clear: both; 
009 display: block;
010 }
011 center {                   
012 width: 100%; 
013 min-width: 580px;  
014 }

Use tables

If you’ve never created HTML emails before and CSS was your first exposure to web design, you might be surprised to see that tables are used to manage the layout of emails. For some designers it will be just like stepping back in time.

001 table.body { 
002 height: 100%; 
003 width: 100%;;
004 } 
005 table.container {             
006 width: 580px; 
007 margin: 0 auto;
008 text-align: inherit;
009 } 
010 table.row { 
011 padding: 0px;               
012 width: 100%; 
013 position: relative; 
014 }

Make 12 columns

Designers with experience of ZURB’s Foundation and other similar frameworks will be familiar with using a grid, where each content area may occupy any number of columns to complete the overall layout. These are all set up in lines 96 to 250 of the Hero Sidebar template used for this tutorial.

001 { width: 30px; } 
002 table.two { width: 80px; } 
003 table.three { width: 130px; }
004 table.four { width: 180px; }
005 table.five { width: 230px; }     
006 table.six { width: 280px; } 
007 { width: 330px; }
008 table.eight { width: 380px; }
009 table.nine { width: 430px; }
010 table.ten { width: 480px; }
011 table.eleven { width: 530px; }       
012 table.twelve { width: 580px; }

No media queries

Unfortunately, Android support for media queries is currently quite patchy, so you might want to use the Block-Grid approach where elements are pushed down to the next row automatically as the viewport gets smaller.

001 /* Block Grid */ 
002 .block-grid { 
003 width: 100%;
004 max-width: 580px;
005 }                                     
006 .block-grid td { 
007 display: inline-block;
008 padding:10px;
009 }
010 .two-up td {
011 width:270px;              
012 }
013 .three-up td { 
014 width:173px; 
015 }
016 .four-up td {
017 width:125px;             
018 } 
019 .five-up td {
020 width:96px;
021 }
022 .six-up td {
023 width:76px;               
024 }
025 .seven-up td { 
026 width:62px; 
027 }
028 .eight-up td {
029 width:52px;                    
030 } 

Set up alignment and visibility

Content tends to look better centred on small screens, so elements including table divisions and headings are centred right here. Centring classes are set up for spanning and images. Two classes are set up for hiding content to be displayed on smaller screens.

001, { 
002 text-align: center; 
003 }
009 {
010 text-align: center;
011 }                                  
012 {
013     display: block; 
014     width: 100%; 
015     text-align: center;
016     }
017 {             
018     margin: 0 auto; 
019     float: none;
020     }
021     .show-for-small,
022     .hide-for-desktop {
023     display: none;               
024     }

Choose the typography

Eighty lines of styling are dedicated to ensuring the various paragraph text and headings are correctly sized and coloured. The decisions you make here will have a huge impact on the look and feel of your email so it is worth taking time to work through each section.

001 body, table.body, h1, h2, h3, h4,h5, h6, p, td {   
002 color: #7e8aa2;  
003 font-family: "Helvetica", "Arial",     sans-serif; 
004 font-weight: normal;  
005 padding:0;              
006 margin: 0;  
007 text-align: left;  
008 line-height: 1.3; 
009 }
010 h1, h2, h3, h4, h5, h6 {
011 word-break: normal;         
012 }

Style the panels

These are of great use in crafting email communication and let you draw attention to particular content as panels have coloured backgrounds.

001 .panel {   
002 background: #000000;  
003 padding: 15px !important;
004 }  
005 .sub-grid table {              
006 width: 100%;  
007 }  
008 .sub-grid td.sub-columns { 
009 padding-bottom: 0;
010 }

Style the buttons

The framework provides styling for four different sized buttons. As with panels, buttons are important in achieving your communication goals as you are likely to be asking email recipients to ‘buy now’ or something similar.

001 table.button td,                   
002 table.tiny-button td,  
003 table.small-button td,
004 table.medium-button td,  
005 table.large-button td {          
006 display: block;  
007 width: auto !important;  
008 text-align: center; 
009 text-transform: uppercase;
010 background: #ff9800;        
011 color: #ffffff;
012 padding: 8px 0;  
013 }  

Media queries

The framework keeps things simple by just using one media query for when a screen and viewport with a max width of 600px is detected. ZURB do point out that browser previewing won’t get you very far (especially in Firefox). You really do need to preview in email clients.

001 @media only screen and (max-width: 600px) {   
002 table[class="body"] img {  
003 width: auto !important;
004 height: auto !important;  
005 }
006 table[class="body"] center {  
007 min-width: 0 !important;  
008 } 
009 table[class="body"] .container {
010 width: 95% !important;        011  } 
012 table[class="body"] .row { 
013 width: 100% !important;
014 display: block !important;  
015  }

Email body

At line 774, the body of the HTML file begins. It’s HTML, but not as you know it. And, that’s before the CSS has been inlined when the code looks even more naively conceived. The purpose, of course, is to avoid the risk of any single element being left unstyled.

001 <body>
002 <table class="body"style="background:#eef">  
003 <tr>
004 <td class="center" align="center" valign="top">  
005 <center>
006 <table class="row header">  
007 <tr>  
008 <td class="center" align="center"> 
009 <center>

Spell it all out

ZURB’s rules are quick to pick up and it includes things like the last .wrapper in a row, which must have a class of .last applied to it, even if it’s the only wrapper in the row. The .expander class is used to ensure that the column expands correctly to full width on small devices.

Link to images

Your email service provider will enable you to upload any required images, and it should automatically update the full link to these images when it finds a match in your code. The layout is formed of a number of nested tables, and it’s easy to inadvertently break it by forgetting to close any tags if you start to make extensive changes.

001 <table class="container">   
002 <tr> 
003 <td>
004 <!-- content start -->  
005 <table class="row">
006 <tr>  
007 <td class="wrapper last">  
008 <table class="twelve columns"> 
009 <tr>
010 <td>
011 img width="580" height="290" src="../images/8people.png" style="margin-bottom:15px">

Add variables

Make sure you personalise your email wherever it is appropriate. Each ESP has its own syntax for variables and these are best added or edited once the template has been uploaded.

001 <p>Hello Richard</p>   
002 <p>Welcome to our new email feature spotlighting the great and the good,     for your inspiration and education.</p>
003 <p>We're looking forward to to     finding out what you think.</p>
004 <p>Best Wishes</p>  
005 <p>The Flatmail Team</p>
006 </td>  
007 <td class="expander"></td>  
008 </tr> 
009 </table>

Add a panel

It’s easy to add a full-width (12 columns) panel. Heading styles and links are all applied as per standard HTML. Remember to add the expander class to the last element so that it appears correctly on smaller devices.

Make two columns

Here two columns of content are created by setting a ‘wrapper’ and then ‘wrapper last’ each containing a six-column width table. Notice that the empty .expander class <td> is used at the end of each column and the <br> tag can be used to add a break.

Order the list

If you’re used to seeing unordered lists being provided as the best solution for a range of layout tasks from navigation to lists, you might be surprised to see that the normally reliable <ul><li></li></ul> isn’t used here. Outlook 2007 and 2010 do not support lists so, instead, each item appears as a separate table row.

001 <table class="six columns">   
002 <tr> 
003 <td class="panel">
004 <h6>The Line Up</h6>  
005 <p>This week's inspirational     people:</p>
006 <table>  
007 <tr> 
008 <td> 
009 <a href="#">1. Ayn RAND &raquo;</a>
010 </td>
011 </tr>
012 </table>
013 <hr>

Smaller panels

As with full width ones, panels are created using the .panel class and will appear at any width required in the grid. Notice that you can apply inline styles to elements as with the H6 tag here but you should probably do this with some caution to avoid introducing inconsistencies across different devices.

001 <table class="six columns">  
002 <tr> 
003 <td class="panel">
004 <h6 style="margin-bottom:5px;">Connect With Us:</h6>  
005 <table class="tiny-button facebook">
006 <tr>  
007 <td>                                 
008 <a href="#">Facebook</a>  
009 </td> 
010 </tr>
011 </table>

Add buttons

This section demonstrates how simple it is to add buttons to the layout. You will have chosen the colours appropriate to your own needs in lines 419 to 525. Similarly your hyperlink colours are now set in lines 360-375. The <b> tag that you probably (we’re hoping so anyway) haven’t seen in a long time will make an appearance here.

Footer content

This last nested table is used for your footer content. To stop your ESP from adding their own code and potentially breaking your responsive layout, you can remove <a> and wrap the Unsubscribe content with [unsubscribe] [/unsubscribe] for Campaign Monitor.

001 <table class="row">         
003 <tr> 
004 <td class="wrapper last">
005 <table class="twelve columns">  
006 <tr>
007 <td align="center">            
009 <center>                         
010 <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
012 </center>
013 </td>
014 <td class="expander"></td>        
015 </tr>  
016 </table> 
017 </td>
018 </tr>
020 </table>

More features

There are a few more features to Ink than the ones covered here including Offset Columns, Sub-Grids and Newsletter Images. Maybe after trying out Ink you’ll be inspired to try out other solutions for taming the challenge of HTML emails. Remember to test as you go, and whatever you do, don’t start using tables for your web layouts – it’s just an HTML email thing.