htmlcssemailhtml-email
Why is my email client not rendering html email correctly?
I've read through a tonne of different similar questions and answers, and I understand that there are mass compatability issues with email clients. I also built my email using the mailchimp compatability guide, using table isntead of div etc...
On codepen it looks like this (minor differences as not completely up to date) -
https://codepen.io/Wrecket/pen/MWJzNrR
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title></title>
<style>
body {
background-color: white;
font-family: Nunito, Montserrat, monaco,Consolas,Lucida Console,monospace;
}
.col-8{
width:700px;
}
table{width:100%; border-spacing: 0px;}
.content{
background-color: white;
padding:0px 85px 75px 85px;
font-size: 16px;
}
.line{
border-top:1px solid #ddd;
}
.socialImage{
padding-top: 3rem;
}
</style>
</head>
<body style="background-color: black; padding: 3rem 10rem;">
<table class="content" style="text-align: center; border-radius: 18px 18px; padding-top: 2rem;">
<tr>
<td>
<i class="fas fa-check-circle" style="font-size: 3rem; color: rgb(127, 240, 58);"></i>
</td>
</tr>
<tr>
<td colspan="2">
<h1>Booking Confirmed</h1>
</td>
</tr>
<tr>
<td>
<p>booking for <span style="font-weight: bold">User Name </span> has been confirmed </p>
</td>
</tr>
<tr>
<td style="padding: 5rem 5rem;background-color:#f2f2f2;border-radius: 8px;">
<table>
<tr style="text-align: left">
<td colspan="2">
<p style="font-weight:bold">Signup Name</p>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td></td>
<td>
<p style="font-weight:bold">Total</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<td style="height: 5rem; background-color:black; width: 100%;"></td>
</table>
<table class="content" style="border-radius: 18px 18px;">
<tr>
<td style="text-align: right;">
<a style=" text-decoration: none; display: inline-block;" href="@Model.IOSAppLink">
<img class="socialImage" width="161" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/AppStore.png" style=" display: block;">
</a>
</td>
<td style="text-align: left;">
<a style=" text-decoration: none; display: inline-block;" href="@Model.AndroidAppLink">
<img class="socialImage" width="169" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/googlePlay.png" style=" display: block;">
</a>
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%; text-align:center;">
<p>
Please do not reply directly to this email. If you have any questions or comments regarding this email, please contact us at [email protected]
</p>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<img style="height: 4rem;" src="https://f.hubspotusercontent00.net/hub/8806450/hubfs/Playwaze_Logo_Orange_%23EA8A41.png?height=120&name=Playwaze_Logo_Orange_%23EA8A41.png">
</td>
</tr>
<tr>
<td colspan="2" style="height: 1rem; width: 100%"></td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
Copyright ©2021 Playwaze
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
Contact us:
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
The Lansbury Estate, 102 Lower Guilford Road, Woking, Surrey, GU21 2EP UK
</td>
</tr>
</table>
<!--<div class="booking-container-summary">
<div class="booking-summary">
<div class="booking-summary-name ">
@Model.ActivityName
</div>
<div class=" booking-summary-price">
@Model.Price
</div>
<div class="booking-date booking-summary-date">
@Model.GroupPlayDate
</div>
<div class="booking-address booking-summary-address">
@Model.Location
</div>
</div>
</div>
<br><br>
<div style="width:100%;" class="booking-container-mobile-bottom">
<div class="total-price-grid booking-price">
<div>
@Model.TotalPrice
</div>
</div>
<td class="content footer" style="padding-top:15px; padding-bottom:0px;">
<table>
<tr>
<td align="right" valign="top" style=" width: 50%; padding: 10px 10px 10px 0px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif; direction: ltr;">
<a style=" text-decoration: none; display: inline-block;" href="@Model.IOSAppLink">
<img class="socialImage" width="161" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/AppStore.png" style=" display: block;">
</a>
</td>
<td align="left" valign="top" style=" width: 50%; padding: 10px 10px 10px 0px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif; direction: ltr; ">
<a style=" text-decoration: none; display: inline-block;" href="@Model.AndroidAppLink">
<img class="socialImage" width="169" height="50" border="0" alt="" src="https://playwaze.blob.core.windows.net/emailassets/googlePlay.png" style=" display: block;">
</a>
</td>
</tr>
</table>
</td>
<td></td>
<p class="sans outro">
Please do not reply directly to this email. @Model.Text
</p>
<td class="contactsection">
<span class="footerlogo"></span>
<p class="sans contact" style="margin:0px">
Copyright @ 2019 Playwaze
<br>
Contact Us:
<br>
First Floor, Steward House, 14 Commercial Way, Woking, GU21 6ET
</p>
</td>
</div>-->
</body>
</html>
but then on email it looks like this -
I fully get that its a compatability issue somewhere, but can anyone help me identifiying where? This is my first (and hopefully last) venture into creating an html email.
Solution
When you redact email as HTML, you have to think in older versions of HTML, such as HTML 4 and below. Plus email clients have some limitations as to what related resources they will download for obvious security reasons.
By just removing the HTML5 DOCTYPE declaration, linked fonts and linked style-sheets, and cleaning up inline declarations, I get to the following code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
background-color: white;
font-family: Nunito, Montserrat, monaco, Consolas, Lucida Console, monospace;
}
.col-8 {
width: 700px;
}
table {
width: 100%;
border-spacing: 0px;
}
.content {
background-color: white;
padding: 0px 85px 75px 85px;
font-size: 16px;
}
.line {
border-top: 1px solid #ddd;
}
.socialImage {
padding-top: 3rem;
}
</style>
</head>
<body style="background-color: black; padding: 3rem 10rem;">
<table class="content" style="text-align: center; border-radius: 18px 18px; padding-top: 2rem;">
<tr>
<td>
<i class="fas fa-check-circle" style="font-size: 3rem; color: rgb(127, 240, 58);"></i>
</td>
</tr>
<tr>
<td colspan="2">
<h1>Booking Confirmed</h1>
</td>
</tr>
<tr>
<td>
<p>booking for <span style="font-weight: bold">User Name </span>
has been confirmed </p>
</td>
</tr>
<tr>
<td style="padding: 5rem 5rem;background-color:#f2f2f2; border-radius: 8px;">
<table>
<tr style="text-align: left">
<td colspan="2">
<p style="font-weight:bold">Signup Name</p>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td></td>
<td>
<p style="font-weight:bold">Total</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<td style="height: 5rem; background-color:black; width: 100%;"></td>
</table>
<table class="content" style="border-radius: 18px 18px;">
<tr>
<td style="text-align: right;">
<a style="text-decoration: none;display: inline-block;" href="@Model.IOSAppLink">
<img class="socialImage" width="161" height="50" border="0" alt=""
src="https://playwaze.blob.core.windows.net/emailassets/AppStore.png" style="display: block;">
</a>
</td>
<td style="text-align: left;">
<a style="text-decoration: none; display: inline-block;" href="@Model.AndroidAppLink">
<img class="socialImage" width="169" height="50" border="0" alt=""
src="https://playwaze.blob.core.windows.net/emailassets/googlePlay.png" style="display: block;">
</a>
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%; text-align:center;">
<p>
Please do not reply directly to this email. If you have any questions or
comments regarding this email, please contact us at [email protected]
</p>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<img style="height: 4rem;"
src="https://f.hubspotusercontent00.net/hub/8806450/hubfs/Playwaze_Logo_Orange_%23EA8A41.png?height=120&name=Playwaze_Logo_Orange_%23EA8A41.png">
</td>
</tr>
<tr>
<td colspan="2" style="height: 1rem; width: 100%"></td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
Copyright ©2021 Playwaze
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
Contact us:
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
The Lansbury Estate, 102 Lower Guilford Road, Woking, Surrey, GU21 2EP UK
</td>
</tr>
</table>
</body>
</html>Which gives a result with no icons or fancy fonts, but a presentation much closer to what you're looking for. You might be able to further approach your aim by using standard fonts (Helevetica Arial ?), and embedded images for icons
Now you also need to write cleaner code if you want to be able to debug it:
- Stick to either CSS in a
<style>element (preferably) or inline declarations; not both - Indent correctly
- Avoid unnecessary spaces scattered in your code
- And so on
Finally, using older HTML tags does not necessarily mean having tables all over the place. You could use a table for layout as it will help you to center and space your document parts, but then have common blocks inside each cell. Code will be cleaner, and therefore easier to read for humans as well as email clients...
Edit One more point: depending on how your email body will be encoded, you might experience issues with CSS lines starting with a '.'. Only fix I've found for this is to avoid starting lines with dots, for example rewrite all CSS lines like
.col-8 {
into
*.col-8 {
or wrap your whole email body inside a <div> with an id, and prefix every css rule with this id, which will also help in webmail clients to separate your CSS from the site's
- Set the background color of the entire webpage (the browser's window)
- HTML/CSS Flip Card Works on Desktop but not Mobile
- Javascript onload and onunload
- How to adjust kerning for the unicode flat symbol
- jQuery button click not showing/hiding content
- Force div to have an even width and height?
- How to set min width on content but still never exceed parent container width
- How to download older versions of Chrome from a google official site
- 2 colors in one placeholder of input field
- How can I align my Bootstrap container to fit the full width of the webpage?
- HTML+CSS A4 page with automatic page breaks
- How do I use the reverse border radius at the top of a card? (CSS)
- Pagination where the number of pages is automatically discovered from a specific folder on the server
- stop iframe from affecting load times
- Is there a simple way to make a HTML relational selection?
- Disable double-tap "zoom" option in browser on touch devices
- Resize image with javascript canvas (smoothly)
- How to redirect to new page when image is clicked? (html)
- I want to change the url in the base url but by removing the %20 character in the url
- Title tag is not working
- How to render raw html in the PyHTML library
- Line break in HTML with '\n'
- How to achieve a CSS footer "curtain" effect?
- How To Serve Image Size Based on Container, Not Screen Size
- Set the default value of an input field
- How to allow only English letters in input fields?
- ASCII 3D Text looks glitchy when used for a HTML Website
- How to style HTML5 audio tag?
- table with sticky header and horizontal scroll
- move words into a specific area