Is it absolutely essential to use tables? Can divs not be used? And If I have to use inline styling (I’ve been told that I cannot use style sheets and resets), how do I take care of default spacing?
And what if I just create an outer table container and then code the inner html using divs?
Can someone post a basic emailer code?(only html)
**2.** You can use reset CSS as it works for newer email clients and also can supply fixes for email clients that support them
**3.** You can only use `
I use [Mailchimp](http://mailchimp.com/?pid=GAW&source=website&gclid=COSAh8ydrrUCFefJtAodeTAACw “Mailchimp”) and they have lots of templates use can download to use for examples.
I spent a year building weekly and bi-weekly emails across 7 brands for a Fortune 200 company with each one going to between 2 and 7 million subscribers. Here’s what I can tell you:
1)Yes, you have to use tables. It’s the only way to get a consistant display across several different mail clients.
2) You can you some embedded styles in the header, but inline will be most of what you get to use.
3) Get used to nesting. The more complex the layout, the more you’ll have to do it.
4) Microsoft will be the bane of your existence. This will look great in every client except specific versions of outlook, and there’s often little rhyme or reason to it.
5) This is not a plug, but Litmus is a great tool to preview your content in almost every mail client at once. It can save you a lot of time and is great for testing. I’ve used several others, I like Litmus the best.
In addition to SgtLegend’s excellent list of resources, I’d like to add http://www.emailology.org/ They’ve got a really helpful list of common things that break in each email client.
Building email newsletter templates is a large part of my current job at a large health organization, with dozens of departments each with their own monthly-to-annual newsletters, and I bemoan the state of modern email clients every day. I have a few Frankenstein templates that I frequently borrow pieces of for each new template, and I’m working toward making every new design mobile-friendly, which is surprisingly easy once you wrap your head around it.
A few notes:
1. Never use floats. Outlook will laugh in your face and devour your email’s soul for breakfast, leaving behind a skeletonized mess.
2. This may seem obvious, but it caught me up a few times early on: don’t put padding or align on tables — put it on the
3. IE doesn’t like center alignment. If you center align your container, be sure to reset your alignment to left on all children, or all of your content will be centered.
4. Always use
target="_blank" on links.
h1 tags is a pain . . . Hotmail/Outlook (webmail) especially will give you problems. Be sure to always use a hard reset on your
!important, or Hotmail will force them to render in an ugly green.
6. Outlook will mess up padding on block-level elements. Use margin, instead, or put padding on the containing
7. Hotmail doesn’t support
margin: x x x x; or
margin-top: x; — you’ll have to get creative. All other
margin- properties are supported, though (
margin-left: x; margin-right: x; margin-bottom;).
8. Always, but always, declare
color inline on
a elements, because every email client defaults to different link colors, which will make for inconsistent rendering.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".