Skip navigation
Currently Being Moderated

HTML Email Image Based Table Outlook 2077 & 2010

Jan 22, 2013 8:43 AM

Tags: #html #dreamweaver #email #outlook #images #tables #outlook_2007 #outlook_2010 #sliced



I've seen a few similar questions to mine, tried many of the suggested fixes with no luck so far. This is my first html email, made in dreamweaver from slice photoshop images.


Would anyone be able to have a look at my Table/Image based email and guide me in the right direction to ge tit to display properly in Outlook 2007 & 2010. I know Outlook is a pain with emails but the majority of my recipients will be using one of these versions.


You might think the coding is too much when you see it but it's because I've been adding all the fixes everyone suggests...


I'd really appreciate some help on this one.


Thanks so much.

  • Currently Being Moderated
    Jan 22, 2013 8:51 AM   in reply to Vicki146
    • First off too wide.
    • Second do you have a sender rating or is this something new with your company.  If it's new, all images are a bad idea and you will most certainly get flagged for spam.
    • Next your alt tags are all the same.  This doesn't work for emails.  Alt tags need to describe the content in case the images do not load which many email clients do not load images when the email opens.
    • Fonts are too obscure and small.  Imagine reading the "In Autumn of 2011" text on a phone.  It's a light font that does not have enough spacing and I wouldn't bother zooming in to read.
    • The whole BWI structure is unreadable
    • Did you know? Color, contrast.  Purple on purple doesn't work. Obscure fonts can be hard to read
    • Not obvious where to click at all.  Terrible design for phone.  If it's not obvious where to click then users will get lost or just delete.  Some pushpins are links some are not.
    • Contrast again - Teal on cork doesn't work
    • Contrast - Brown on yellow doesn't work


    Don't get me wrong with all my criticism.  It looks like a lot of thought went into this and there is some good execution, but overall it's not suitable for email bottom line.  I would stay start with the standard 600px (or 650px) wide table and go from there.  The concept needs to be simplified or you will lose your audience in a hurry.

    Mark as:
  • Currently Being Moderated
    Jan 22, 2013 9:17 AM   in reply to Vicki146

    Changing the width to 600 from 1100 will cut your document in half.  That's why I'm saying it really needs to be rethought out.  Do you have any statistics on your readers?  You almost need an average resolution that falls somewhere in the 1600px wide minimum which is not the norm to make that work.  Just because a resolution may be 1280 wide doesn't mean there is 1100px of visible space in an email client.  In fact it's probably closer to 800-900.  And there's really so much going on for an email.  Maybe you could talk them into a scaled down version with a couple links (home, social, and landing page) and make that page the landing page.  There are plenty of usage statistics and articles from ESPs like Mailchimp and Campaign Monitor to reference too.


    I do understand your predicament and if they are not going to listen to you telling them this will not generate interest or a return, all you can do is send it out as is and use the numbers to say this didn't work let's try something different next time.

    Mark as:
  • Currently Being Moderated
    Jan 22, 2013 9:24 AM   in reply to SnakEyez02

    Some other points...


    1. Downloading - The main problem I see for you is default email client settings. The default setting for most email clients is to not download the images embedded within the email, so your recipients will not see anything but your alt text and the "click here" text unless or until they choose to download. That alt text needs an update to make it useful.


    2. All Images - "All image emails" are considered spam by many junk/spam filters, it's best to have some html text content to keep it from being blocked by the recipient's email clients. I'm not certain if the small amount you currently have is enough for most filters. That being said, the current email could also trip some corporate level spam filters, keeping the email from ever reaching the recipient email client and getting whatever "from" email address you use blacklisted on those corporate servers.


    3. Embedded CSS - Embedded css (css within the <head> of a page) will not work on a wide variety of email clients, it gets stripped out along with most other <head> content. You can use inline css, though css is still not supported well by many email clients, especially Outlook. It appears as though your css will be fine since it is pretty simple. It just needs to be moved into the actual elements of the email.


    4. Valid Code - Aside from that, the code is technically fine other than the all caps META, which should be lower case at line 3, an extra </font> tag at line 4 and the use of the height attribute in the table which is technically invalid but likely not a display issue.

    Mark as:
  • Currently Being Moderated
    Jan 22, 2013 9:32 AM   in reply to Vicki146

    Can you point me to where the two image gaps are in the code?  It will save me from having to run the test through Litmus.

    Mark as:
  • Currently Being Moderated
    Jan 22, 2013 9:58 AM   in reply to Vicki146

    That gap is being caused by using nested tables.


    I would suggest re-slicing your work in Photoshop so the slices lay out as a simple grid. Since you aren't using anything that requires you to have all of these oddly shaped slices (everything is images and nothing between slices will resize like a text filed or other content).


    You could  just use a single cell table set to the right width and place the images within it in a natural flow, using a <br /> between rows.


    EDIT: Something like this...



    Mark as:
  • Currently Being Moderated
    Jan 22, 2013 10:40 AM   in reply to Vicki146

    Yep, image maps work fine in Outlook.

    Mark as:
  • Currently Being Moderated
    Jan 22, 2013 1:43 PM   in reply to Vicki146

    Some ammunition for you to take to the "powers that be":

    Creating HTML Emails: what you need to know



    Nancy O.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points