Grow your CSS skills. Land your dream job.

CSS Noob and HTML Email Disaster

  • # June 26, 2013 at 1:46 pm

    I’m so annoyed.
    I’m the first to admit that I have no idea what I’m doing, but doing HTML emails and using CSS in them has me so frustrated.
    I’m sure this is my crappy custom coding from a ThemeForest template, but I was wondering if someone would look at this and tell me why I’m getting these two issues. I have attached the results from an gmail account and the wonderful Outlook 2010 result.
    [Here's the page for the email.. Don't laugh](http://www.ngkfportland.com/email/first_main.html “HTML email attempt”)
    [Gmail Result](http://www.grubb-ellis-portland.com/img/gmail_issue.png “Gmail Result”)
    [Outlook Result](http://www.grubb-ellis-portland.com/img/outlook_issue.png “Outlook Result”)
    Note: The HTML email template has the the CSS rules WITHIN the body tag.. is this weird?

    Thanks In Advance

    # June 26, 2013 at 2:11 pm

    I am totally out of practice with coding eblasts, it is a pain.

    The only way to even do a good job at creating your own is to pay for testing software like http://www.emailonacid.com/

    Also http://www.campaignmonitor.com/templates/ probably also has really good templates, since they are pretty respectable (but I haven’t used it).

    # June 26, 2013 at 2:13 pm

    HTML email is just a nightmare. If you’ve no experience with HTML or CSS you’d be far better using a service such as mail chimp.

    # June 26, 2013 at 2:34 pm

    I work for a magazine fulfillment company and lets just say I’ve done my fair share of building emails for eblasts. Here are some tips:

    1. USE TABLES and only TABLES.
    2. Inline style everything.
    3. All email clients strip CSS and Javascript.

    Here is a good site to reference what tags can and can not be used.

    http://www.campaignmonitor.com/css/

    # June 26, 2013 at 2:48 pm

    To fix the Gmail issue, you might have to make the image within the A tag a block-level element. Just add style="display:block;" to the IMG tag and see if that fixes it.

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

You must be logged in to reply to this topic.

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