code
design
mobile screenshot
iphone
The Column Issue How to create HTML columns. Peek at this email in your browser (http://xx0.---xxxxx-xxxxxxx0.---/?x=00000x000x000x00000000000&xx=x00x0xxx00&x=xx0xxx000x) Type E: ------------------------------------------------------------ 01. The Column Issue Russell Square Underground Station. Above: En route to Completely Email (http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx.---/xxxxx/xxxxx?x=00000x000x000x00000000000&xx=00000x000x&x=xx0xxx000x) , London, Russell Square Underground Station features distinctive typography and tiling, designed by Leslie Green (http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx0.---/xxxxx/xxxxx?x=00000x000x000x00000000000&xx=x00000000x&x=xx0xxx000x) . 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. The Solution CSS3 provides a solution to this in the form of column-count, (along with column-rule and column-gap), which is best supported when applied to a tag. Here’s how to go about implementing it in 3 simple steps. Step 1: Specify the number of columns you would like by applying the column-count property to your tag. Wrapping your text within a pair of tags, apply the CSS3 column-count property to the opening tag as follows: In addition to column-count, you’ll see that I’ve also added -webkit-column-count and -moz-column-count for email clients that use the Webkit and Gecko rendering engines. The value that follows the column-count 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: I’ve then applied CSS rules within the @media query, in this case for 3 columns, as follows: p[class="columns"] {column-count:3 !important; -webkit-column-count:3 !important; -moz-column-count:3 !important;} 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 Step 2 (#Two) . Type Anatomy A. Upper Case ‘A’ Font: Adobe Caslon Pro. 1. Apex 2. Crossbar Step 2: Indent each new paragraph using the text-indent and display properties. My usual practice when dividing text into paragraphs is to insert a pair of tags to create a full line space. This presents us with a challenge however, when we’re dealing with column-count. 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 tags, and then styling it as follows: This piece of code indents the first line of text by 30px. 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, column-rule and column-gap in Step 3 (#Three) . Typographic Advent Calendar http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx.---/xxxxx/xxxxx?x=00000x000x000x00000000000&xx=00x00x00xx&x=xx0xxx000x Day 1. 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. Step 3: Apply column-rule and column-gap to your tag. Though column-rule and column-gap aren’t as well supported, they are still worth mentioning, and are pretty self explanatory. column-rule simply places a vertical rule between each column of text, and is styled much like a border, as shown in the following example: column-rule:1px dotted #333333; -webkit-column-rule:1px dotted #333333; -moz-column-rule:1px dotted #333333; All I have done here is create a 1px dotted rule, and applied the colour #333333;, and as with column-count, I’ve added support for email clients that use the Webkit and Gecko rendering engines. column-gap is even more simple. It specifies the width of the gap between each column of text, like so: column-gap:12px; Support for column-count is pretty good, as you can see on the following Litmus (http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx.---/xxxxx/xxxxx?x=00000x000x000x00000000000&xx=0000x000x0&x=xx0xxx000x) 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 column-count isn’t present. Desktop Support Tablet / Mobile Support Apple Mail 6 iPad (All) Outlook 2011 iPhone (All) Thunderbird Android 2.3 AOL Mail (Explorer) Android 4.2 AOL Mail (Firefox) AOL Mail (Chrome) Outlook.com (Explorer) Finally, it’s worth mentioning that column-count is also supported on the tag, but to a lesser extent than . It does have one advantage over the 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. ■ Type E: 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 type-e@beyondtheenvelope.co.uk (xxxxxx:xxxx-x@xxxxxxxxxxxxxxxxx.xx.xx) . Thank you for subscribing! ------------------------------------------------------------ Beyond the Envelope™ © Paul Airy, 2014 +44 (0) 7962 177 477 (International) 07962 177 477 (UK) Unsubscribe (http://xxxxxxxxxxxxxxxxx.xx0.---x-xxxxxx0.---/xxxxxxxxxxx?x=00000x000x000x00000000000&xx=00xx000xx0&x=xx0xxx000x&x=x00x0xxx00) : Though I’d be very sad to see you go! :(
 
Try
Litmus

Want to see what this email looks like in 50+ email clients? Try Litmus Free

We’ve successfully exported your scoped email into builder.

We just opened a brand new tab in your browser, in there you’ll find your scoped email ready to be edited.

Take me back to scope