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>
Related
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'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
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." >
What I am trying to do is create a site that displays my rants in faux letter form.
I want the "paper size" (div size) to be fixed, and the text to continue on the second piece of paper (a second div) displayed just below the first paper like this..
I apologize, being a new user, I am not allowed to post the
screenshots I have created to help explain my situation, so am forced
to link until I have enough reputation points:
http://img16.imageshack.us/img16/5538/pagesuc.jpg
ONLY FOR THE SAKE OF SIMPLICITY: I've created a simple html/css page to demonstrate in the simplest form what I am trying to accomplish with the code:
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.container {
background: #FFFFFF;
width: 600px;
height: 400px;
margin: 0 auto;
}
#lbox {
background: #F00;
width: 300px;
height: 400px;
float: left;
}
#rbox {
background: #00F;
width: 300px;
height: 400px;
float: right;
}
.flowcontent {
padding: 10px 50px;
}
</style>
<div class="container">
<div id="lbox">
<div class="flowcontent">
<p>Lorem Ipsum...</p>
</div>
</div>
<div id="rbox">
<div class="flowcontent"> </div>
</div>
</div>
Screenshot:
I apologize, being a new user, I am not allowed to post the
screenshots I have created to help explain my situation, so am forced
to link until I have enough reputation points:
http://img689.imageshack.us/img689/7853/overflowc.jpg
In this case I would like the overflow from the red div to continue in the blue div on the right.
I realise this may not be possible with HTML/CSS alone, but was hoping maybe CSS3 might have some new tricks for this, as it has more advanced column handling.. If that's a no go, does anyone have a suggestion for a logical way to go about breaking this up using PHP or even JavaScript or JQuery?
I know PHP, but am still a JS/JQ newb so I have provided some (hopefully) very simple example code for anyone to plug in their own JS/PHP examples.
Anyway, thanks for your time.
I came up with a small JS Script that might help you out. It's far from perfect, but might give you a decent starting point. Essentially, it loops through your large text and looks for a scrollbar to appear. You may need to alter the calculations just a bit.
JSFiddle http://jsfiddle.net/Tt9sw/2/
JS
var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
var wordArray=text.split(' ');
$.fn.hasOverflow = function() {
var div= document.getElementById($(this).attr('id'));
return div.scrollHeight>div.clientHeight;
};
for(var x=0; x<wordArray.length; x++){
var word= wordArray[x];
currentCol.append(word+' ');
if (currentCol.hasOverflow()){
currentCol = currentCol.next('.col');
}
}
HTML
<div class="col" id="col1">Lorem Ipsum ....... LONG TEXT .......</div>
<div class="col" id="col2"></div>
<div class="col" id="col3"></div>
<div class="col" id="col4"></div>
<div class="col" id="col5"></div>
CSS
.col{
width:200px;
float:left;
height:200px;
border:1px solid #999;
overflow:auto;
font-family:tahoma;
font-size:9pt;
}
UPDATE
For this example, you must include the jQuery Libray in your scripts.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
PS - if you get to know jQuery, you will start to use it for everything. It greatly increases cross-browser compatibility and simplifies many common tasks.
What you want is CSS Regions module proposed by Adobe and currently supported by zero browsers. Adobe did release a very rough webkit-based browser for playing with the spec if you're really interested. But as others have said, right now you're SOL and will need to find another solution.
http://www.adobe.com/devnet/html5/articles/css3-regions.html
http://labs.adobe.com/technologies/cssregions/
http://dev.w3.org/csswg/css3-regions/
CSS3 has Multi-column Layout Module. However, I doubt it is widely supported to the moment.
Test it on your target browsers: http://www.quirksmode.org/css/multicolumn.html
You cannot do this with HTML and CSS only. CSS is targeted primarily at web browsers, and the layout model is that of a document on a vertically expanding surface. You can make boxes auto-height (which is the default), or fixed-height, but you cannot change the way content belongs to a parent box (which is what you would need for this to work).
A few options you could consider, if this is really important to you:
Use the paged-media features that are built into CSS to provide nice paging when rendered onto paged media (such as printouts); I'm talking about properties like page-break-after, page-break-before, etc. You won't get pages in a web browser, but at least you can control how it prints on physical paper
Write some incredible clever javascript that partitions your content into pages. There's a bit of a vicious circle here, because you won't know if your content fits until you try, so you may have to reflow several times in trial-and-error fashion. If your content has a special structure you can take advantage of, e.g. a poem form, where all line breaks are explicit, or if you use a fixed-width font, then a one-pass algorithm is possible, and you may even be able to do it server-side, using PHP, ASP.NET, or any other server-side scripting technology.
Use a different document format that gives you control over pages and absolute placement of elements within a page structure, e.g. PDF. (I wouldn't recommend using PDF for general web documents though; from a user's perspective, PDFs aren't convenient at all).
Use something like Flash or Silverlight to produce the desired layout. This, too, is something you should avoid unless there are other reasons why you'd be using it anyway; also, the formatting algorithm suffers from the same problems as a javascript implementation would, except that you have more control over the rendering part (fonts, kerning, etc.).
For most things on the web, however, I'd just let go of the idea and go with a more realizable design.
If you know how many characters one of your pages hold you can separate your string dynamically using javascript or php and then print the first part of the array in the first "paper sheet" and the second on the second.
You won't be able to do that with just HTML/CSS
Shapes by Adobe does exactly that, however, it has a very limited browser support.
IE: 11+
Chrome: 37+
FireFox: 32+