Outlook and gmail emails are completely different

Question

I did a template for our email marketing campaing. But on gmail, msn (browser based) are good but on outlook is bad. How can i solve the problem ?

A piece of my code:

<td valign="top" width="194" class="rightColumnContent">

                                                <!-- // Begin Module: Top Image with Content \\ -->
                                                 <table border="0" cellpadding="10" cellspacing="0" width="194px" height="194px" style="background-color:#fafafa; margin-top:20px;">
                                                    <tr mc:repeatable>
                                                        <td valign="top">
                                                            <img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" style="max-width:69px;float:left;margin-right:15px;" mc:label="image" mc:edit="tiwc200_image01" /><h4 class="h4" style="float: left;">ARAMA</h4>
                                                            <div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />

                                                             Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.

                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <!-- // End Module: Top Image with Content \\ -->

                                            </td>

On Outlook enter image description here

score 1 · Answer 1 · answered Feb 03 '14 at 09:16

1

Getting HTML emails to look great across all clients is something that pretty much everyone who has tried to do email marketing runs into. There is no simple answer to your question, but I would start by following some of this advice and testing your email templates with a tool like litmus.

answered Feb 03 '14 at 09:16

Nathan

1,016
7
16

the mailchimp templates are also a good resource: https://github.com/mailchimp/Email-Blueprints – mnkypete Feb 03 '14 at 09:46
Whole bunch more listed [here](http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails/21437734#21437734) – John Feb 03 '14 at 15:04

John · Accepted Answer · 2014-02-03T15:19:41.533

You need to re-declare your font stack in every table cell.

Also, avoid margin, instead use padding in <td> tags.

Float is also not widely supported. If you want to float, you should be using align="left" instead, but for your example, it is better to keep it in tables.

Your code should look something like this:

<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="60">
      <img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" mc:label="image" mc:edit="tiwc200_image01" />
    </td>
    <td width="140" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; font-weight:bold; padding-left:15px; font">
      ARAMA
    </td>
  </tr>
  <tr>
    <td width="100%" colspan="2" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
      <div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />
       Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.
      </div>
    </td>
  </tr>
</table>

I set the table width 200, you could change it to percentage based if you prefer.

score 0 · Answer 3 · answered Mar 03 '14 at 13:23

Float simply will not work in Outlook 2007+. Versions of Outlook for Windows from 2007+ use Office as the rendering engine, and thus won't render standard HTML properly.

Align will often work, but the safest course of action is to create a two-column table with the image on the left and the text on the right. The image column should have an explicitly set width. (Don't try to make the table more than one row. In email HTML, it's better to nest a series of simple tables than to create one complex one.)

Make sure that you use the appopriate old-style pre-HTML 4 tag attributes in your table tags. In particular, to get your layout, make sure that the table cells have "valign='middle'".

If you're sending through one of the major email service providers, such as Mailchimp or Campaign Monitor (and you should be, to protect the integrity of your list), it will inline all your style code for you -- so you don't actually need to redeclare the styles for every table cell, you can simply use an embedded stylesheet.

Outlook and gmail emails are completely different

3 Answers3