Currently, I'm working on an e-mail template in HubSpot but I came across a problem that I can't seem to find a fix for.
<table class="two-col-centered" style="line-height: 1.5em; max-height: 309px;">
<tr>
<td style="width: 40%; font-size: 12px; padding: 0px 0px 0px 0px;" valign=top class="k-700-col mk-padding">
<table style="width: 100%;"><tr>
<td style="padding: 0px 0px 0px 00px;">
{% if widget.Image.src %}
<img src="{{ widget.Image.src }}" width="309px;" height="269px" alt="{{ widget.Image.alt }}">
{% endif %}
</td>
</tr></table>
</td>
<td style="width: 60%; font-size: 12px; padding: 0; background-color: #ED4A2F;" valign=top class="k-700-col mk-padding;">
<table style="width: 100%;"><tr>
<td style="padding: 25px 30px;">
<h2 style="font-size: 20px; margin: 0; margin-bottom: 10px; color: #fff;">{{ widget.heading_right }}</h2>
<span style="display: block; background-color: #fff; width: 5em; height: 5px; border: none;"></span>
{{ widget.content_right }}
{{ widget.CTA }}
</td>
</tr>
</table>
</td>
</tr>
This is the code currently in HubSpot for the particular part that isn't responsive in the Gmail app.
Android Gmail app screenshot
iOS app screenshot
Outlook 2016 screenshot
Outlook Chrome screenshot
Ideally, I would like to have the Android Gmail app like the iOS app...
Thanks in advance.
Android Gmail app does not support media queries.
https://litmus.com/community/discussions/6184-media-query-support-for-gmail-app-on-lollipop-does-it-work-for-you
https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81
Outlook does not support a value like this in tables: width="309px;" Use width="309" instead.
Good luck.
Related
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 am using the following code to create a button:
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td style="border-radius: 2px;" bgcolor="#1AB394">
<a href="https://www.example.com" target="_blank" style="padding: 8px 12px; border: none; border-radius: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; text-decoration: none; font-weight: normal; display: inline-block;">
CONFIRM ACCOUNT
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The button is used in emails. When I send the email, the button looks fine on the web mail clients:
But doesn't look right on some other mail clients such as Outlook:
Can someone please help? Thanks.
You might want to take a look at this:
outlook-rendering-issues
Item #3.
I cannot test any of that because I do not use outlook as a client, but they seem to suggest that you might have to style the td enclosing the a tag more than you have. It does almost look like it is not treating the a tag as an inline-block like you have in your style. If you add the:
padding: 8px 12px;
to the enclosing td that might fix the appearance of the button.
*Here is the html code. How do I copy the the whole page and use as my email signature.
*
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="border-radius: 25px; border:2px solid #446cdb; padding: 20px; width:400px; height:170px;">
<img align="left" src="http://yourwebsiteengineer.com/icons/Helmet.png" nosend="1" border="0" width="150" height="90" alt="coding" />
<table cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr>
<td valign="left" style="padding-left: 2px; padding-top: 1px; padding-bottom: 1px; padding-right: 1px;">
<span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 10pt; font-weight: bold">Victor
/ Intern</span>
<br>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font-family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">IT Department</span>
<br>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 11pt; font-weight: bold"> Communications Ltd.</span>
<br>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<span style="text-align: left; color: #000000; font-family: Arial; font-size: 9pt; font-style: normal; font-weight: normal;">No 12b kenneth Agbakuru street <font size="1" color="#B9B9B9">|</font> HSG estate <br>Lekki Phase1 Lagos, Nigeria.<br><font color="#B9B9B9"> Tel:</font> + </span>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 5px; padding-bottom: 0px; padding-right: 0px;">
<span style="text-align: left; margin-top: 0px; color: #F77A1E; font-size: 9pt; font-weight: bold; font-family: 'Calibri', sans-serif;">
<a style="text-decoration: none; color: #1e1ef7" href="http://www.optiwebn.com/" target="_blank"><font color="#2d26de">w:</font> <font color="#000000">www.cahefun.com</font></a> <font size="1" color="#B9B9B9">|</font><br> <a style="text-decoration: none; color: #F77A1E" href="mailto:victor.adewale#optiwebng.com" target="_blank"><font color="#1e1ef7">e:</font> <font color="#000000">jacob66#gmail.com</font></a>
</span>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 0px; padding-right: 0px;">
<a href="http://twitter.com/haddy_whales" target="_blank">
<img src="http://yourwebsiteengineer.com/icons/twitter.png" nosend="1" border="0" width="21" height="17" alt="Twitter" />
</a>
<a href="http://www.facebook.com/vadewale2" target="_blank">
<img src="http://yourwebsiteengineer.com/icons/facebook.png" nosend="1" border="0" width="21" height="17" alt="Facebook" />
</a>
<a href="https://ng.linkedin.com/in/victor-adewale-8a3718114" target="_blank">
<img src="http://yourwebsiteengineer.com/icons/linkedin.png" nosend="1" border="0" width="21" height="17" alt="LinkedIn" />
</a><a href="https://www.instagram.com/haddy_whales/" target="_blank" />
<img src="images%20(1).jpg" nosend="1" border="0" width="21" height="17" alt="LinkedIn">
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<style>
a {
color: #F77A1E;
}
</style>
</html>
**Here is the html code. How do I copy the the whole page and use as my email signature.
**
how do I copy the border along with the content in it?
If you want image of html then save your html as canvas image, and include that image in your mail body.
Or if you want pure html then by javascript/jquery take all html of body by innerHTML/html() method respectively and send it as mail body.
You have to use an email client like outlook, or thunderbird.
To use a signature in Outlook:
On the Home tab, choose New Email.
On the Message tab, in the Include group, choose Signature > Signatures.
Signature command
Under Select signature to edit, choose New, and in the New Signature dialog box, type a name for the signature.
Under Choose default signature, do the following:
In the E-mail account list, choose an email account to associate with the signature.
In the New messages list, choose the signature that you want to be added automatically to all new email messages. If you don't want to auto sign your email messages, accept the default option of (none).
In the Replies/forwards list, choose the signature that you want to be added automatically (auto sign) when you reply to or forward messages. Otherwise, accept the default option of (none).
Under Edit signature, type the signature, and then choose OK.
http://rajputproud.blogspot.in/p/blog-page_25.html
Click this links and Copy your Signature and paste is in email signature,
i tested it . :)
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.
I have created a line of square , it works in modern browser such as Gmail in google, but for outlook , it show like this:
The 4 block combine together and also the div height is not honoured, any idea or workaround?
<tr>
<td colspan="2" style="text-align: center;padding: 10px 0px; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<h3 style="text-align: center;margin-top: 0px; color: #606060;">Have a Question?</h3>
<table align="center" cellpadding="0" cellspacing="0" width="700px" border="0" style="margin:auto;">
<tr>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q1.jpg" /></td>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q2.jpg" /></td>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q3.jpg" /></td>
<td style="width:25%;text-align: center; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<div style="border: 3px solid #6C6E70; height: 144px; width:144px;">
<p style="color: #58595b; font-weight: bold; margin-top: 10px; margin-bottom: 0px; text-decoration: none; font-size: 16px;">Useful Links</p>
<p style="margin-top: 10px; margin-bottom: 0px; font-size: 15px;">My Account</p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;">Return Policy</p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;">FAQ</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
Thanks for helping.
In emails, particularly Outlook 7/10/13, it's better to define the td with a set width, rather than percentages. This then allows you to define the spaces properly (which I imagine Outlook is ignoring, and is mashing all of the td's together).
This is a great resource for how well supported some CSS is in various email clients. https://www.campaignmonitor.com/css/ Margin is one in particular you don't want to use, as it's not supported on Outlook.com.
Also, if this is for email, I'd recommend not using p tags (as they can render differently in different email clients), you could also center the text by adding a height to the td, rather than using nbsp's - see this previous answer for how to do that: How to writte text in the middle of an image without positioning and z-index?
Outlook doesn't support the margin property, or any of its variants: https://litmus.com/help/email-clients/outlookcom-margins/
You can use padding, but not on block elements. consider changing your p tags to a table and use padding to get the look you want.