Biopsy Of An HTML Email Posted by Len Shneyder Source: http://blog.unica.com/biopsy-of-an-html-email/f ... I feel compelled to say that Iâ€™m an avid reader of EaterSF; the recommendations have fueled numerous food adventures in and around San Francisco. That being said let me also state this is not meant to lambast or endorse the editors of this newsletter, only as a vehicle for creative analysis. As you can see itâ€™s a fairly straightforward newsletter: a two column design with clear branding at the top of the email. Looks good, right? Right, but a web preview is not the experience a reader has across email clients and platforms. Email is a core channel for establishing and growing customer loyalty, increasing sales and driving activity across social networks. For an email to be successful and address the reading habits of the connected consumer it has to be accessible and readable across a wide variety of platforms. To be cross-channel and email has to be built according to best practices for cross channel design. The template for this newsletter is set to 830 pixels; this is too wide when you take into account the viewable dimensions of mobile handsets. Even if you donâ€™t take into consideration a mobile handset and you want to code for the 1990â€™s, a screen resolution of 800Ã—600 would mean the recipient is forced to scroll left to right to see the full text of the email. What should the width be? There are generally two ways of approaching this: 1) either set the width to FULL in which case it gains a little elasticity and adjusts the dimensions of whatever device itâ€™s viewed on. 2) Try shrinking the physical dimensions to 620 pixels or less. Common formats for todayâ€™s newsletters are strikingly thin, many of them favor a single column layout. The less-is-more paradigm forces marketers two do a couple things: be selective about your graphics as they eat both vertical and horizontal space. More importantly, be selective with the information in the email as you donâ€™t want to over power the recipients ever shrinking attention span. Even in a webmail client like Yahoo! recipients are forced to scroll left to right when viewing this at 1024Ã—768 pixels as seen through IBM Unica Email Optimizationâ€™s eDesign Optimizer. One thing EaterSFâ€™s designers should consider is shrinking this to a single column layout and using smaller images. But how do you know if eliminating a column would help or hurt the campaign? In a word: Data! Track each link and test varying versions of the email to random splits. If you are driving significant traffic from one column versus another then perhaps that should be the main column, or the content of that column is more appealing. Donâ€™t take the plunge until you know the temperature of the water. Another thing to keep in mindâ€¦ Width isnâ€™t the only problem with this creative; the email has no left-right margins. When the email is rendered it comes to the very edge of the email client/device. Why is this a problem you ask? Words at the edge of a mobile device tend to be harder to read. Users are often forced to shrink or enlarge an email because black device borders tend to make black text abutting the border illegible. Build your email templates with a little padding by either putting a DIV around it that gives you 5-10 pixels of breathing room on either side. If youâ€™re thinking â€œwell thereâ€™s so little room already with mobile devicesâ€ then youâ€™re right. There is less space, but the space on a mobile device is incredibly precious, if your recipient canâ€™t read the email quickly without having to use two fingers to interact with the message vs. 1 to scroll down to read more, youâ€™re â€œleaving clicks on the phone.â€ Make it readable! Thereâ€™s a reason webkit has a minimum font size, so your customers can read your messages. Sure, sometimes overriding the minim font size of 13 pixels will ensure layout integrity. However, if youâ€™re protecting your layout at the detriment of the readability of the message then you should re-examine your layout and consider not shrinking your font to easily readable proportions. So to summarizeâ€¦ 1. Keep your layout to 620 pixels or less to ensure the ability of your emails to be read on more devices and in more email clients. 2. Give your text and email contents a chance to breath and build your template with borders to keep text away from the edge of the template 3. Make it readable and if you have to override the default text size, but truly, use your judgment: if you have to squint to read it, so do your customers!