Grow your CSS skills. Land your dream job.

Html coding for emailers/newsletters

  • # February 11, 2013 at 5:27 am

    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)

    # February 11, 2013 at 6:55 am

    **1.** `

    ` 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 `

    ` 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 `` tags, they are very inconsistent and cause more issues than solving them

    **-** When using `` 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 `` tags that are wrapped by an `` 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.

    http://www.campaignmonitor.com/resources/
    http://www.campaignmonitor.com/guides/coding/guidelines/

    http://www.campaignmonitor.com/resources/will-it-work/

    # February 11, 2013 at 7:15 am

    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.

    # February 11, 2013 at 11:31 am

    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.

    # February 11, 2013 at 1:15 pm

    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 td.

    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.

    5. Using h1 tags is a pain . . . Hotmail/Outlook (webmail) especially will give you problems. Be sure to always use a hard reset on your h1 color using !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 td.

    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.

    # February 13, 2013 at 2:57 am

    Thanks everyone!

    # February 13, 2013 at 3:02 am

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".