I am coding a responsive email template using media queries and I have a specific issue.
I am using MailChimps guidelines and therefore I got into using their CSS Inliner , but I find an issue where the inlined css somehow overrides and breaks my previously working CSS above in the styles.
So for example here is what I am talking about, here is my not inlined code:
<!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></title>
<style>
#desktop {display: block;}
#mobi {display: none !important;}
#media only screen and (max-width: 720px) {
#desktop {display: none !important}
#mobi {display: block !important}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top" id="desktop">
This is where my content goes.
</td>
<td align="center" valign="top" id="mobi">
This is where my content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
This is just for reference, this is not my actual code, but I hope You get the point.
So my problem with this is, after I use the CSS Inliner from MailChimp, I get this:
<!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></title>
<style>
#desktop {display: block;}
#mobi {display: none !important;}
#media only screen and (max-width: 720px) {
#desktop {display: none !important}
#mobi {display: block !important}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top" id="desktop" style="display: block;">
This is where my content goes.
</td>
<td align="center" valign="top" id="mobi" style="display: none !important;">
This is where my content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
And after I send test emails, in the mail clients, most importantly Gmail, everything is wrong, either both of the objects show or the #mobi one is hidden on mobile and vice versa.The !important statement in my upper css in the style section is due to the fact that the #mobi object will always be visible in Gmail unless it has an !important for the display:none property.
I tried deleting the inlined important statements but nothing worked so far. What is the problem here and how can I bypass it?
According to the rules of CSS Specificity:
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity.
You could use !important in your stylesheet to increase the specificity of the relevant styles, forcing them to override the inline styles. However, it should be noted that GMail, among other clients, does not support media queries nor the display property.
Related
I've got the following html and css to be used as a template for generating e-mail messages.
But when it comes to receiving the e-mail on my postal programme I have a few pixels of white margins every side.
Is it possible to remove it while using divs or is there another way to avoid these annoying white spaces?
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Lack of title</title>
<link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body, html {
margin: 0!important;
padding: 0!important;
background-color: gray;
}
#nav {
height: 60px;
width: 100%;
background-color: #0078d7;
}
#content {
width: 1160px;
height: 800px;
background-color: #6f6767;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="nav">
{title}
</div>
<div id="content">
{content}
</div>
</body>
Different e-mail clients render HTML e-mails differently. But there are a few basic practices you should adhere to (see references below).
In looking at your code, there's a good chance your problem stems from the use of embedded styles. Here's what MailChimp has to say about that:
Because browser-based email applications, such as Gmail, strip out
<head> and <body> tags by default, always use inline CSS over embedded
CSS.
So, the padding: 0 and margin: 0 in your head section are possibly being ignored or overridden.
Designing HTML e-mails is not like designing HTML websites. There's a huge technology gap between e-mail clients and web browsers. It's as if browsers keep evolving, but e-mail clients are stuck in 1998.
In the world of HTML e-mail, embedded and external styles are bad, inline styles are good, javascript is bad, tables for layout are good. In this world, old-school coding methods are alive and well.
More information:
CSS in HTML Email
Best practices for styling HTML emails
Best Practices & Considerations when writing HTML Emails
Because of the way e-mail clients render HTML - and many of them render the same HTML differently, you're better off building your e-mail with tables. Tables seem to be recognised across all clients.
Also, always use inline styles as internal and external stylesheets can cause problems. This code seems to get rid of whitespace accross most clients:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Lack of title</title>
<link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
</style>
</head>
<body>
<div>
<table width="100%" bgcolor="#333333" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table width="100%" height="60" bgcolor="#0078d7" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="60">
{nav}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="1160" height="800" bgcolor="#6f6767" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="1160" height="800">
{content}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
I want to send the following page as an html email. It displays fine on the web but in the email the red background doesnt display for the body or the button at the bottom of the page. What am I missing here?
HTML email has been giving me so much trouble!
Thanks for any help i can get!
http://www.americanvineyardmagazine.com/emails/AVvid14email.html
<!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>American Vineyard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<style type="text/css">
th td tr {
text-align: center;
}
</style>
<body style="padding: 0;background-color:#800000">
<table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
<th style="color:#800000; width:650px;"><h1>New Video On American Vineyard Website!</h1></th>
<tr>
<td style="text-align:center;">
<a href="http://www.americanvineyardmagazine.com/index.html#modal-video14">
<img src="http://americanvineyardmagazine.com/images/video.play.png" alt="http://americanvineyardmagazine.com/images/featvideos/featvideo14.jpg" width="300px" style="background:URL(http://www.americanvineyardmagazine.com/images/featvideos/featvideo14.jpg) center center no-repeat;">
</a>
</td>
</tr>
<tr>
<td style="text-align:center; color:#800000; ">
<h2><em>El Niño Amplifies Risk for Vine Canker Disease </em></h2>
</td>
</tr>
<tr>
<td style="text-align:center; color:#800000; ">
<h5>With El Niño coming strong for the next few months, grape growers are grateful for the drought relief; however, pruning is going to be a difficult task this winter with increased disease pressure. Doug Gubler, UC Davis Plant Pathologist addressed this at the SJV Grape Symposium.</h5>
</td>
</tr>
<tr>
<td style="text-align:center;padding-bottom:35px;">
Watch Now!
</td>
</tr>
</table>
</body>
</html>
The problem is in your table's background path.
You are using a relative path here..
<table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
It will display correctly on the web because browser will be able to resolve that.
But when you use it in an email, Email client won't be able to resolve that.
Use absolute path here instead.
<table align="center" style="background-image:url(http://www.americanvineyardmagazine.com/images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
Use parent class under body tag .wrapper {background-color: #800000;}
I am trying to load two different images in an email based on the screen size the viewer is using.
I have a WordPress ninja form thank you email that I want sent out with an image displayed in the body. If the screen size is smaller than 501px I want image displayed if it is smaller than 500px I want a different image displayed. The difference being one is less text and easier to read on mobile.
I have tried media queries but they do not work for the email formatting. I used them on a test html page to make sure my code was working and it was fine so maybe media queries don't work for email?
Is there another way to change the images based on the size of the screen the email is viewed on?
Here is my code:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='ourStory'>
<img src='http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-mobile-copy.jpg' />
</div>
</body>
</html>
CSS
#media all and (min-width: 501px) {
div.ourStory{
content:url('http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-copy.jpg');
}
}
Responsive Email cannot be achieved properly or even at all with <div> you will need to use <table>
https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/
Services such as mailchimp know about these and have their own built in tool to design email.
http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/
I suggest you use a library such as this one to accomplish a better responsive design for your email.
http://zurb.com/ink/docs.php
Example code:
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="eight columns">
<tr>
<td>
Eight Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns">
<tr>
<td>
Four Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Also many email provider and client doesnt support linked css so you have to rely on inliner tools which will apply style="" attributes to your HTML elements.
As the links say, div can and should be used in email, but the complex layouts require Tables. I personally think a combination is the best course, which I will use in my sample below.
The major issue that jumps out at me is that you have a link tag to the stylesheet (almost universally no support on email clients) and that you use more complex CSS (content:) on the media query (also not well supported).
I created some code using table and div while also updated some css, etc to your above code - including Outlook conditional statements. You would likely need to test this across clients, but this is the best and pretty much only way to do an image swap in email. You can also change the background-image in the media queries if you want to switch it again at a lower screen size.
See below:
.ourStory { width:640px;}
#media only screen and (max-width: 640px) {
.ourStory { width:100% !important;}
.image1 {display:none !important; visibility:hidden !important; overflow:hidden; width:0px !important; height:0 !important; line-height:0 !important;}
.bgimage {width:100% !important; height:100px !important;}
}
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<title></title>
<style>
<!-- Inline Style Sheet Here -->
</style>
</head>
<body>
<div class='ourStory' style="width:100%; max-width:640px;">
<!--[if (gte mso 9)|(IE)]>
<table width="640" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="ourStory" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:640px;">
<tr>
<td class="bgimage" background="http://placehold.it/639x100" bgcolor="#7bceeb" width="100%" height="150" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:639px; height:150px;">
<v:fill type="tile" src="http://placehold.it/639x100" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div><img class="image1" width="100%" src='http://placehold.it/640x150' style="border:none; display:block;" />
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</div>
</body>
</html>
Well i have something strange.
2 tables should diretly follow each other
there is nothing in between so the new table should directly start.
However some pages show an empty line between them while others do not.
Both pages have the same html header, same doc style, charset..
And no css styles do aply to these tables.
each table starts as
<table width="90%" border="0" align="center" cellpadding="10" celspacing="0">
Here is a page with the conflict :
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sapec ontwikkeld vision toepassing in industrie</title>
<?php // writing the page menu on top
include './BaseTemplate.php';
WriteHeader();
?>
</head>
<body>
<div id="background"><img src="./assets/image/background2.jpg" width="640" height="400" class="stretch" /></div>
<table width="90%" border="0" align="center" cellpadding="10" cellspacing="0" >
<?php
WriteMenu();
?>
</table>
<table width="90%" border="0" align="center" cellpadding="10" cellspacing="0" >
<tr><td bgcolor="#CCCCCC" colspan="2" valign="top" >
And here is a page that doesnt show the conflict, note that for both these pages the php code outputs exactly the same so that isnt realy relevant.
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact </title>
<?php // writing the page menu on top
include './BaseTemplate.php';
WriteHeader();
?>
</head>
<body>
<div id="background"><img src="./assets/image/background2.jpg" width="640" height="400" class="stretch" /></div>
<table width="90%" border="0" align="center" cellpadding="10" cellspacing="0" >
<?php
WriteMenu();
?>
</table>
<table width="90%" border="0" align="center" cellpadding="10" cellspacing="0" >
<tr>
<td bgcolor="#CCCCCC" width="45%" valign="bottom" >
Change your cellpadding to
<table width="90%" border="0" align="center" cellpadding="0" celspacing="0">
Check its not some inherited margin/padding
table{
margin: 0px;
padding: 0px;
}
eventualy it turned out that because of a php part contained some wrong formating, not everthing was included inside the parts some where before it, this caused malformatted tables.
I just mark this as answer although the code wasnt in this part, but its solved now, so people wont need to post to this question or think about it anymore.
I wrote a simple html email template that seems to render fine in all email clients EXCEPT outlook 2013. I've simplified the code to illustrate the problem below:
<!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>K</title>
<style type="text/css">
table {border-collapse: collapse;}
</style>
</head>
<body style="margin:0; background-color:#70b9b9; -webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="background:black;padding:0;"><img src="http://jl.evermight.net/outlook2013/pic.jpg" alt="" border="0" style="display:block; border:none;" /></td>
</tr>
</tbody></table>
</body>
</html>
The problem with this code is that there's a black gap between the green and the image, which I can show here:
So how i get rid of this black gap? Again, this is only a problem in outlook2013
You need to zero out the padding and margin in the image. You should probably set at least the width of the image too, even if it is width="100%".
Here is my basic image setup:
<td>
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
Also, Outlook has issues with cells shorter than 19px, so make sure your image is tall enough.
Other unrelated notes:
Get rid of <tbody> it does nothing in html email
change background:black; to background-color:#000000;, html email needs the 6-digit hex color