I've tried to Frankenstein together an e-mail signature but I'm failing.
I opened the e-mail on iPhone, Mac Mail, Thunderbird and Gmail and they all look different. Some drop the social icons below the main logo, others drop the gray text.
Fiddle (looking correct): https://i.imgur.com/OmjAliW.png
Thundermail: https://i.imgur.com/gk0eL3y.jpg
Gmail: https://i.imgur.com/DVZYdxF.png
Mac mail: https://i.imgur.com/jPS89ou.png
iPhone: https://i.imgur.com/ZZob4Ie.png
Here's the current code:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 300;
color: black;
}
td {
display: table-cell;
}
table {
table-layout: fixed;
height: 81px;
width: 250px;
overflow-y: hidden;
display: block;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2" style="width:45px;vertical-align:top"><img style="border:none" width="45" src="https://i.imgur.com/qFFfOdW.png">
</td>
<td style="height:45px;vertical-align:top;padding-top:7px;padding-left:15px"><b><span style="color:#000000;font-size:12px;">NAME HERE</span></b><br><span style="color:grey;font-size:10px;font-weight:400;">General Manager</span></td>
</tr>
<tr>
<td style="padding-left:15px;vertical-align:bottom">
<img width="22" src="https://i.imgur.com/L7RBFZu.png" alt="Facebook" style="border:none">
<img width="22" src="https://i.imgur.com/Pj2TSoO.png" alt="Instagram" style="border:none">
<img width="22" src="https://i.imgur.com/qtmS8US.png" alt="Website" style="border:none">
</td>
</tr>
</table>
</body>
</html>
Some modern mail clients allow non-inline CSS. However, most of the email clients still require you to write your CSS inline, so the table style cannot be at the top of the page but has to be embedded like <table style="..."></table>
See https://www.campaignmonitor.com/css/ for a list which describes which clients allow what tags.
Also, and I don't know if this will make a difference, but use '20px' instead of just '20'.
Related
Sample Code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
</head>
<body style="font-family: Arial; margin: 0; padding: 0;">
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px; background-color: #000000; font-family: Arial; font-size: 15px;color: #ff0000;">
<tr>
<td style="padding:10px;font-weight: bold;font-size: 20px; color: #ff0000;">Header Title</td>
</tr>
<tr>
<td style="padding:10px;">Here is the content for this section.</td>
</tr>
<tr>
<td style="padding:10px">
<img src="LearnMore.png" width="170" height="38" border="0" alt="Learn More" />
</td>
</tr>
</table>
</body>
</html>
Output for Office 365 in windows 10
All other clients seem to be fine.
Attempted the fixes from here
Looks like if a font size of 12px or 16px doesn't show the line but the requirement is to use 15px
expected result
The problem is often due to a rounding error in the Outlook engine (MS Word) with odd numbers. In your case, you've already identified an even numbered font-size works. Seeing as that's the core error, and it's not a bug in your code, you have to weigh up whether the unsightliness of the line is worse than changing the size of the font.
If that's not acceptable, you may have luck by setting a line-height of 16px like so: font-size:15px; line-height:16px;.
If all else fails, you can set the font-size differently just for Outlook desktops: font-size:15px; mso-ansi-font-size: 16px;
I have made an email template that gets sent once the user completes the registration. The template contains some icons from font-awesome, images, and some imported Google fonts.
These items are getting rendered perfectly when I am viewing the HTML file on the browser but when this is sent as an email nothing is getting rendered other than the texts only.
I tried moving the CSS styling inline but that doesn't work either. I am unable to understand what the problem is. Below is the code.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--<link rel="stylesheet" href="{% static 'regd_success_email.css' %}">-->
<style>
#import url('https://fonts.googleapis.com/css2?family=Carattere&display=swap');
body
{
margin: 0;
padding: 0;
}
table
{
border-spacing: 0;
}
td
{
padding: 0;
}
.wrapper
{
width: 100%;
table-layout: fixed;
background-color: #cccccc;
padding-bottom: 60px;
}
.welcome
{
font-family: 'Carattere', cursive;
}
.main
{
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
font-family: sans-serif;
color: #4a4a4a;
}
.email-body
{
font-family: 'Carattere', cursive;
font-weight: bold;
font-size: 25px;
padding: 5px 0 15px;
}
.button
{
background-color: #289dcf;
color: #ffffff;
text-decoration: none;
padding: 12px 12px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
.subs-and-pays
{
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 5px 0 5px;
}
#media screen and (max-width:600px) {
}
#media screen and (max-width: 400px) {
}
</style>
</head>
<body>
<center class="wrapper">
<table class="main" width="100%">
<tr>
<td height="8" style="background-color: #289dcf;"></td>
</tr>
<tr>
<td style="background-color: #001035;">
<a href="http://127.0.0.1:8000/">
<img src="{% static '../static/images/logo1.png' %}" alt="" width="600px" style="max-width: 100%;">
</a>
</td>
</tr>
<tr>
<td style="padding: 5px 0 50px;">
<table width="100%">
<tr>
<td style="text-align: center; padding: 15px">
<p style="font-size: 50px;" class="welcome"><strong style="color: #289dcf;">Welcome to Solve Litigation</strong></p>
<p class="email-body">Hello, {{name}}, you have been succesfuly registered with Solve Litigation.</p>
Go to Website <i class="fas fa-arrow-circle-right"></i>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="2" style="background-color: #a6d8ee;"></td>
</tr>
<tr>
<td style="padding: 5px 0 20px;">
<table width="100%">
<tr>
<td style="text-align: center; padding: 15px">
<p style="font-size: 20px;"><strong style="color: #289dcf;">Subscription and Payments</strong></p>
<p class="subs-and-pays"> For Subscription details and Payment methods click on the <strong> User Profile </strong> button after you login and then click on <strong>Payments</strong>. </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="2" style="background-color: #a6d8ee;"></td>
</tr>
<tr>
<td style="padding: 5px 0 20px;">
<table width="100%">
<tr>
<td style="text-align: center; padding: 15px">
<p style="font-size: 20px;"><strong style="color: #289dcf;">Contact Us <i class="fas fa-envelope"></i> </strong></p>
<p class="subs-and-pays"> To contact us regarding more details, updation of the information provided during registration or any other queries, click on the <strong> User Profile </strong> button after you login and then click on <strong>Contact</strong>. </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="8" style="background-color: #289dcf;"></td>
</tr>
</table>
</center>
</body>
<script src="https://kit.fontawesome.com/2b3aa8f23b.js" crossorigin="anonymous"></script>
</html>
This is a Django project so the image URLs I wrote are the convention of Django template language.
You need to host your images externally (and have them be publicly accessible) for them to be visible in an email or send them as an attachment.
Add your images to an image hosting service and replace your paths with absolute links to them.
You can also send your images as attachments but this is a less preferred option as it can increase the size of your email, which in turn can cause it to be blocked by email filters.
This answer has details on adding images as attachments in Django.
You can't use webfonts reliably in html emails. Some clients might respect and render them, but the majority don't.
You can use font awesome to png website to convert the icons into images, and Add it to an image hosting service to show them in email template
I'm trying to unify the font to appear the same on all operating systems and devices. Also some design elements break on different devices. what am I doing wrong? this is my code below?
<table border="0" cellpadding="0" cellspacing="0" width="768">
<tbody>
<tr>
<td rowspan="4" border="0" cellpadding="0" cellspacing="0" height="100" width="250">
<img src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/West-Coast-Elevators-Email-Signature-Image.jpg" alt="west coast elevators logo" width="350px" height="150" style=" margin-top: 28px">
</td>
<td colspan="4" height="20" width="200px"><p style="font-size:20px; margin-bottom: 5px; line-height: 20px; font-family: 'sans-serif', 'lato';"><strong>Full Name</strong><br>
<span style="font-size: 15px; font-family: 'sans-serif', 'lato'; color: #000000;">Managing Director</span></p></td>
</tr>
<tr height="10px" width="200px">
<td colspan="1" width="120px"><p style="margin-bottom: -0px; font-size: 15px">0000 000 000</p></td>
<td colspan="2" width="80px"><p style="margin-bottom: -0px;font-size: 15px">08 6263 5253</p></td>
</tr>
<tr>
<td height="47" colspan="3" width="220px"><p style="line-height: 0px; margin-top: 0px; font-family: 'sans-serif', 'lato';font-size: 15px">20 Wynyard St, Belmont WA 6104</p>
<p style="text-decoration: none; line-height: 10px; font-family: 'sans-serif', 'lato'; font-size: 15px">westcoastelevators.com.au </p></td>
<td width="180" ><img style="margin-right: 5px; margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-3.png" alt="facebook logo"> <img style="margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-4.png" alt="instagram logo"></td></tr>
</tbody>
</table>
This is a great tool for cross-browser/platform font issue: https://google-webfonts-helper.herokuapp.com/fonts/ try to download font from here and then import it in the css file.
To make the font constant everywhere, you would have to use a web font as Mr. Lister has said.
You could get fonts from all over the internet, but for now, getting fonts from here would be best.
An example, after selecting your font, you would import it into your HTML or CSS.
For HTML:
<body>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</body>
or
<style>
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
</style>
For CSS:
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
Then to use it in your code (Note: This is how I would do it, after seeing what you are trying to do in your code):
<style>
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
.p {
font-family: "Lato", sans-serif;
}
<!-- You will have to remove the font-family styling from all the tags though then leave this style tag in. -->
</style>
However, I strongly advise you look into external CSS. It would make your code much easier to work with.
The IMG src attribute is removed from tag and only ALT text is displayed in HTML email. Below is the container table from the banner that contains the image. This works fine when I display the HTML page in IE or Chrome. But when I run it through GoDaddy, the SRC attribute is deleted and the ALT text is not formatted as indicated in the IMG tag. How do I prevent this from happening?
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed; ">
<tr>
<td align="center" bgcolor="#efeac9" style="padding: 20px 0 0px 0;">
<div style="display: none; font-size: 1px; color:#efeac9; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
This won't be shown in the design, but will be visible in the inbox preview.
</div>
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" bgcolor="#efeac9" class="logo">
<img src="Images/WP_Email_Banner.png" alt="Wisconsin Pollinators" height="252" width="600" border="0" style="display: block;
padding: 0; color: black; font-family: Arial, sans-serif; font-weight: bold; font-size: 24px; background-color: #efeac9;
-webkit-border-radius: 10px; border-radius: 10px;" class="fluid-image"/>
<!--<img src="Images/WP_Email_Banner.png" height="252" width="600" border="0" style="display: block; padding: 0;"/>-->
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style='font-family:Verdana; font-weight: bold; color:#943E58; font-size: 20px; line-height: 24px; padding: 15px 0px 15px 0' class="mobile-title-pad">
WELCOME TO<br />WISCONSIN POLLINATORS
</td>
</tr>
</table>
</table>
</table>
Thanks for your help!
I hope you speak for the following image tag:
<img src="Images/WP_Email_Banner.png" alt="Wisconsin Pollinators" height="252" width="600" border="0" />
First check if the filename is correct.
Then check if the path is correct. If your image folder is outside of your html page use the following format "../Images/WP_Email_Banner.png"
Finally try to upload your image to your ftp client and use the url link in the src atrribute (like http://yourwebsite.com/Images/WP_Email_Banner.png. Check again and if you have problems comment.
Remove extra options from image tag and try this
<img src="Images/WP_Email_Banner.png" alt="Wisconsin Pollinators" height="252" width="600" style="display:block;" />
And you also using css class. In email it will not work so use inline css as you are already using.
Please Upload the image on a public url and use its link as img tag's src value.
When you send an email with attachment, the HTML content does not have access to the file system, hence local images do not show up as you expect them to be shown. I faced this with Outlook web and solution was to host the images on public URL.
Basically I am trying to create an email template using HTML and Dreamweaver. It's my first template. The fact that I cannot use <div> tag for email templates is really giving me headache. I am having difficulty aligning the social icons with the "I am social text". They both are assigned with align="center" inside the td tag. The image that is displayed below is "footer" section of my email template.
Here's the screenshot:
I am only posting the code for footer section because my content and header section is working fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrickyPhotoshop Newsletter</title>
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
background: #CCC;
}
h4.copyright, p.copyright {
padding-left: 50px;
color: #FFF
}
h4.social {
padding-left: 50px;
color: #fff;
}
p.footer {
color: #FFF;
}
</style>
</head>
<body>
<table width="600" align="center" bgcolor="#999999">
<tr>
<td align="center"><h4 class="social">I am also social</h4></td>
</tr>
<tr>
<td align="center"><p class="footer">
<a href="http://www.facebook.com/trickyphotoshop">
<img src=
"images/Facebook-256.gif" width="25px" height="25px"/>
</a>
<a href="http://www.tricky-photoshop.com">
<img src="images/g+.gif" width="25px" height="25px" />
</a>
<a href="http://www.twitter.com/trickyphotoshop/">
<img src="images/twitter.gif" width="25px" height="25px" />
</a>
</p></td>
</tr>
<tr>
<td height="10"><h4 class="copyright">Copyright Area</h4></td>
</tr>
<tr>
<td height="10"><p class="copyright">
© All rights reserved
</p></td>
</tr>
</table>
</body>
</html>
Basically I want two things:
I want to properly align "I am also social" text with the three icons i.e. facebook, twitter, google+
As you can see there is a huge space between "Copyright Area" and "All Rights Reserved". I want to remove this space.
I know that my code is not too much professional but it's my first HTML code.
You should change the style as follows:
h4.social {
/* remove: padding-left: 50px; */
color: #fff;
}
h4.copyright, p.copyright {
padding-left: 50px;
margin: 0px; /* add this line */
color: #FFF;
}
I recommend using this chrome extension for "playing" with CSS changes