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?
1.<div> elements should NEVER be used in HTML emails, they break in pretty much all email clients
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 <table> elements as per my first point
See the following link which is a basic boilerplate for HTML emails, it contains reset CSS to fix cross email client bugs. http://htmlemailboilerplate.com/
Also some tips from my experience in building advanced HTML emails.
- Always avoid <heading, p, ul and ol> tags, they are very inconsistent and cause more issues than solving them
- When using <img> tags always add style="display: block;" as it will remove the default spacing
- Always declare font-family, font-size, color etc. inline on specific elements and not on the parent, some email clients don't respect the parent inline styles
- Always remember to set the border="0" attribute on <img> tags that are wrapped by an <a> tag
- Try to avoid using too many rowspan and colspan attributes, some email clients have issues when rendering them
You can find heaps more information at Campaign Monitor.
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:
Never use floats. Outlook will laugh in your face and devour your email's soul for breakfast, leaving behind a skeletonized mess.
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 td.
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.
Always use target="_blank" on links.
Using h1 tags is a pain . . . Hotmail/Outlook (webmail) especially will give you problems. Be sure to always use a hard reset on your h1color using !important, or Hotmail will force them to render in an ugly green.
Outlook will mess up padding on block-level elements. Use margin, instead, or put padding on the containing td.
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;).
Always, but always, declare color inline on a elements, because every email client defaults to different link colors, which will make for inconsistent rendering.
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)
1.
<div>elements should NEVER be used in HTML emails, they break in pretty much all email clients2. 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
<table>elements as per my first pointSee the following link which is a basic boilerplate for HTML emails, it contains reset CSS to fix cross email client bugs. http://htmlemailboilerplate.com/
Also some tips from my experience in building advanced HTML emails.
- Always avoid
<heading, p, ul and ol>tags, they are very inconsistent and cause more issues than solving them- When using
<img>tags always addstyle="display: block;"as it will remove the default spacing- Always declare
font-family,font-size,coloretc. inline on specific elements and not on the parent, some email clients don't respect the parent inline styles- Always remember to set the
border="0"attribute on<img>tags that are wrapped by an<a>tag- Try to avoid using too many
rowspanandcolspanattributes, some email clients have issues when rendering themYou can find heaps more information at Campaign Monitor.
http://www.campaignmonitor.com/resources/ http://www.campaignmonitor.com/guides/coding/guidelines/ http://www.campaignmonitor.com/resources/will-it-work/
I use 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:
Never use floats. Outlook will laugh in your face and devour your email's soul for breakfast, leaving behind a skeletonized mess.
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
td.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.
Always use
target="_blank"on links.Using
h1tags is a pain . . . Hotmail/Outlook (webmail) especially will give you problems. Be sure to always use a hard reset on yourh1colorusing!important, or Hotmail will force them to render in an ugly green.Outlook will mess up padding on block-level elements. Use margin, instead, or put padding on the containing
td.Hotmail doesn't support
margin: x x x x;ormargin-top: x;-- you'll have to get creative. All othermargin-properties are supported, though (margin-left: x; margin-right: x; margin-bottom;).Always, but always, declare
colorinline onaelements, because every email client defaults to different link colors, which will make for inconsistent rendering.Thanks everyone!
Solid lists. I just wanted to mention that most of these tags work great for craigslist ads too - so you'll have that under your belt as well.