Solved

Responsive HTML Email Design (2 Column) Outlook 2007 / 10 Bug

Posted on 2013-05-30
4
509 Views
Last Modified: 2013-07-03
Hello,

I'm hoping that someone can help with a bug that I have with a responsive HTML email that I'm designing.

The HTML works fine in most email clients and responds gracefully to mobile phones. But doesn't work to well in Outlook 2007 or 2010 (which according to the figures I have is 9%)

So here is the section of the code in question --

<table border="0" cellspacing="0" cellpadding="0" width="100%" class="contenttable">
                                <tr>
                                    <td valign="top">
                                        <table width="100%" cellpadding="20" cellspacing="0" border="0">
                                            <tr>
                                                <td class="contentcell" style="padding:15px 20px 25px;">
                                                    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="headline">
                                                    <tr>
                                                    <td align="left" valign="top"><h2 style="color:#1D95C9;">
<singleline label="Title">Title</singleline></h2></td></tr></table>
                                                    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="innercontent">
                                                        <tr>
                                                            <td>
                                                                <table width="268" border="0"  align="left" cellpadding="0" cellspacing="0" class="articletable">
                                                                    <tr>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" width="268" class="articleimage" editable="true" /></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="left" valign="top" class="inset10" style="padding-top:10px;">
                                                                            <h3>
                                                                            <singleline label="Title">Title</singleline>
                                                                            </h3>
                                                                          <multiline label="Description"><p>Description</p></multiline>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                                <table width="268" border="0" align="right" cellpadding="0" cellspacing="0" class="articletable">
                                                                    <tr>
                                                                        <td align="left" valign="top">
                                                                            <img alt="" width="268" class="articleimage" editable="true" /></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="left" valign="top" class="inset10" style="padding-top:10px;">
                                                                            <h3>
                                                                            <singleline label="Title">Title</singleline>
                                                                            </h3>
                                                                          <multiline label="Description"><p>Description</p></multiline></td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

Open in new window


You can probably see, that it is two nested tables (with graphic, headline & text) one left aligned the other right aligned.

My CSS for mobile devises targets these classes like so --

	table[class="articletable"] a,  table[class="black_read_more"] a{
	font-family: 'Metrophobic', sans-serif !important;
	font-variant:small-caps !important;
	}
	table[class="table"], td[class="cell"] { 
	width: 300px !important;
	}
	table[class="contenttable"], td[class="contentcell"]{
  	width: 325px !important;
	margin-bottom:0 !important;
	}
	td[class="contentcell"]{
		padding:10px !important;
	}
	table[class="innercontent"]{
			width:305px;	
	}
	table[class="imagetable"], table[class="articletable"], table[class="headline"], table[class="imagetable"] td, table[class="articletable"] td,  table[class="headline"] td{
		width:305px !important;
	}
	table[class="imagetable"] td, table[class="headline"] td, table[class="articletable"] td{
		padding:10px 8px !important;
	}
	img[id="screenshot"]{
	width:100% !important;
	height:auto !important;
	}
	img[class="articleimage"]{
	width:100% !important;
	height:auto !important;
	padding:0 !important;
	margin:0 !important;
	}

Open in new window


The emails look great in webmail, outlook 2013 applemail etc.. BUT Outlook 2007 / 2010 doesn't work, it pushed the second table down resulting in a white gap above the image..

I've spent hours trying to find a solution....

Help

Thank you
0
Comment
Question by:garethtnash
  • 2
4 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 334 total points
ID: 39208726
Outlook 2007 / 2010  does not support most HTML/CSS and renders incorrectly for most of what it does support.

Cd&
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 334 total points
ID: 39208740
This support matrix might help you:
http://www.campaignmonitor.com/css/

Cd&
0
 
LVL 17

Assisted Solution

by:jrm213jrm213
jrm213jrm213 earned 166 total points
ID: 39259407
I don't know if it is an option but I don't bother creating email html anymore it is too difficult/time consuming and client's don't want to pay for all that time or the testing required.

I use mailchimp.com to build the html emails now. They have numerous templates you can use to start your design from and a lot of configuration you can do including font's, background colors, etc.. and I don't know if they all are now but the majority of their templates seem to be done with responsive design.

It looks like they end up putting some msoffice type proprietary tags in their tables to handle the issues you are talking about with outlook. The biggest issue I have run into lately with Outlook is that they completely removed support for "margin" in CSS. At least outlook for the web/the new hotmail did.
0
 

Author Closing Comment

by:garethtnash
ID: 39296866
Outlook 2007 / 2010  does not support most HTML/CSS and renders incorrectly...... Totally Agree - Thanks Microsoft....
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Follow this checklist to learn more about the 15 things you should never include in an email signature from personal quotes, animated gifs and out-of-date marketing content.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now