82

Does the HTML/CSS for an html email newsletter need to be in table format, or can I use DIVs with equal assurance it will display well cross email-client? I've downloaded a number of templates to see how they're done, upon which to base my own, and they all seem to use tables.

Any insight much appreciated, thanks!

HandiworkNYC.com
  • 10,914
  • 25
  • 92
  • 154
  • 2
    This is incredibly comprehensive: [http://mailchimp.com/resources/guides/email-marketing-field-guide](http://mailchimp.com/resources/guides/email-marketing-field-guide) – HandiworkNYC.com Sep 06 '10 at 18:26
  • Very useful. Embedding CSS inside the body tag. Who would've thought! – aaandre Feb 24 '12 at 18:52
  • URL has changed: http://mailchimp.com/resources/guides/email-marketing-field-guide/ – JasonB Nov 30 '12 at 01:25
  • 1
    The quick _general_ answer - Webmail clients don't want your CSS messing with their page, [so they limit it](http://www.campaignmonitor.com/css/) (imagine using `position:fixed;` in Gmail). Tables allow you to use additional html elements that are not available (or inconsistent) with divs. Also Outlook uses the Microsoft Word engine to render the email html and wraps it with a lot of crap divs etc. Tables help maintain your email structure once Outlook throws it's crap in there. – John Dec 13 '13 at 14:00

4 Answers4

139

⚠️ Update 2021-06-10: This is a very old answer. I'm not sure how accurate it is 10 years after it was written. Mail clients are hopefully more compliant today ⚠️

When it comes to email HTML, note that all best practices from web development goes out the window. To make the look consistent, you should:

  1. Use table based layouts
  2. Use the old-school attribute styling for tables
  3. Use ONLY inline-styles, and only very simple such. <style>-tags are discarded by many clients.
  4. Skip using <html>, <head> and <body> - They will be discarded by most clients anyway.
  5. If you embed images, try to make sure that the e-mail looks decent even if images are not loaded. Many clients require the user to mark the email as "safe" before displaying images.

You can read more detailed versions of the above points here:

PatrikAkerstrand
  • 45,315
  • 11
  • 79
  • 94
  • 3
    This is so true. Outlook 2007 is one of the worst of them all (and most are pretty bad...). – Max May 29 '10 at 15:06
  • 3
    These rules are pure GOLD when it comes to creating HTML/CSS emails. Thank you. – Miloš Đakonović Jul 01 '14 at 09:25
  • 1
    For building e-mails, you might want to have a look at [gulp-inline-css](https://www.npmjs.org/package/gulp-inline-css), that lets you build your e-mail using CSS blocks, but compiles everything into inline styles. – fjdumont Sep 09 '14 at 07:50
  • Are you sure that html and body should be discarded? Both ZenDesk and also this tutorial recommend it? https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770 – Jakob Alexander Eichler Mar 12 '17 at 19:21
  • 1
    I this statement still true in 2017? Just wondering because most of the email client market moved from desktop to mobile and there are newer versions of the desktop clients as well. At least inline CSS seems not a necessity anymore as far as I can tell (gmail just added support and it was the last big email client missing this). – Torsten Engelbrecht May 11 '17 at 00:04
  • Might be a good idea to update this answer as some parts might be a little old. Emails have come a long way. Example: `Use table based layouts`, we can use div's as well now for hybrid/spongy emails. – Syfer Apr 21 '20 at 03:50
9

Like everyone here has said, use tables and inline all your css... but there is an ecosystem of email apps to help you build emails.

I've been using Mailrox (https://www.mailrox.com/) for most of my email builds recently and it seem to be pretty damm good and outputting perfect HTML emails, if you're building one from a design, even though it's in beta.

You could also try pre-built templates from Mailchimp or Campaign Monitor, but it sounds like you have a design for your email so maybe Mailrox would be best.

If you really want to get into building emails I'd say forget most of what you know about modern webdesign and master table layouts and use the links from PatrikAkerstrand.

Litmus is also great for testing your hand-coded designs. They give you previews of your email in (pretty much) all the email clients.

Hope this helps.

CafeHey
  • 5,699
  • 19
  • 82
  • 145
4

Many email-clients aren't able to render css. I would use tables to format your mail and use images for anything else.

fb55
  • 1,197
  • 1
  • 11
  • 16
  • 1
    You can't use images in emails by default; mail clients will block them until the user marks the sender as safe. Nearly all common clients do support limited inline CSS. – Rex M May 29 '10 at 14:46
  • Older clients doesn't, and many business-users still use them. And no, not every client doesn't shows images. It's just a step for additional security, but clients as the iPhone have no reason for blocking images. – fb55 May 29 '10 at 14:50
  • [Gmail now shows images](http://gmailblog.blogspot.ch/2013/12/images-now-showing.html) :-) – rds Sep 08 '14 at 23:27
1

As it's already been mentioned - your HTML emails should be built using tables (and not divs). You can add CSS as well - both using an external stylesheet, but this will not be picked up by all email clients, so it's actually more reliable to add your css in-line. Even when doing so, some attributes might be ignored by certain email clients, so your best bet is still using HTML attributes whenever these are available. "You must do this because the some clients, such as Gmail, will ignore or strip out your tag contents, or ignore them." Source: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

That aside, I've also learned through trial and error that even images must be cropped to the exact size you want them displayed in your email. Outlook if terrible at picking up HTML attributes for width / height for images, and i have seen a few nasty stretched emails, only because these attributes were ignored and the images was displayed full size.

Alexandra
  • 137
  • 7