<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://xxx.x0.---/XX/xxxxx0/XXX/xxxxx0-xxxxxxxxxxxx.---">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type E: 01. The Column Issue.</title>
<style type="text/css">
span[class=preHeader]{
font-size:1px !important;
color:#ffffff !important;
display:none !important;
}
.mainContent{
width:100%;
max-width:600px;
}
span[class=appleBlackLinks]{
color:#000001 !important;
text-decoration:none;
}
span[class=outlook]{
color:#333333 !important;
text-decoration:none !important;
}
@media only screen and (min-device-width:600px), screen and (min-width:600px){
table[class=mainContent]{
width:600px !important;
height:auto !important;
}
} @media only screen and (min-device-width:600px), screen and (min-width:600px){
.col273{
width:273px !important;
}
} @media only screen and (max-device-width:375px), screen and (max-width:375px){
table[class=mainContent]{
width:99% !important;
}
} @media only screen and (max-device-width:375px), screen and (max-width:375px){
td[class=columnWrap]{
display:block !important;
width:100% !important;
}
} @media only screen and (max-device-width:375px), screen and (max-width:375px){
table[class=emailWidth]{
display:block !important;
width:100% !important;
}
} @media only screen and (max-device-width:375px), screen and (max-width:375px){
table[class=tableImageResize]{
display:block !important;
width:100% !important;
}
} @media only screen and (max-device-width:375px), screen and (max-width:375px){
td[class=tdImageResize]{
display:block !important;
width:100% !important;
}
} @media only screen and (max-device-width:375px), screen and (max-width:375px){
img[class=imgImageResize]{
display:block !important;
width:100% !important;
height:auto !important;
}
}</style></head>
<body>
<!-- Preheader -->
<span class="preHeader" style="font-size: 1px !important;color: #ffffff !important;display: none !important;">The Column Issue<br>How to create HTML columns.</span>
<!-- Preheader End -->
<table width="100%" align="center" style="table-layout:fixed;" cellpadding="0" cellspacing="0" border="0"><!-- Wrapper -->
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600px" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="mainContent" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="width: 100%;max-width: 600px;">
<tr>
<td>
<table class="emailWidth" width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding-bottom:20px;"><span style="font-family:'Courier New', Courier, monospace; font-size:10px; line-height:130%;"><a href="http://xx0.---xxxxx-xxxxxxx0.---/?x=00000x000x000x00000000000&xx=x00x0xxx00&x=xx0xxx000x" style="color:#0066cc;">Peek at this email in your browser</a></span></td>
</tr>
<tr>
<td width="100%" style="padding-bottom:20px;">
<span class="masthead" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:110px; line-height:110%; text-align:left; color:#ff0000;"><b>Type <span class="e">E:</span></b></span><hr class="horizontalRule" size="1">
<br><span style="font-family:'Courier New', Courier, monospace; font-size:15px; line-height:130%;">01. The Column Issue</span></td>
</tr>
</table>
<!-- Hero Image -->
<table width="100%" style="border-collapse:collapse;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="columnWrap" width="100%" valign="top">
<table class="tableImageResize" width="600" bgcolor="#ddcbb3" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="tdImageResize" width="600" valign="top" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; font-weight: lighter; line-height:130%; color:#333333;"><img class="imgImageResize" src="http://www.beyondtheenvelope.co.uk/TypeE/images/Russell_Square.jpg" width="600px" height="229px" alt="Russell Square Underground Station." title="Russell Square Underground Station, London, UK, en route to Completely Email." style="display:block; border:0; border-collapse: collapse; outline:none; font-family:Courier, monospace; color:#000001; font-size:20px; line-height:100%; text-decoration:none;"></td>
</tr>
<tr>
<td>
<table width="100%" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:Courier, monospace; font-size:11px; line-height:120%; color:#333333; padding:20px;"><b>Above:</b> En route to <a href="http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx0.---/xxxxx/xxxxx?x=00000x000x000x00000000000&xx=xx00xxx0x0&x=xx0xxx000x" target="_blank" style="color:#000001;">Completely Email</a>, London, Russell Square Underground Station features distinctive typography and tiling, designed by <a href="http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx0.---/xxxxx/xxxxx?x=00000x000x000x00000000000&xx=x0x0xxx0x0&x=xx0xxx000x" target="_blank" style="color:#000001;">Leslie Green</a>.</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Hero Image End -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding-top:10px; padding-bottom:10px;">
<!-- 1. Apply the column-count property to your text -->
<p class="column" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; column-count:2; -webkit-column-count:2; -moz-column-count:2; column-rule:1px dotted #333333; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-gap:12px;">It’s often been a frustration of mine that we’ve never really had true multiple-column layouts on email, where text happily flows on from one column to the next. Instead we’ve hacked tables and table cells, like so many other elements, in order to give the impression of columns, but without their elegance or flexibility.<br><span class="h2"><strong>The Solution</strong></span><br>
<!-- 2. Indent new paragraphs using text-indent:30px; and display:inline-block; -->
<span class="indent" style="text-indent:30px; display:inline-block;"> </span>CSS3 provides a solution to this in the form of <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span>, (along with <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-rule</span> and <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-gap</span>), which is best supported when applied to a <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><p></span> tag. Here’s how to go about implementing it in 3 simple steps.</p>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666666; padding:20px; border:1px solid #333333; border-bottom:1px dotted #333333;"><span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:16px; color:#666666;"><b>Step 1:</b> Specify the number of columns you would like by applying the <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span> property to your <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><p></span> tag.</span>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding:6px 20px 20px 20px; border:1px solid #333333; border-top:0; border-bottom:double;">
<p style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">Wrapping your text within a pair of <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><p></span> tags, apply the CSS3 <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span> property to the opening tag as follows:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666666; padding:15px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-color: #ffe5e5;" bgcolor="#ffe5e5"><span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><p style="column-count:2; -webkit-column-count:2; -moz-column-count:2;"></span>
</td>
</tr>
</table>
<p style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">In addition to <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span>, you’ll see that I’ve also added <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">-webkit-column-count</span> and <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">-moz-column-count</span> for email clients that use the Webkit and Gecko rendering engines. The value that follows the <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span> property denotes how many columns your text will be divided into. You may of course wish to change the number of columns depending on the viewport, so in this example I’ve added a class to be referenced by a @media query:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666666; padding:15px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-color:#ffe5e5;" bgcolor="#ffe5e5"><span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><p class="columns" style="column-count:2; -webkit-column-count:2; -moz-column-count:2;"></span>
</td>
</tr>
</table>
<p style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">I’ve then applied CSS rules within the @media query, in this case for 3 columns, as follows:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666666; padding:15px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-color:#ffe5e5;" bgcolor="#ffe5e5"><span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">p[class="columns"] {column-count:3 !important; -webkit-column-count:3 !important; -moz-column-count:3 !important;}</span>
</td>
</tr>
</table>
<p style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">Your text should now be divided into the number of columns you’ve specified, with an equal number of lines within each column. You’re now ready to divide your text into individual paragraphs, which is what we’ll look at in <a href="#Two" style="color:#666666; text-decoration:underline; text-decoration-style:dotted;">Step 2</a>.</p> </td>
</tr>
</table>
<br><br>
<!-- Type Anatomy -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding-bottom:10px;">
<span class="subhead" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:17px; line-height:110%; text-align:left; color:#ff0000;"><b>Type Anatomy</b></span></td>
</tr>
</table>
<!-- Type Anatomy End -->
<!-- Upper Case 'A' -->
<table width="100%" style="border: 1px solid #cccccc; border-collapse:collapse;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="columnWrap" width="100%" valign="top">
<table class="tableImageResize" width="298" align="left" bgcolor="#ff0000" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="tdImageResize" width="298" height="298" valign="top" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; font-weight: lighter; line-height:130%; color:#333333;"><img class="imgImageResize" src="http://www.beyondtheenvelope.co.uk/TypeE/images/A_01.png" width="298px" height="298px" alt="A." title="A." style="display:block; border:0; border-collapse: collapse; outline:none; font-family:Courier, monospace; color:#000001; font-size:20px; line-height:100%; text-decoration:none;"></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="273px" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col273" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding-top:10px;">
<table align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:21px; line-height:150%; color:#666666; padding:15px;"><p><span style="padding-top:5px;">Upper Case ‘A’</span><br><span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:12px; line-height:120%; color:#666666;">Font: <em>Adobe Caslon Pro.</em></span></p><ol class="typeFile" style="font-family:Georgia, Times, 'Times New Roman', serif; font-size:18px; line-height:120%; color:#ff0000;"><li><em>Apex</em></li><li><em>Crossbar</em></li></ol></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<td>
<tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!-- Upper Case 'A' End -->
<br><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="Two" width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666666; padding:20px; border:1px solid #333333; border-bottom:1px dotted #333333;"><span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:16px; color:#666666;"><b>Step 2:</b> Indent each new paragraph using the <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">text-indent</span> and <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">display</span> properties.</span>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding:6px 20px 20px 20px; border:1px solid #333333; border-top:0; border-bottom:double;">
<p class="column" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">My usual practice when dividing text into paragraphs is to insert a pair of <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><br/></span> tags to create a full line space. This presents us with a challenge however, when we’re dealing with <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span>. The reason for this, is that there is a risk that the line space might appear at the top of a column, giving us an uneven block of text. The solution then, is to indent the first line of each new paragraph. This is achieved by inserting a non-breaking space, containing it within a pair of <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><span></span> tags, and then styling it as follows:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666666; padding:15px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-color: #ffe5e5;" bgcolor="#ffe5e5"><span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><span class="indent" style="text-indent:30px; display:inline-block;">&nbsp;</span></span>
</td>
</tr>
</table>
<p class="column" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">This piece of code indents the first line of text by <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">30px</span>. You can specify your own dimension to suit your layout. Now we have our columns in place, we can look at the other two properties, <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-rule</span> and <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-gap</span> in <a href="#Three" style="color:#666666; text-decoration:underline; text-decoration-style:dotted;">Step 3</a>.</p>
</td>
</tr>
</table>
<br><br>
<!-- Typographic Advent Calendar -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding-bottom:10px;">
<span class="subhead" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:17px; line-height:110%; text-align:left; color:#ff0000;"><b>Typographic Advent Calendar</b></span></td>
</tr>
</table>
<!-- Typographic Advent Calendar End -->
<!-- Day 1 -->
<table width="100%" style="border: 1px solid #cccccc; border-collapse:collapse;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="columnWrap" width="100%" valign="top">
<table class="tableImageResize" width="298" align="left" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="tdImageResize" width="298" height="298" valign="top" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; font-weight: lighter; line-height:130%; color:#333333;"><a href="http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx.---/xxxxx/xxxxx?x=00000x000x000x00000000000&xx=0x00x0x00x&x=xx0xxx000x" target="_blank"><img class="imgImageResize" src="http://www.beyondtheenvelope.co.uk/TypeE/images/Typographic_Advent_Calendar.png" width="298px" height="298px" alt="Type & Lettering Advent Calendar." title="Type & Lettering Advent Calendar." style="display:block; border:0; border-collapse: collapse; outline:none; font-family:Courier, monospace; color:#000001; font-size:20px; line-height:100%; text-decoration:none;"></a></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="273px" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col273" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:21px; line-height:150%; color:#666666; padding:15px;"><p>Day 1.</p><p class="column" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#ff0000;">If you’ve been following me on twitter, you’ll be aware of Type Worship’s Typographic Advent Calendar. This is day 1, by Andrei Robu.</p></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<td>
<tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!-- Day 1 End -->
<br><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="Three" width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666666; padding:20px; border:1px solid #333333; border-bottom:1px dotted #333333;"><span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:16px; color:#666666;"><b>Step 3:</b> Apply <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-rule</span> and <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-gap</span> to your <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><p></span> tag.</span>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding:6px 20px 20px 20px; border:1px solid #333333; border-top:0; border-bottom:double;">
<p style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">Though <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-rule</span> and <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-gap</span> aren’t as well supported, they are still worth mentioning, and are pretty self explanatory. <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-rule</span> simply places a vertical rule between each column of text, and is styled much like a border, as shown in the following example:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666666; padding:15px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-color: #ffe5e5;" bgcolor="#ffe5e5"><span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-rule:1px dotted #333333; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333;</span>
</td>
</tr>
</table>
<p style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">All I have done here is create a 1px dotted rule, and applied the colour <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">#333333;</span>, and as with <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span>, I’ve added support for email clients that use the Webkit and Gecko rendering engines. <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-gap</span> is even more simple. It specifies the width of the gap between each column of text, like so:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666666; padding:15px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-color:#ffe5e5;" bgcolor="#ffe5e5"><span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-gap:12px;</span>
</td>
</tr>
</table>
</td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding-top:10px; padding-bottom:10px;">
<p class="column" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; column-count:2; -webkit-column-count:2; -moz-column-count:2; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">Support for <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span> is pretty good, as you can see on the following <a href="http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx.---/xxxxx/xxxxx?x=00000x000x000x00000000000&xx=0000x0xxx0&x=xx0xxx000x" target="_blank" style="color:#666666;">Litmus</a> test results. As you’d expect, it is fully supported on iOS Mail and Apple Mail, but is also supported on some unlikely email and webmail clients. The real beauty of this though, is that it falls back extremely gracefully to a single column where support for <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span> isn’t present.</p>
</td>
</tr>
</table>
<table width="100%" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#333333;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="tableRow" width="50%" style="-webkit-border-top-left-radius:5px; -moz-border-top-left-radius:5px; border-top-left-radius:5px; padding:12px 0 12px 12px;" bgcolor="#999999"><span style="font-size:16px; color:#ffffff;">Desktop Support</span></td><td width="50%" style="-webkit-border-top-right-radius:5px; -moz-border-top-right-radius:5px; border-top-right-radius:5px; padding:12px 0 12px 12px;" bgcolor="#999999"><span style="font-size:16px; color:#ffffff;">Tablet / Mobile Support</span></td>
</tr>
<tr>
<td width="50%" height="3px" style="font-size: 1px; line-height: 1px;" bgcolor="#666666"></td><td width="50%" height="3px" style="font-size: 1px; line-height: 1px;" bgcolor="#666666"></td>
</tr>
<tr>
<td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff; border-right:1px dotted #ffffff;" bgcolor="#cccccc">Apple Mail 6</td><td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff;" bgcolor="#cccccc">iPad (All)</td>
</tr>
<tr>
<td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff; border-right:1px dotted #ffffff;" bgcolor="#cccccc">Outlook 2011</td><td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff;" bgcolor="#cccccc">iPhone (All)</td>
</tr>
<tr>
<td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff; border-right:1px dotted #ffffff;" bgcolor="#cccccc">Thunderbird</td><td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff;" bgcolor="#cccccc">Android 2.3</td>
</tr>
<tr>
<td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff; border-right:1px dotted #ffffff;" bgcolor="#cccccc">AOL Mail (Explorer)</td><td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff;" bgcolor="#cccccc">Android 4.2</td>
</tr>
<tr>
<td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff; border-right:1px dotted #ffffff;" bgcolor="#cccccc">AOL Mail (Firefox)</td><td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff;" bgcolor="#cccccc"></td>
</tr>
<tr>
<td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff; border-right:1px dotted #ffffff;" bgcolor="#cccccc">AOL Mail (Chrome)</td><td class="tableRow" width="50%" style="padding:8px 0 8px 12px; border-bottom:1px dotted #ffffff;" bgcolor="#cccccc"></td>
</tr>
<tr>
<td class="tableRow" width="50%" style="-webkit-border-bottom-left-radius:5px; -moz-border-bottom-left-radius:5px; border-bottom-left-radius:5px; padding:8px 0 12px 12px; border-right:1px dotted #ffffff;" bgcolor="#cccccc"><span class="outlook" style="color: #333333 !important;text-decoration: none !important;">Outlook.com (Explorer)</span></td><td class="tableRow" width="50%" style="-webkit-border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; border-bottom-right-radius:5px; padding:8px 0 12px 12px;" bgcolor="#cccccc"></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="padding-top:10px; padding-bottom:10px;">
<p class="column" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:150%; color:#666666; column-count:2; -webkit-column-count:2; -moz-column-count:2; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; column-rule:1px dotted #333333; column-gap:12px;">Finally, it’s worth mentioning that <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;">column-count</span> is also supported on the <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><td></span> tag, but to a lesser extent than <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><p></span>. It does have one advantage over the <span class="codeText" style="font-family:Courier, monospace; color:#ff0000;"><p></span> tag however, in that being a block-level element, it allows you to include images within your columns. As always, the method you choose should always be informed by your data, and the email / webmail clients your subscribers use.<span style="color:#ff0000;"> ■</span></p>
</td>
</tr>
</table>
<br>
<table class="emailWidth" width="100%" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-color:#ddcbb3;" bgcolor="#ddcbb3" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table class="emailWidth" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#333333; padding:15px;"><p style="font-family:'Courier New', Courier, monospace; font-size:12px; line-height:130%; color:#333333;"><b>Type E:</b> is an email newsletter devoted to typography on email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions to <a href="xxxxxx:xxxx-x@xxxxxxxxxxxxxxxxx.xx.xx">type-e@beyondtheenvelope.co.uk</a>. Thank you for subscribing!</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<!-- Footer -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" style="padding-bottom:20px;">
<hr class="horizontalRule" size="1"><span class="beyondTheEnvelope" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:16px; line-height:110%; text-align:left; color:#ff0000;"><b>Beyond the Envelope™</b></span>
<br><span style="font-family:'Courier New', Courier, monospace; font-size:10px; line-height:130%;">© Paul Airy, 2014<br>+44 (0) 7962 177 477 (International)<br>07962 177 477 (UK)</span></td>
</tr>
<tr>
<td width="100%" style="padding-bottom:20px;"><span style="font-family:'Courier New', Courier, monospace; font-size:10px; line-height:130%;"><a href="http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx0.---/xxxxxxxxxxx?x=00000x000x000x00000000000&xx=00xx000xx0&x=xx0xxx000x&x=x00x0xxx00" style="color:#0066cc;">Unsubscribe</a>:<br>Though I’d be very sad to see you go! :(</span></td>
</tr>
</table>
<!-- Footer End -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table><!-- Wrapper End -->
<img src="http://beyondtheenvelope.us4.list-manage.com/track/open.php?u=00194e641f365c79871912856&id=a98d9cbb82&e=bb0ebb317a" height="1" width="1"></body>
</html>