SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Thread: HTML Emails

  1. #1
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post HTML Emails

    Ok before I begin I would like to say how much html emails suck. I have learned some rules with html emails that I would like to share. Share your email tricks of the trade as well!

    1. Table Driven - this is a given.
    2. Can only apply padding directly to the td itself.
    3. Any element inside the td margins must be applied to.
    4. Setting a border for the parent table is quirky across email clients.
    5. If I set a fixed width to the parent table itself I set %'s for the children TDs. e.g.
    <table summary="...." cellspacing="0" width="730">
    <td width="70%">....</td>
    <td width="30%">....</td>
    </table>

    With emails you have to suck it up and basically step backwards in technology.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,087
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Thanks for the link - CSS is really ruled out in emails except for basic rules.

    I can remember the first email I built years back with the float rule hehe..

    Email did not come out the way I wanted...

    Anyways, is there tricks you have learned for close email cross browsing?

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,087
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Only use tables, specify as much as possible (widths, heights, etc).

    And, KISS (Keep It Simple Stupid)

    But, I don't make a lot of emails, so I'm not extremely good at it; for me it's mostly still trial-and-error.

  5. #5
    SitePoint Enthusiast Web Design Perth's Avatar
    Join Date
    Sep 2008
    Location
    Perth, Western Australia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My 2c...

    - all styles to be inline
    - check out this excellent free tool to do that:
    code.dunae.ca/premailer.web/
    - test your design in approx 20 desktop/webmail/mobile clients ($5) here:
    campaignmonitor.com

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Web Design Perth - code.dunae.ca/premailer.web/ is pretty neat!
    Thank you for the helpful links!

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Read Me - HTML emails are probably the most boring subject to read about as well as the most boring to work on. Here is a good link to follow up all questions regarding HTML email newsletters.

    http://www.sitepoint.com/article/cod...l-newsletters/

  8. #8
    SitePoint Zealot nacworld's Avatar
    Join Date
    Aug 2008
    Location
    TEXAS
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am receiving emails from companies, which send great html emails, they use email template or something like that... Most of them work with Email companies, does anyone know who offer for free HTML email with great templates ?

  9. #9
    SitePoint Wizard ShayneTilley's Avatar
    Join Date
    Apr 2007
    Posts
    1,044
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    campaign monitor and mail chimp both offer free templates. Take a look at Alex's article

    http://www.sitepoint.com/article/des...de-html-email/
    Shayne Tilley

    My slightly left of center thoughts on
    marketing, business and life in general.

  10. #10
    SitePoint Zealot nacworld's Avatar
    Join Date
    Aug 2008
    Location
    TEXAS
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is really nice, thanks Shayne

  11. #11
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When using images keep everything on one line, eg:
    Code:
    <td><img src="http://www.something.com/something.jpg" widt="100" height="100" alt="something" /></td>
    As opposite to:
    Code:
    <td>
    <img src="http://www.something.com/something.jpg" widt="100" height="100" alt="something" />
    </td>
    which will give you a little white line.

  12. #12
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Found something interesting. GMail hates negative number -- particularly negative margins.
    Not only will it completely strip this:

    margin-left:-1px;


    but it will also completely eliminate:

    margin: 2px 2px 2px -1px;
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  13. #13
    SitePoint Member
    Join Date
    Sep 2008
    Location
    Colorado
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Does anyone have insight on background images not showing in email programs, especially 2007 version of Outlook? It seems that they only show if included in the body tage or sometimes in the top table tag. Otherwise, background images don't seem to show if included in a <td> or <tr>.

  14. #14
    SitePoint Enthusiast Web Design Perth's Avatar
    Join Date
    Sep 2008
    Location
    Perth, Western Australia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look over at http://www.campaignmonitor.com - lots of tips re. cross compatibility issues. Also check out http://www.email-standards.org.

  15. #15
    SitePoint Member INetProperties's Avatar
    Join Date
    Jun 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there anyway possible you can try some templates? Does seem to work ok for me.

    T.

  16. #16
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gfarmer View Post
    Hello,

    Does anyone have insight on background images not showing in email programs, especially 2007 version of Outlook? It seems that they only show if included in the body tage or sometimes in the top table tag. Otherwise, background images don't seem to show if included in a <td> or <tr>.
    Backgrounds in Outlook 2007 are a no-show. I wrote a piece here on it: http://www.sitepoint.com/article/des...de-html-email/
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  17. #17
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexW View Post
    Backgrounds in Outlook 2007 are a no-show. I wrote a piece here on it: http://www.sitepoint.com/article/des...de-html-email/
    I actually read that article a few days ago. Nicely written Alex.

  18. #18
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    I actually read that article a few days ago. Nicely written Alex.
    Thanks for that, cooper.semantics. It got a really good response, actually. It seems to be a subject that lots of people are battling with just at the moment.

    I've just written a review on the Litmus email testing service -- a Campaign Monitor competitor -- which will be in the Design View that goes out tonight.

    Good product with a nice pricing model.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable


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
  •