SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Email Coding

    I have recently embarked on coding a web email campaign and for the most part have been using guidelines from MailChimp. I was forwarded screen captures from an Outlook 2007 client that were disturbing. I used inline CSS instead of embed. My tests show up fine but this person swears different. Is there a BrowserCam version for email clients? How can I be sure? AOL, Gmail, YahooMail, Hotmail, Outlook, and the rest see my HTML email properly?

    I have attached a sample for reference.
    Attached Files Attached Files
    -=SunnaH=-

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Outlook 07 is a shocker, and has set email design back into the dark ages, unfortunately. A lot of CSS—even inline—will not work in various clients. Here's a handy summary:

    http://www.campaignmonitor.com/css/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Browsercam does cover emails for outlook 20007 although you have to be already subscribed to their services which is quite expensive unless you are in a group.

    I've attached a screenshot of what your page looks like in outlook 2007.

    As you can see the background images are missing because outlook 2007 doesn't allow them. Perhaps you should just add a border instead of the shadow or both.

    Usually for html emails you would not use margins or "align" or any positioning at all in css but let the table do the positioning. Don't use p elements and expect then to have the bottom margin but use breaks to make space. In fact the opposite of everything that you've ever been taught

    We have had a lot of previous threads about it and here's some more reading.

    http://www.sitepoint.com/forums/show...ight=css+email
    http://www.sitepoint.com/forums/show...=1#post2672822
    http://www.sitepoint.com/article/cod...il-newsletters
    http://www.xavierfrenette.com/articl...rt-in-webmail/

    You are usually better off using one of the tried and tested templates and adapting them instead.
    Attached Images Attached Images

  4. #4
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Use Litmus App for email testing.

    There is loads and loads of information out there on how to code for email clients, as well as sample templates to look at. Outlook 2007 is a *****, yes. That's the way it's going to be for quite some time. As for why it's a *****—look it up. It's quite disturbing.
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community GuidelinesBe A Great Member

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This article will set you on your way: it explains in detail how to achieve an html email
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Croydon, UK
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code like it is the early 90s.

    I would avoid all CSS with the exception of styles to remove link underlines if you want.

    Nested tables & font tags are what you should be using.

    Too many people advocate inline styles for positioning, margins, padding background images etc.

    All of those should *not* be used in html emails firstly because of the lack of consistency across email clients and secondly it can get your email marked as spam which defeats the whole of the campaign!

    I strongly urge you to avoid using CSS except where absolutely necessary, even then you will have to accept that it is not going to render as expected across all email clients. The only thing you can consistently rely on to have good support are your table tags and font tags.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •