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!
Very good article, great points, esp about the borders I never really considered that, I use a 600 width and center it (with left alignment on the text) but the 5-10 margin is probably a better approach. Anyone have any comments on text size, I usually try to avoid font and style tags when possible but interested in other approaches. red fonts, I know, tend to raise your spam score so I stopped trying to use fonts totaly when possible.
I haven't mailed GI in years, but back when I did I absolutely HATED html emails. I had to use tables to make the shit look right every where, because the CSS support was horrible. It was like designing websites in the 90s.
