First and foremost, please excuse my english and my html, i'm neither english nor developer. I'm trying to build an HTML mail for my client who desire to send it via Copy/paste in their Gmail client. I've downloaded a template from mailchimp and customized it. The HTML looks like that :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
#outlook a{
padding:0;
}
body{
width:100% !important;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
body{
-webkit-text-size-adjust:none;
}
body{
margin:0;
padding:0;
}
img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
table td{
border-collapse:collapse;
}
#backgroundTable{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
body,#backgroundTable{
background-color:#FAFAFA;
}
#templateContainer{
border:1px solid #DDDDDD;
}
</style></head>
<body align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" align="center">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td class="headerContent">
</br>
<img src="http://gallery.mailchimp.com/7243c1f17089e9e1ebba4fe7e/images/logo_couleur.png" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" class="bodyContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_content00">
Content etc.
When I copy/paste that and send it with gmail it renders correctly on my mobile but the email is not centerer in gmail client.
Any help would be really appreciated !
Thanks a lot.
The best way is to nest your tables.
Have one wrapper table that centers it's child tables.
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td>
YOUR EMAIL CONTENT GOES HERE
</td>
</tr>
</table>
</td>
</tr>
</table>
Also, gmail is a capricious mail client. If you have black links, you'll need to use #000001, or else gmail will render those link with the default blue color.
Make sure all your images are displayed as block elements without borders, or else it'll add white space around each of them, even spacers.
If you don't want phone numbers to be clickable by default on gmail, you'll need to wrap those into empty anchor tags.
And the one golden rule of html-email: Inline styles.
Hope this helps! :)