Kashif Latif
Reputation: 677
HTML Email Preview in Outlook (Latest Version)
I'm trying to create a HTML email preview. Email preview is working fine on Gmail, Yahoo, Hotmail & Mobile View but unfortunately it is not working on Outlook. I tried multiple attributes but still failed. I'm attaching the original view and out look view with this question also sharing my working here. please check and guide accordingly. Original Email View is Below
while preview on outlook looks something like this
I'm attaching the code below for help
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Shirt Mailer</title>
<style type="text/css">
@font-face {
font-family: 'Helvetica Neue';
src: url(http://www.biads.co.uk/uneek-emails/fonts/HelveticaNeue-Medium.ttf) format('truetype'),
url(http://www.biads.co.uk/uneek-emails/fonts/HelveticaNeue-Light.ttf) format('truetype');
font-style: normal;
font-weight: 400;
}
body {
-moz-box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-webkit-text-size-adjust: 100%;
box-sizing: border-box;
color: #000000;
font-family: 'Helvetica Neue';
font-size: 16px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 100%;
padding: 0;
text-align: left;
width: 100% !important;
}
table {
width: 640px;
margin: 0 auto 30px;
}
.logo {
width: 250px;
margin: 25px 0;
}
.nav td a {
color: white;
text-decoration: none;
height: 36px;
line-height: 36px;
}
.full-img {
width: 100%;
margin-top: 10px;
}
.top-banner-img {
width: 640px !important;
}
.mb {
margin-bottom: 15px;
}
.head3 {
font-size: 17px;
}
.social-media {
padding-left: 0px;
margin-left: -10px;
}
.social-media li {
list-style-type: none;
display: inline-block;
}
.social-media li img {
margin-left: 10px;
}
.wb-img {
margin-left: 15px !important;
}
.unsub-link {
color: black;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr align="center">
<td colspan="7">
<a href="http://www.uneekclothing.com/" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/logo-black.png" alt="uneek logo" class="logo" />
</a>
</td>
</tr>
<tr bgcolor="#000000" class="nav" align="center">
<td width="14.2%">
<a href="https://www.uneekclothing.com/en-GB/catalogue__C7__Polos" target="_blank">Polos</a>
</td>
<td width="14.2%">
<a href="https://www.uneekclothing.com/en-GB/catalogue__C5__Sweats" target="_blank">Sweats</a>
</td>
<td width="14.2%">
<a href="https://www.uneekclothing.com/en-GB/catalogue__C8__T-Shirts" target="_blank">T-Shirts</a>
</td>
<td width="14.2%">
<a href="https://www.uneekclothing.com/en-GB/catalogue__C3__Shirts" target="_blank">Shirts</a>
</td>
<td width="14.2%">
<a href="https://www.uneekclothing.com/en-GB/catalogue__C2__Jackets" target="_blank">Jackets</a>
</td>
<td width="14.2%">
<a href="https://www.uneekclothing.com/en-GB/catalogue__C1__Hi-Viz" target="_blank">Hi-Vis</a>
</td>
<td width="14.8%">
<a href="https://www.uneekclothing.com/en-GB/catalogue__C6__Childrenswear" target="_blank">Childrens</a>
</td>
</tr>
<tr>
<td colspan="7">
<a href="https://www.uneekclothing.com/en-GB/product__UC713__Men's_Tailored_Fit_Long_Sleeve_Poplin_Shirt?category=3" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/top_banner.jpg" alt="uneek clothing" class="full-img top-banner-img" />
</a>
</td>
</tr>
<tr>
<td colspan="3">
<a href="https://www.uneekclothing.com/en-GB/product__UC714__Men's_Tailored_Fit_Short_Sleeve_Poplin_Shirt?category=11" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/bottom_left.gif" alt="" class="full-img mb">
</a>
</td>
<td></td>
<td colspan="3">
<a href="https://www.uneekclothing.com/en-GB/product__UC713__Men's_Tailored_Fit_Long_Sleeve_Poplin_Shirt?category=11" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/bottom_right.gif" alt="" class="full-img mb">
</a>
</td>
</tr>
<tr align="center" bgcolor="#f6f6f6">
<td colspan="4">
<h3 class="head3">Follow Our Socials!</h3>
<ul class="social-media">
<li>
<a href="https://www.facebook.com/uneekclothing.uk" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/5.png" alt="" />
</a>
</li>
<li>
<a href="https://twitter.com/totallyuneek" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/6.png" alt="" />
</a>
</li>
<li>
<a href="https://www.instagram.com/totallyuneek/" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/7.png" alt="" />
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC5XAHW8qF8KcQL_8FCKkxMA" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/8.png" alt="" />
</a>
</li>
</ul>
</td>
<td>
<h3 class="head3">Website</h3>
<ul class="social-media">
<li>
<a href="http://www.uneekclothing.com/" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/9.png" alt="" class="wb-img" />
</a>
</li>
</ul>
</td>
<td>
<h3 class="head3">Brochure</h3>
<ul class="social-media">
<li>
<a href="" target="_blank">
<img src="http://www.biads.co.uk/uneek-emails/img/10.png" alt="" class="wb-img" />
</a>
</li>
</ul>
</td>
<td></td>
</tr>
<tr align="center" bgcolor="#f6f6f6">
<td colspan="7">
<p>We have big things on the horizon, are you sure you don't want to hear about them?</p>
<p>Unsubscribe <a href="*|UNSUB|*" class="unsub-link" target="_blank"><strong>here</strong></a>.</p>
</td>
</tr>
</table>
</body>
</html>Upvotes: 2
Views: 15550
Answers (2)
gwally
Reputation: 3547
Outlook will not work with Helvetica Neue. It seems to have issues with font names that have a space in the name and doesn't work with most webfonts. You'll need a web-safe fallback font. I might suggest Trebuchet MS.
Outlook tends to ignore values for images in a
<style>sheet. So.full-imgwill have no impact on the image. Add in the width values like this:<img src="#" width="400" />If you have multiple classes on an element, Outlook might ignore everything beyond the first class.
Outlook has spotty support for
marginandpadding.Outlook ignores
list-style-typecolspanwill only bring you heartbreak in html emails.
There are a lot of issues about the way you created your email. For instance, using li instead of td for a horizontal display.
Good luck.
Upvotes: 5
ScottieG
Reputation: 328
Desktop Outlook uses the MS Word rendering engine, so it won't read your CSS styles in the 'head', so you will need to use inline styles too.
I'd also recommend using an '!--if (gte mso 9)' to add an additional to wrap for Outlook, to fix most layout issues.
Take a look at the below email template, it should help you out with your issue. You should be able to recreate your template around this.
Try and keep the container size to a maximum of 680px, although in most cases 600px will do.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"><!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
@media screen and (max-width: 600px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width { max-width: 100% !important; }
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
</head>
<body style="margin: 0 !important; padding: 0; !important background-color: #ffffff;" bgcolor="#ffffff">
<!-- HIDDEN PREHEADER TEXT -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Lorem ipsum dolor que ist
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="100%" background="bg.jpg" bgcolor="#3b4a69" style="background: #3b4a69 url('bg.jpg'); background-size: cover; padding: 50px 15px 0 15px;" class="mobile-padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="padding: 0 0 20px 0;">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/envelope-icon.png" width="50" height="50" border="0" style="display: block;">
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<h1 style="font-size: 40px; color: #ffffff;">Product Announcement</h1>
<p style="color: #b7bdc9; font-size: 20px; line-height: 28px; margin: 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</td>
</tr>
<tr>
<td align="center" style="padding: 30px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 28px;" bgcolor="#75b6c9">
<a href="https://codepen.io" target="_blank" style="font-size: 18px; font-family: Open Sans, Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 28px; background-color: #75b6c9; padding: 16px 28px; border: 1px solid #75b6c9; display: block;">
Learn more →
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 50px 0 0 0;">
<img src="http://pluspng.com/img-png/mac-computer-screen-png-pin-screen-clipart-mac-computer-2-1024.png" width="600" height="268" border="0" alt="Insert alt text here" style="display: block; color: #ffffff; font-family: sans-serif; font-size: 24px;" class="img-max">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="padding: 0 15px;" class="mobile-padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top">
<img src="https://imageog.flaticon.com/icons/png/512/178/178158.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF" width="600" height="109" border="0" style="display: block;" class="img-max">
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 50px 0 0 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<h2 style="font-size: 28px; color: #444444;">Design emails people love</h2>
<p style="color: #999999; font-size: 18px; line-height: 28px; margin: 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding-bottom: 25px; border-bottom: 2px solid #eeeeee;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="left" valign="top" width="280">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%;" class="mobile-wrapper">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:280px;" class="max-width">
<tr>
<td align="left" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/favourite-heart-icon.png" width="280" height="196" border="0" alt="Insert alt text here" style="display: block; border: 0px; color: #999999; font-family: sans-serif; font-size: 18px;" class="img-max">
<h3 style="font-size: 18px; line-height: 24px;">I ♥ Email</h3>
<p style="color: #999999; font-size: 16px; line-height: 24px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
<a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">
Read more →
</a>
</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="20" style="font-size: 1px;"> </td>
<td align="right" valign="top" width="280">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%;" class="mobile-wrapper">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:280px; float: right;" class="max-width">
<tr>
<td align="left" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/envelope-icon.png" width="280" height="196" border="0" alt="Insert alt text here" style="display: block; border: 0px; color: #999999; font-family: sans-serif; font-size: 18px;" class="img-max">
<h3 style="font-size: 18px; line-height: 24px;">I ♥ Email</h3>
<p style="color: #999999; font-size: 16px; line-height: 24px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
<a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">Read more →</a>
</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="padding: 25px 0 50px 0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="left" valign="top" width="190">
<![endif]-->
<div style="display:inline-block; max-width:33.3333%; min-width:190px; vertical-align:top; width:100%;" class="mobile-wrapper">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:190px;" class="max-width">
<tr>
<td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">
<img src="http://www.iconarchive.com/download/i98301/dakirby309/simply-styled/Gmail.ico" width="50" height="50" border="0" style="display: block;">
<h3 style="font-size: 18px; line-height: 24px;">Gmail</h3>
<p style="color: #999999; font-size: 14px; line-height: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
<a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">Read more →</a>
</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="15" style="font-size: 1px;"> </td>
<td align="left" valign="top" width="190">
<![endif]-->
<div style="display:inline-block; max-width:33.3333%; min-width:190px; vertical-align:top; width:100%;" class="mobile-wrapper">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:190px;" class="max-width">
<tr>
<td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">
<img src="https://www.freeiconspng.com/uploads/outlook-icon-0.png" width="50" height="50" border="0" style="display: block;">
<h3 style="font-size: 18px; line-height: 24px;">Outlook</h3>
<p style="color: #999999; font-size: 14px; line-height: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
<a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">
Read more →
</a>
</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="15" style="font-size: 1px;"> </td>
<td align="left" valign="top" width="190">
<![endif]-->
<div style="display:inline-block; max-width:33.3333%; min-width:190px; vertical-align:top; width:100%;" class="mobile-wrapper">
<table align="right" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:190px; float: right;" class="max-width">
<tr>
<td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">
<img src="https://www.freeiconspng.com/uploads/cricle-twitter-emblem-png-clipart-8.png" width="50" height="50" border="0" style="display: block;">
<h3 style="font-size: 18px; line-height: 24px;">Twitter</h3>
<p style="color: #999999; font-size: 14px; line-height: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
<a href="https://twitter.com" target="_blank" style="text-decoration: none; color: #75b6c9;">
Read more →
</a>
</p>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#f6f6f6" style="padding: 40px 15px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="padding: 0 0 5px 0;">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/envelope-icon.png" width="35" height="35" border="0" style="display: block;">
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
<p style="font-size: 14px; line-height: 20px;">
London<br>
United Kingdom
<br><br>
<a href="*|VIEW-ONLINE|*" style="color: #999999;" target="_blank">View Online</a>
•
<a href="*|UNSUBSCRIBE|*" style="color: #999999;" target="_blank">Unsubscribe</a>
</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>Upvotes: 2