m-j-robbins / good-email-code Goto Github PK
View Code? Open in Web Editor NEWEmail code resources website
Home Page: http://www.goodemailcode.com
License: MIT License
Email code resources website
Home Page: http://www.goodemailcode.com
License: MIT License
<hr>
s are left-aligned by default (source).
In the Align section, you mention they're centered by default. I just checked and it seems only Outlook (Windows) centers <hr>
by default, the rest align it to the left as in the spec.
Also, small typo:
Because we’ve removed the boarder
In your Email Template code, I notice you have the <o:AllowPNG/>
declaration. Have you ever noticed it making any difference at rendering?
I tried to research it a few years ago. And Microsoft's official documentation says:
Specifies whether PNG (Portable Network Graphics) is used as an image format on a Web page.
If<o:AllowPNG/>
is specified, PNG format is used.
As opposed to any other file format, images saved in PNG might improve in quality and their file size might reduce (decreasing download time) when targeted browsers support the PNG format.
My understanding is that this makes a difference when saving a Word document as HTML. But not for rendering HTML in Word/Outlook. I've removed this from all my templates a few years ago, I use PNG all the times, and never had a problem with it.
See also:
Hello
I have been trying the below code to generate three columns side by side. but as the img shows outlook is not aligned them horizontally. Same issue with just two columns and the code snippet from the site.
outlook version: 16.0.5032.1000:
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="all:unset;opacity:0;">
<tr>
<![endif]-->
<!--[if false]></td></tr></table><![endif]-->
<div style="display:table;width:100%;border: 1px solid #000000;margin-top:50px;text-align:center;">
<!--[if true]>
<td width="10%">
<![endif]-->
<!--[if !true]><!-->
<div style="display:table-cell;width:10%">
<!--<![endif]-->
Column 1 content
<!--[if true]>
</td>
<![endif]-->
<!--[if !true]><!-->
</div>
<!--<![endif]--><!--[if true]>
<td width="10%">
<![endif]-->
<!--[if !true]><!-->
<div style="display:table-cell;width:10%">
<!--<![endif]-->
Column 2 content
<!--[if true]>
</td>
<![endif]-->
<!--[if !true]><!-->
</div>
<!--<![endif]--><!--[if true]>
<td width="10%">
<![endif]-->
<!--[if !true]><!-->
<div style="display:table-cell;width:10%">
<!--<![endif]-->
Column 3 content
<!--[if true]>
</td>
<![endif]-->
<!--[if !true]><!-->
</div>
<!--<![endif]-->
</div>
<!--[if true]>
</tr>
</table>
<![endif]-->
All your examples are using inline CSS. I tried defining the styles in a CSS block in the <head>
. But that does now seem to work.
Could you please confirm one way or another?
Thank you.
Create documentation on best practices for email but please add a left navigation with samples that render your examples.
Hi!
There is a small typo in the footer link that lead me to this page:
"If you find something that isn't working, please sumit issues via github"
I guess it should be "submit":
"If you find something that isn't working, please submit issues via github. "
(It just stands out on the page).
Thanks for building the site I have already found many invaluable tips!
Just above the section titled "Offset" there is a minor typo. I figured this would be the best place to point it out, let me know if there is a better spot for that.
Typo:
"Be carful when underlining text as this is often a visual queue for a hyperlink and may lead confuse the reader."
I'm enjoying your site very much and just politely letting you know of a couple of typos on the Email Templates page:
Hi !
I found a small issue in the examples for containers, section "Adding a background colour to the outer body"
<div style="background:#000000">
<!--[if true]>
<table role="presentation" width="100%" align="center" style="background:#000000"><tr><td></td><td style="width:37.5em;background:#ffffff">
<![endif]-->
<div style="max-width:37.5em; margin:0 auto;background:#ffffff">
<!-- email content in here -->
</div>
<!--[if true]>
</td></tr><td></td></table> <-- Here
<![endif]-->
</div>
The table row closing tag is misplaced.
</td></tr><td></td></table>
should be </td><td></td></tr></table>
Great resource.
I couldn't see any explanation for these attributes for the html tag: xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
. Why is it a good practice to include them?
Hey Mark,
I like the concept of a email html snippets repo, but you should specify which clients the snippets are supposed to support or add a section that specifies which clients do not supoort a certain snippet. Perhaps it is possible just to cross-reference https://www.caniemail.com/ or a similar site?
Just a suggestion.
Franz
On the page for email template, would it make sense to shorthand for format-detection
?
Eg: <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
Each property name is descriptive and the meta tag for viewport
follows this pattern.
Would using shorthand here make the code more or less legible? What's your take?
Feature Request:
A lot of emails use a graphical banner which also serves as the email's title. Can you include the best way to use an h1 where the image is the email's title?
Hello @M-J-Robbins !
Would you be interested by a PR that adds an email report template that embeds static image-charts?
When using the MSO conditions to accommodate Outlook and hide mobile elements, the condition works as expected in Outlook, but it has the side effect of also hiding the table cell in Google Pixel devices or devices using the Gmail app. Are these devices also using the Outlook engine and, if so, how to specify Outlook only?
For example:
`<!--[if !mso]--><!-->
<td align="center" valign="top" style="display: none; mso-hide:all;"><a href="#" target="_blank">
<img class="logo" src="images/mobile.png" width="375" height="auto" alt="" style="display: inline-block; vertical-align: top; border: 0" />
</a>
</td>
<!-- <![endif]-->`
This example hides it in both Outlook and mobile devices using the Gmail app and on Google Pixel devices. iPads and iPhones don't appear to be affected.
This is not a bug per se but more like a feature request:
I would like you to include some webpack (or gulp) task which takes regular HTML/CSS/Sass and builds into e-mail friendly form which is suitable for most clients (like Gmail web/desktop, Android and iOS)
Hi,
It seems Outlooks top banner for "you don't often get email from xxx" (don't know what it's called, sorry) interferes with the prefers-color-scheme: dark in the code. When sending a test to my work account (Microsoft Exchange) and I open the email on iOS, I receive the banner from Outlook. The image doesn't react to dark mode and it shows the light mode version instead, but if I test with any other account it works fine.
<picture>
<source srcset="dark-img.png" media="(prefers-color-scheme: dark)">
<img src="light-img.png" alt="Alt Text!" style="">
</picture>
Add a dark/light them toggle to override system settings if a user wants to.
Should have 3 options, light, dark and default system setting.
My initial thought is to store this as a URL parameter to keep things simple
Could also look at adding a reduced transparency, reduced motions, increased contrast, font-size etc.
I just came across this - very nice! But as noted, it does not fare well for Gmail IMAP, Telstra Bigpond, and other clients that don't support embedded CSS like Android native.
Therefore, I found that simply adding a background colour to the text (via a table) works wonders. The text is clearly visible in all environments in that case. It just displays above the image, that's all.
I've also just centered the text--all in all a nice polished (and complete) example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head> <!-- START HEAD v2-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- /* EMAIL CLIENT SPECIFIC FIXES */ -->
<style type="text/css">
@-ms-viewport {
width: device-width;
}
#outlook a {
padding:0;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
</style>
<!-- /* TEMPLATE SPECIFIC STYLES */ -->
<style type="text/css">
.faux-absolute{
max-height:0;
position:relative;
opacity:0.999;
left:0;
margin-left:auto;
margin-right:auto;
width:80%;
}
.faux-position{
margin-top:30%;
display:inline-block;
margin-left:auto;
margin-right:auto;
width:100%;
}
body[data-outlook-cycle] .image{
width:300px;
}
</style>
</head>
<body class="body" style="margin:0;padding:0;width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<table role="presentation" align="center" bgcolor="#E4E4E4" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top">
<div class="faux-absolute">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="mso-width-percent: 400; position:absolute; top:160px; left:40px;">
<v:textbox inset="0,0,0,0">
<![endif]-->
<div class="faux-position">
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:20px;">
<p style="color:#ffffff;font-size:28px;text-align:center;margin:0;font-family:Arial,sans-serif;">Faux Absolute Position content</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</div>
<img src="https://placekitten.com/600/400" alt="" class="image" style="width:100%;margin:0;display:block;">
</td>
</tr>
</table>
</body>
</html>
Hi Mark,
i have a little Problem. I tried your code for LInk Buttons and everything works fine on Outlook for Windows.
But as soon as the recipient got outlook for Mac, it gets bad.
Here two screenshots how it should look and how it looks on Mac. Do you have a suggestion for something like that?
and mac is rendering it like this:
If you can notice also the double underlining although i disabled decoration for links.
Can you help me in any way?
Best regards,
Majed
Originally posted by @Majed610 in #8 (comment)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.