Reputation: 811
CSS Email Template at Outlook does not display correctly
I am trying to make a HTML CSS Email template that can work on all email clients. I manage to get a simple one up. The template will display properly on Gmail, Hotmail but when it comes to Outlook everything is misaligned. I know that Outlook uses Words to render the template. How do I code to come around it. I want to make it responsive as well. I do not know where to start debugging. I am really new to coding responsive email template for email clients. I have tried to inline my CSS but it does not work. I have tried to use litmus to sent out the email, it doesn't work as well. I have put my code in JSFiddle, can Gurus out there please help out. I really need some help.
CODE
https://jsfiddle.net/hansheung/yjk309e4/2/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
Margin: 0!important;
padding: 15px;
background-color: #FFF;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #727f80;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
background-color: #FFF;
}
td {
padding: 0;
}
.header {
background-color: #C2C1C1;
border-bottom: 3px solid #FF8800;
}
p {
Margin:0;
}
.header p {
text-align: center;
padding: 1%;
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
}
a {
color: #F1F1F1;
text-decoration: none;
}
/*--- Start Two Column Sections --*/
.two-column {
text-align: center;
font-size: 0;
padding: 5px 0 10px 0;
}
img {
border: 0;
}
/*--- Start Outer Table Banner Image, Text & Button --*/
.image img {
width: 100%;
max-width: 670px;
height: auto;
}
.main-table {
width: 100%;
max-width: 610px;
margin: 0 auto;
background-color: #FFF;
border-radius: 6px;
}
.one-column .inner-td {
font-size: 16px;
line-height: 20px;
text-align: justify;
}
.inner-td {
padding: 10px;
}
.footer {
width: 100%;
margin: 0 auto;
background-color: #053D66;
padding: 4% 2%;
}
/*--- Media Queries --*/
@media screen and (max-width: 400px) {
.h1 {
font-size: 22px;
}
.two-column .column, .three-column .column {
max-width: 100%!important;
}
.two-column img {
width: 100%!important;
}
}
@media screen and (min-width: 401px) and (max-width: 400px) {
.two-column .column {
max-width: 50%!important;
}
}
.section {
width: 50%;
text-align: center;
}
.m1{
margin: 1%;
}
.p1{
padding: 2%;
}
.contact-details{
text-align: left;
}
.text{
font-family: "Helvetica","sans-serif";
padding: 50px 0px !important;
line-height: 150%;
color:#202020;
font-size: 18px;
text-align:inherit
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
.image-right{
text-align: right;
padding-right: 2%;
}
</style>
</head>
<body>
<div class="wrapper">
<table class="outer-table">
<tr>
<td class="image">
<img src="http://www.talent-trust.com/documents/News2020.03/covid19-ttc_header.jpg" alt="">
</td>
</tr>
</table><!--End Banner Image-->
<table class="outer-table">
<tr>
<td class="image">
<img src="http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg" alt="">
</td>
</tr>
</table><!--End Banner Image-->
<table class="main-table">
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td class="inner-td">
<p class="text">
As you are aware China has been experiencing an<a href="https://talent-trust.com/documents/News2020.03/en.html"><span style='color:#FF7F30'>Read More</span></a>
</p>
<!-- <p class="button-holder-center">
<a href="" class="btn">Learn More</a>
</p> -->
</td>
</tr>
</table>
</td>
</tr><!--End heading paragraph and button section-->
</table><!--End of main table-->
<table class="footer">
<tbody>
<tr>
<td class="section image-right">
<img width="35%" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
</td>
<td class="section">
<div class="contact-details">
<p style="margin-bottom: 0;color:#ffffff;font-size: 11pt; padding-left: 5%;">Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p style="margin-top: 0;color:#ffffff;font-size: 9pt;padding-left: 5%">Tel:+604-899-8945</p>
</div>
</td>
</tr>
<tr>
<td class="text-right p1"><a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a></td>
<td class="text-left p1"><a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a></td>
</tr>
</tbody>
</table>
</div><!--End Wrapper-->
</body>
</html>
Display in GMAIL OK
Everything misaligned in Outlook
Upvotes: 4
Views: 19707
Answers (3)
Reputation: 21
Maybe the only way to do it is to use tables. Here's my example:
<html>
<head>
<title></title>
</head>
<body>
<!-- begin content -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff" style="margin:0 auto;">
<tbody>
<tr>
<td style="padding:10px 0">
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tbody>
<tr>
<td>
<center>
<!-- You can Replace this Stack Overflow header image -->
<img width="50%" src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png">
</center>
<!-- spacer:start -->
<div style="border-bottom:0px solid #ffffff; height:25px;margin:0 auto;"></div>
<!-- spacer:end -->
</div>
</td>
</tr>
<tr>
<td>
<p>Hello <span style="color: red;">Customer</span></p>
<p>This is the message body</p>
<!-- spacer:start -->
<div style="border-bottom:0px solid #ffffff; height:25px;margin:0 auto;"></div>
<!-- spacer:end -->
</td>
</tr>
<tr>
<td>
<!-- spacer:start -->
<div style="border-bottom:0px solid #ffffff; height:25px;margin:0 auto;"></div>
<!-- spacer:end -->
<p><img src="https://ci3.googleusercontent.com/mail-sig/AIorK4yxIiYo-WtrEC42WW8qw_CZiklMVGmLy4dG1tQ1WPlYeQ1vJesefKrr2rch5jjEeOnhyBy7a2c" width="96" height="55" data-aii="CiExWHhGaVhYYWw4bVMtWGx4TEEyaDdUVm1pLUlvTHJnZTI" data-os="https://lh3.googleusercontent.com/d/1XxFiXXal8mS-XlxLA2h7TVmi-IoLrge2"> </p>
<p><strong>Jules Ivan Garay</strong><br /><em>Your awesome friend</em></p>
<!-- Footer: START -->
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth" style="background-color: #FC0;">
<tbody>
<tr>
<td style="padding:20px 20px 10px 20px">
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tbody>
</tbody>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tbody>
<tr>
<td valign="top" align="center" class="center" style="padding-top:0px">
<!-- spacer:start -->
<div style="border-bottom:0px solid #ffffff; height:25px;margin:0 auto;"></div>
<!-- spacer:end -->
<small>
You are receiving this email because you recently availed of <em>Your awesome Friend</em>'s service.
</small>
<!-- spacer:start -->
<div style="border-bottom:0px solid #ffffff; height:25px;margin:0 auto;"></div>
<!-- spacer:end -->
<small>
<a href="Put_your_link_here">Privacy Policy</a><br />
<a href="Put_your_link_here">Unsubscribe</a><br />
© 2023 Jules Ivan Garay |<em>Your Awesome Friend</em>
</small>
<!-- spacer:start -->
<div style="border-bottom:0px solid #ffffff; height:25px;margin:0 auto;"></div>
<!-- spacer:end -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Footer: END -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I hope this helps
Upvotes: 1
Reputation: 5269
I suspect you need to add a wrapping table for Outlook, and inline the code.
First, inline the code: https://inliner.cm/
Second, add this wrapper for everywhere you use max-width (unsupported in Outlook). You might want to restructure the code so you only have to do this once:
<center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;">
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;">
<![endif]-->
<table ...>
...
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</center>
Upvotes: 1
Reputation: 4776
Things that will not work, or not work if cross-client rendering is the business requirement (based on your code snippet).
- html5
- media queries
- binding styles with classes & ids (everything should be inlined – with a programmatic tool or coded by hand)
- CSS paddings (limited support)
- CSS margins (limited support)
- paragraphs
- max-width CSS rule
If you want cross-client template, follow these guidelines. Those are roughly from the top of my head, since I coded emails professionally a few years ago, but I don't have some "hard" tests or links to back all of this up.
- Use HTML 4.01 doctype, and its rules.
- Responsive (RWD) e-mails are really next-level advanced stuff. I would not recommend that until you really grasp what is going on in rendering engines (lots of testing). For now stick to fluid-layout, which can be achieved with table structure as explained here. Also media-queries does not work cross-client, I would drop them.
- Margins, paddings have mixed support, use them only on
tdelements, and always double up with cellpadding if you can. - Avoid short-hand CSS declarations. Instead of
border, useborder-width,border-style,border-color. Width should always go first. - Do not use paragraphs (
ptags), leveragetd's to the fullest, by using cellpadding and cellspacing, which works everywhere. - Aligning content (text, images) is done easiest with
alignandvalignattributes ontdtags. When used correctly can help immensely with coding any layout. - You can use this CSS guide and Can I Email for quick fact-cheking, as mentioned by @cloned (there was no Can I Email back in my days).
- Get yourself in the mindset: the year is 1994 and all you have at your disposal are tables (lots of 'em), images, default fonts, and inline CSS :) You can get a long way with just that.
- Firefox was helpful for me during development, because its rendering engine is close to what Thunderbird would output on screen.
- If you can sneak in proper rendering of some custom font, or animating gif, or interesting responsive behaviour, that is great, but do not count on it. It definitely will not be cross-email-client experience, and the clients/managers you work for (if you have them) should be aware of that. This is "progressive enchancement" for email rendering :)
- Most email clients will do horrifying things with your template, like mangle your code to the point of it being unrecognizable, adding custom ids, overwriting classnames, adding own custom styles or custom classes, striping all the head section, etc. Part of it has to do with security, another part with rendering engine. That is why you should rely on tables and inline styling most of the time, and keep whats in the
headto absolute minimum that you know will work in the programs (email clients) you are targeting.
In short this is really deep topic, the understanding will come to you, as you gain experience with testing results and adjusting your code. You should invest in testing preview software (you mentioned Litmus). I have used Email on Acid, which also is great. You should use it to preview results in different email-clients, not to send your campaigns/emails.
Most important:
If you are changing your code, test it right away (Litmus/Email on Acid) to gain an insight how it renders in every email client. This is tedious and takes time, but after a few times you will know exactly what you can do, and what the result will be. Isolate what you are testing, and do it often.
Second most important:
Define what pool of email clients you are targeting. This should be done in agreement with your client/manager (if you have them). You wrote, that you want template that will work in "all email clients". That is just not realistic. There are too many of them.
I was testing in more than 60 configurations, when I was coding a new template. Thats 60+ screenshots to check for each test. You need to narrow down to a pool that is "good enough" and can reasonably be tested. This should be checked with the statistics of the subscriber list, and the visible email addresses being used by newsletter subscribers.
For example: if 50% of subscribers use Outlook 2007 and the rest use Gmail, then you know you need to target and test in those two clients. The rest is just "a bonus". Of course you don't always know that, so you should include most popular clients as well. Use public stats provided by Litmus, or someone else to determine what is "popular" at this time.
Another thing is that you may or may not need to include in your testing specific web-based email clients related to geographic area, for example gmx.de, or onet.pl, etc. Most of them have their own rendering engines developed in-house. Some of them even have special rules that apply to newsletters sent by them to their users. In that case you should be able to get written documentation how the newsletter should be prepared (special tags, formatting, etc).
Also think about some more obscure email clients, what if someone uses Kindle or Apple Watch to read emails? What should they see? Some of this type of clients use "text-only" version of a newsletter, so you should also prepare text-only version, if HTML-version cannot be displayed, or a user specificaly blocked HTML and requests text only.
Upvotes: 10
Related Questions
- Outlook not displaying CSS properly
- Email template in outlook, CSS not working properly ? Any fix or Alternative CSS?
- CSS in Outlook email its not working properly
- HTML: Outlook not rendering correctly email
- HTML not format correctly in outlook
- Simple Email CSS displaying different than in Browser
- Padding and Margin not working in Responsive Email Template (outlook)
- HTML responsive email width issue in Outlook
- Responsive html e-mail: outlook
- Responsive email template Outlook displaying issue