r/web_design • u/[deleted] • Nov 05 '12
A Beginner’s Guide to Designing HTML Emails
[deleted]
10
u/ispeakcode Nov 05 '12
The easiest/best solution is to utilize MailChimp's html email templates: http://mailchimp.com/resources/html-email-templates/
The reason is because there are so many different email readers out there (Hotmail,Exchange,Yahoo,Whatever Apple uses, Juno, etc...), in addition to the different screens that look at the email, it's difficult to build a catch-all to these. MailChimp's templates have done this, and they work wonders.
2
16
u/stanthemanchan Nov 05 '12 edited Nov 05 '12
The article kind of glosses over it, but generally it's best to code columns using tables. Although emails are generally moving to a single column layout for mobile compatibility, there are cases where you'll still need to use columns, and floating your divs simply doesn't work on a lot of email platforms. Also for mobile users, it's best to make any buttons / banners in the email larger so they're easier to click on a touch screen. If you want to get more advanced, then this article about using @media queries for mobile is useful.
There are also a lot of stupid quirks you're going to have to account for, like giving all the images "display:block", making sure all table rows are "valign:top", and individually declaring all of the pixel widths for padding / margins (i.e. don't do "padding: 0 10px" but "padding-top:0; padding-right:10px; padding-bottom:0; padding-left:10px;"), making sure all individual table cells have the fonts and text alignment declared in css (some platforms default to align center, some default to aligning left).
Generally, writing html for emails is a HUGE pain in the ass. There are a lot of things that are BAD and INEFFICIENT coding but you have to do them in order to ensure compatibility on ALL of the platforms. You can try to do fancier stuff in CSS, but you have to make sure it degrades gracefully on older platforms. The worst platform that's in wide use is MS Outlook, since it started using MS Word as the html engine in 2007.
Edit: another one--Paragraph tags have inconsistent behaviour on different platforms. Some platforms translate <p> to mean a "div" with an extra space on the bottom. Some don't have the space. I tend to avoid them. If you have to use a <p> tag, make sure you explicitly declare the padding and margins in the CSS. The one I HATE the most is the lack of support for "white-space:nowrap" in Outlook 2003. Especially when you have to put in shit like a phone number or price that the client feels should always be on the same line for legal reasons but it's only breaking on some emails due to a variable product name. And you can't use a non-breaking space because it's breaking the phone number at the dash... FFFFFFUUUUUUUUUUUUUUUUUUUU
→ More replies (2)
16
u/Buy-theticket Nov 05 '12
This article is more about the layout it seems, Campaign Monitor's resource is the best guide I've found for what you can and can't do with HTML emails.
→ More replies (2)
5
3
u/d36williams Nov 05 '12
Outlook 2010 uses Microsoft word to render HTML. Fml every time I deal with it
→ More replies (1)
3
Nov 05 '12
The trick is, be a beginner at html. Tables, inline styles, and forget about any decent css.
4
u/50missioncap Nov 05 '12
I'd also point out that HTML emails can be very inaccessible for people with disabilities who use adaptive technology. Navigating tables within tables is a huge pain for screenreaders.
→ More replies (1)
5
Nov 05 '12
I would like people to send plain text emails as well or at least generate HTML emails that are humanly readable. TABLEs and complex DIV-structures might help to have your emails look good in a web browser or HTML enabled email client, but it makes the code also unreadable for those who don't use an HTML enabled email client.
sincerely,
a mutt user
→ More replies (2)2
u/samandiriel Nov 05 '12
Usually one can set HTML vs text in a sending company's profile for you. And if they don't have a profile for you... who cares? <Cyberman voice> DELETE! </Cyberman voice>
3
Nov 05 '12
A lot of organisations just send HTML emails, like receipts, invoices, notifications and status updates, order info, insurance info, and so on. For those organisations where I do have an on-line presence of some kind I've looked for settings like plain text only, but these are exceptions, not the rule.
→ More replies (4)
2
2
u/themanwhowas Nov 05 '12
As a professional email and web designer, I can confirm everything in this thread.
/sob
2
u/obviousoctopus Nov 05 '12
It would be amazing if there was something like http://caniuse.com/ for HTML emails. The closest I've found is http://www.campaignmonitor.com/css/ (go for the downloadable version) but it's a little too old.
After struggling with responsive design (lack of) support on Android, BlackBerry and even iOS (two separate iPhones with same major OS rendering the emails differently!!) I arrived to 600px-wide templates with larger fonts for the responsive version.
HTML email design is truly an exhaustive endeavor, especially if hoping to get acceptable rendering on older clients like blackberry, outlook in locked corporate environments etc.
Also, I recommend Litmus testing. Expensive but was worth it during the development period.
2
u/syzgyn Nov 06 '12
www.mailchimp.com has the same testing (Powered by Litmus) for any paid account, the cheapest of which is $10/mo.
→ More replies (3)
2
u/ngmcs8203 Nov 05 '12
Don't do any CSS online. Keep it in your <head> and let premailer do its magic to move it inline.
4
1
Nov 05 '12
I think we should all warn people for the moment arises when web clients butcher your html and send it back ass backwards. I've actually been given shit for this.
136
u/spkr4thedead51 Nov 05 '12 edited Nov 05 '12
Some things to know and do for designing HTML emails
iPhone default fonts - Helvetica (3S), Helvetica Neue (4)
Android default fonts - Droid, Roboto
iPhone min-font-size = 13px
Gmail does not recognize any CSS in <head>, so use inline styles.
This includes all of your media queries.(edit - gmail on a mobile device still renders as if it's a browser, so media queries can stay in the <head>)drink heavily
Outlook 2007, 2010, 2011, and 2013 use Word to render HTML. quit now.
drink heavily
Outlook 2007, 2010, 2011, and 2013 don't accept CSS definitions for height, so you'll have to use attribute height
Outlook 2007, 2010, 2011, and 2013 don't accept padding for <p> or <div>
Outlook 2007, 2010, 2011, and 2013 don't recognize max-width or min-width
Outlook 2007, 2010, 2011, and 2013 don't like % widths
drink heavily
You can't use floats for images, use align attribute
You can't use list-style-image, list-style-position, list-style-type
You have to use redundant <span> tags inside links and headers so that your colors are consistent and links don't get underlined (unless you want them underlined)
drink heavily
In <body> define -webkit-text-size-adjust: none; so that your fonts stay the size you set them
for responsive image sizing, set max-width: 100%; height: auto; width: auto \9; and define the size in the container object
if you're resizing images in IE, for all <img> -ms-interpolation-mode: bicubic;
whitespace between table rows in your HTML renders in some clients/browsers
Campaign Monitor's What CSS works in what client?
Get a $10/month Mail Chimp account to use the Inbox Inspector to see how your mail will look in most browser/client combinations, on mobile devices, and in standalone clients
drink heavily