m-j-robbins / good-email-code Goto Github PK

View Code? Open in Web Editor NEW

90.0 90.0 8.0 6.21 MB

Email code resources website

Home Page: http://www.goodemailcode.com

License: MIT License

CSS 4.21% HTML 95.77% Ruby 0.02%

good-email-code's People

Contributors

Stargazers

Watchers

Forkers

vincivince nadarajahk malvoz jkupczak pushpendraa3 otunsam47 devdevdany cossssmin

good-email-code's Issues

Create sample navigation and pages

Create documentation on best practices for email but please add a left navigation with samples that render your examples.

A couple of typos

I'm enjoying your site very much and just politely letting you know of a couple of typos on the Email Templates page:

"if the files is saves" - should be "if the file is saved"
"was renames to" - should be "was renamed to"
"stand along content" - should be " stand alone content", or, better yet, "stand-alone content"

`<hr>` alignment

<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

Supported email clients information

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

minor typo

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!

How to use image as h1

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?

Picture with prefers-color-scheme: dark and Outlook

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>

Container > Wrong order of tags

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>

Add manual dark/light theme toggle

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.

Fallback for GANGA, Android Native, et al.

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>

Remove <o:AllowPNG/> ?

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:

MSO conditions are also impacting Google Pixel and mobile devices using the GMAIL app.

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:

`<!-->

                <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>

`

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.

Email Template / Shorthand meta format-detection rules

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?

LInk Buttons - Outlook for Mac

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)

MSO- Styles in Email???

In https://www.goodemailcode.com/email-enhancements/mso-styles.html#:~:text=mso%2Dline%2Dheight%2Drule,least%20as%20the%20default%20value.

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.

Columns side by side not horizontally aligned in outlook

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]-->

Page:
https://www.goodemailcode.com/email-code/text