I'm building an app which responds to emails on behalf of my app users. These emails are sent to my users and intercepted by my app to auto-respond to their clients. The emails come from third parties and contain branded formatting.
My PHP app takes the full HTML of the email, stores it in a MySQL table then creates a reply and appends the HTML under a <hr/> at the bottom of the email.
This works and it looks like a reply (which is my intention (although I will build some header detail to make it look more legitimate as if it was replied to in Outlook or similar)).
My problem, however, is that this method hurts the reply formatting - it seems to take on styles like line-height from the original email HTML at the bottom of the reply.
Thus my question is, how do I create a reply email? Do do what I'm doing and style my reply better, or do I need to do more with the complete original, not just the HTML output. And is it even ok to have to HTML tags in an email?
I would love it if the answer was something like: extract the X from the email and build a reply with the opensource Y library :)
EDIT: Email examples as requested
This third party email contains a head that looks like this:
<html>
<head>
<style type='text/css'>
body{font-family: arial,helvetica,sans-serif;}
a{color: #06c;}
p{margin:0;}
#message{width:600px;margin:0 auto;}
.legal{margin-top:2em;}
.footer{margin-top:1em;padding:5px;background:#999999;color:#fff;}
.footer a{color:#fff;}
.senderName,.label{font-weight:bold;}
.link,.label,.hint{margin-top: 20px;}
.header-separator{height:4px;background-color:#e4002b;width:100%;margin-top:17px;}
tr,td{vertical-align:top;text-align:left;}
img{border:0;}
${css!""}
</style>
</head>
<body>
<div id='message'>
...
And my user email templates (built in TinyMCE) will look something like this:
<p><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14pt;">Dear [name],</span></p>
<p><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14pt;">Thanks for your enquiry
...
When I send the email to the email service it's as simple:
$emailreply = $userTemplate . '<hr/>' . $originalEnquiry;
Surely, that's not good enough? Also, this is the email that I mentioned where line-height is being affected - so my user templates are not sending as designed.
It's kinda rare the case on the 3rd party email, having separated <style > tag when the usual procedure on HTML email development is to set up all styles inline.
It's kinda logical that those styles (from the <style > tag are damaging your new code, The best option here is to make all that styling (from the 3rd party email) inline, so you can remove the <style > tag, keeping both email styling separated.
As you said PHP App, I think you can use some of the following:
https://github.com/tijsverkoyen/CssToInlineStyles
https://github.com/jjriv/emogrifier
https://github.com/emilsundberg/Laravel-HTML-email-inliner/blob/master/src/Emil/Inliner/vendor/Premailer/Premailer.php
And make sure, if the chosen one of the above tools doesn't remove the <style>...</style> tag, remove it by yourself (you can do it using regular expressions).
Hope this helps, good luck
Related
I have recently been developing a newsletter for a client of mine. How ever I can't seem to find good information on what css and html are safe to use in the major mail clients.
I thought that maybe there are people here that have the knowledge and we can create some sort of list of things that work in major mail clients.
This is a list of popular mail clients I borrowed from campaign monitor. (If I forgot somthing please tell me)
Microsoft Outlook
Apple Mail
Hotmail
Yahoo! Mail
Gmail
The question is what tags, attributes, special quirks are there in these major browsers and how can they be easily avoided.
Thanks for the help,
There is a detailed and comprehensive list of CSS support in common mail clients at Campaign Monitor.
http://www.campaignmonitor.com/css/
You can find a comprehensive list of supported and non-supported CSS features for all major email clients at Email Standard Project
A really useful bootstrap for developing HTML emails, which has a ton of discrepancy eliminators is HTML Email Bolerplate
And as a general rule - always use tables and all the old-school HTML tags ( align, center, valign, color etc. ). Some reading on the topic.
Here are a couple of posts to get you started:
http://css-tricks.com/using-css-in-html-emails-the-real-story/
http://www.sitepoint.com/code-html-email-newsletters/
Here is an email css cheat-sheet. http://intenseminimalism.com/2010/email-css-cheatsheet/
PDF providing table format for CSS Support in different mail clients:
Gives information for Web Clients, Desktop Clients on Different OS and Mobile Mail Clients.
CSS support by Different Email Clients
https://i3.campaignmonitor.com/assets/files/css/campaign-monitor-guide-to-css-in-email-may-2014.pdf?ver=5320&_ga=1.228308635.745708791.1442556968
Gmail already supports the style tag in the head
You can use a subset of CSS selectors to apply styles. Gmail supports
class, element, and id selectors.
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>This text is blue.</p=>
<p>Jerry</p>
</div>
</body>
</html>
And media queries:
You can use standard CSS media queries to adjust the styling of an email to suit the user's current device. Gmail supports queries against the screen width, orientation, and resolution.
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
#media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
I am Sending email form php code and my email message body is HTML
$emailBody=<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#textDiv{
background-image: url("appreciation-'.$imageId.'.jpg");background-repeat: no-repeat;width:595px;height: 842px;color: white;float: center;
}
#p1{
padding-top: 420px;padding-left: 50px;width: 500px;font-size: large;
}
#p2{
padding-top: 30px;padding-left: 50px;width: 500px;font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id="textDiv" align="center" style="font-family: cursive; text-align:center;">
<p id="p1">Hi '.$actReciverName.', you have received Kudos from '.$senderName.' </p>
<p id="p2"><i><u>"'.$comment.'"</u></i></p>
</div>
</center>
</body>
</html>
once the email is sent background image is not displaying in outlook desktop app, but its working fine in Outlook Web mail, how to make it visible in desktop outlook application
Thanks in advance for support
HTML messages are rendered by Word in Outlook, and Word does not support background images. Try to create a table and set its background image.
The other answer isn't entirely correct, and those comments are misleading (at best). Background images do work using bulletproof backgrounds, which utilize VML to create your background.
I just coded an email using transparent gradients as background images inside a hybrid design.
The only client I haven't been able to get this to work 100% for is Dark Mode in version 16 of Outlook for Office 365, but it is still present, just that version of Outlook fills transparencies as white. Many eCommerce clients won't care at all about users who use Dark Mode in Outlook for 365 (v16), but I suggest you check with your Email/marketing team to find out before deciding.
i have this little but annoying issue displaying text content in the body of the mail. From a form page i send a mail HTML5 formatted.
This is what i sent via mail() php function:
<html>
<head>
<style type='text/css'>
body{
font-family:'Lucida Grande', Arial;
color:#333;
font-size:15px;
}
.div1{ display:inline; }
.row {margin-bottom:5px}
.background {background-color:#ffe508; padding:5px; font-size:18px}
</style>
</head>
<body>
<div>
<div class="row">
<div class="div1"><strong>Company:</strong></div><div class="div1">
$company</div></div>
</div>
</body>
</html>
This is what i display on OUTLOOK 2013:
Company:
company_name
It's wrong because i need to display this field on one line as i display fine on WLM
Company:
company_name
i also tried to use table instead of html5 but nothing changes.
Any idea? Thanks
If you don't need the divs, then simply remove them. They don't appear to be doing anything. The line could just be:
<strong>Company:</strong> $company
This means there's nothing which could interfere with this part of the layout.
CSS elements such as float, width and position of <div> doe not work in Outlook.
Div styles not working in Outlook Emails
#ADyson is correct. You don't even need them in your example.
In addition, keep in mind that margin does not work. Margin (capital M) does work. I understand that is not the correct use of Margin, but that's the way Outlook uses it. It's important to remember that email development is not Web development.
https://litmus.com/help/email-clients/outlookcom-margins/
Good luck.
I have 2 links.
For example - When a person clicks on the button "click here" - it should show www.google.com on the link bar, but it should redirect to "www.yahoo.com" and the person should not be able to see this "www.yahoo.com".
Yahoo and google are just used as an example.
How can I do that?
This was so ridiculously easy I guess this cannot be a hackers big secret.
Click HERE to be lured into my fake banking site
Although it does require javascript to be active on the browser
I would "recommend" using a full page iframe like this:
Upload a file to your server that contains this (in your example your server would be Yahoo!)
<!DOCTYPE html>
<html>
<head>
<style>
body, html, iframe {margin: 0; padding: 0; height: 100%; width: 100%; border: none}
</style>
</head>
<body>
<iframe src="https://google.com">
</body>
</html>
This should work alright for you and give the effect that the link is actually located on your own domain. Causing the APK download to look like it's on your machine.
The source domain can break free from the iFrame and therefore break your illusion. Many sites will do that, but it will still work properly for most of your needs.
I'm building HTML email templates for a CMS and am wondering if it is possible to define what the preheader of the email is.
The email preheader is the portion of the email that appears right after the email subject on your email provider. Very useful on mobile devices, the user catches a glimpse of what the email is about. It is usually the first text content of the email that defines it.
Currently, on my HTML email design I have a header template, body template and a footer template. And my preheader gets defined by the header template; the first text content that appears is in the header and is the website name/logo, creating redundancy in the email design.
Any ideas of how to get around this?
Sonu Yadav shared the perfect and clever solution to this problem (thanks). And for the sake of documentation, the solution presented on the link shared by Sonu Yadav is below.
Basically, you add the text your want your preheader to be before all content in the <body> tag and use CSS to hide it.
<style>
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
</head>
<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, & more: 75 text char limit</span>
...
If your logo is the first thing being rendered in your email, the cleanest way (without having to rely on styles) is to place the preheader text in the image alt tag, e.g.:
<img src="https://s3.amazonaws.com/my-assets/logo.png" alt="My preheader text." >