seanpowell / email-boilerplate Goto Github PK

The email boilerplate for sending out nicely formatted messages.

HTML 100.00%

email-boilerplate's Introduction

HOW TO USE:

Use these code examples as a guideline for formatting your HTML email to avoid some of the major styling pitfalls in HTML email design. You may want to create your own template based on these snippets or just pick and choose the ones that fix your specific rendering issue(s).

There are two main areas in the template:

The header (head) area of the document. You will find global styles, where indicated, to move inline.
The body section contains more specific fixes and guidance to use where needed in your design.

DO NOT COPY OVER COMMENTS AND INSTRUCTIONS WITH THE CODE to your message or risk spam box banishment :).

It is important to note that sometimes the styles in the header area should not be or don't need to be brought inline. Those instances will be marked accordingly in the comments.

A few things to note:

Not all of the styles in the header area should be brought inline. Those instances will be marked accordingly in the comments.
Remember to test accordingly with your own code and styling. Although this code will help you get through a number of HTML email issues, it is no substitute for proper testing.

Receive updates on the boilerplate here: http://tinyletter.com/ebp

License:

MIT License http://htmlemailboilerplate.com/license.html

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contributors

List Here >>

email-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

l4u mcdave er1c midu treyhunner seutje dominno pulni mchorfa johnantoni james595832 viphak intrigue jentanbernardus tomtev jalindr kaffeekraft ryjkov cyrke bsisolak fauverism cordoval digitalplaywright guniorobot alx shyam-s rajendhar bholtsclaw ronrr jeremymarc matenia macndesign jugglebird alexislesa ejgargalicano cruncher patrickkettner frankk00 pniederlag lickasha a973c zuriknet toddmooredigital osserpse dimitril miecoolo joeguja colaborativa repos-html5 dctrl-creativetechnology repos-html5-email benji87 kevinlapi antistatique reconbot boygagaoriginal bguided omarrr luca courtsansom ericatkins eranation stonecypher bronfman tcg justjess adrianherritt akshar100 kdaguenet leonderijke cyberwani kayluhb og-shawn-crigger emilchristensen clintberry jagwire16 alphac kale aliencube methodgrab luison fengyiyi lchamb endtwist tiagones soulreverie ninir little-polar-apps seaeast saas786 standardpixel richyrich38 shamsbd71 degatt2 jozefizso rufhausen miguelfrias azart bikram4252 timgiesenberg

email-boilerplate's Issues

Unremovable space after images

UPDATED : Sorry i just find the image_fix {display:block;} class that solve the problem...
Just a question: Why not applying it to all image tag by default ?

I encountered that issue :
http://stackoverflow.com/questions/8479090/remove-spacing-between-table-cells-and-rows

And this solution works for me:
http://stackoverflow.com/a/8480459/1359623

So i add display:block; for the img style:
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display: block; }

Hope this help someone...

Use Email Schemas (Microdata and\or JSON-Ld)

Schemas in emails can be used to represent various types of entities and actions. Email clients that understand schemas, such as Gmail, can render entities and actions defined in the messages with a consistent user interface. In the case of Gmail, this means that the emails can display quick action buttons that let users take actions directly from their inboxes...

Shamelessly pulled from here

Would be nice to have web-browseable examples,

e.g. via the wiki page or what have you.

Email is not centred in outlook 2007, 2010, 2013

Issue: Email is not centred in outlook 2007, 2010, 2013
Fix: I hardcoded (width="100%") to the body and main table, I'm not sure if its needed on both or adding it to only one of them will do the trick.
so new new:

<body width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">

!important

I have found that !important is getting ignored by outlook 2007 when applying color to h1-6 tags. The apparent workaround is to just declare the color twice, which should work fine with hotmail.

color:black; color:black !important;

I haven't seen this mentioned anywhere, but I haven't looked that hard either, so feel free to ignore this if I'm overlooking something.

img {height:auto;} made inline = problems in apple mail 4.5

I noted that making the img {height:auto;} inline created major rendering problems in apple mail 4.5.

Disable automatic detection of phone numbers

Sometimes in your email newsletter design, you may not want the Mail app on iOS devices to turn your telephone number into a blue hyperlink.

The following meta tag can disable automatic detection of possible phone numbers:
<meta name="format-detection" content="telephone=no">

Perhaps useful for others to include as a comment to let users choose if they want to keep it in there?

Sadly there is no way to disable automatic detection of addresses yet.

"Bring inline"

Hi,

I just started using your email template and it gives some great advises (to me as a novice).
There is however a notion to "bring inline" certain styles, which confuses me.

Does this mean that, for example, you have to copy the standard styles for images to each instance of an image in the email?
And for each h1, h2, h3... table, and so on?
Or do I have to move the <style> block to be inside the ?

Either way, maybe the action to "bring inline" styles could be explained in more detail in the template?
It could be due to the fact that I'm a non-native English speaker as well.

Cheers,

Jelmer

mobile-link documentation inconsistency

Reading through the documentation for the update V0.5 boilerplate I noticed that the documentation says to use the "mobile-link" class but the code uses "mobile_link". If the hyphen vs underscore does not matter that should be documented.

Thanks for the great work!

Good

broken image link to github from website : http://htmlemailboilerplate.com/

Broken link from http://htmlemailboilerplate.com/ to this github project. Makes finding the github a bit tricky.

Code Quality

Please decide once and forever on the coding style, the file is set to use tabs for indentation and uses spaces, the indentation is broken in some places.

Thanks for the great work.

Change license

I noticed in the e-mail template, that some parts of the code are based on The MailChimp Reset.

Unfortunately, the Mailchimp license is CC Share-alike, which means that the derived material based upon it should be licensed under the same license or in a equivalent one. For code, the equivalent type ("copy-left" type) would be the GPL.
So, this boilerplate can't be MIT.

display:block

Not really an issue as such, but I tend to add display: block to the img declaration in the css:
img{height:auto; line-height:100%; outline:none; text-decoration:none; display: block;}

This saves having to add it to each img individually.

Outlook.com paragraph margins

Outlook.com forces all paragraph tags to have margin: 0 0 1.35em 0; and does not (as far as I know) allow this to be overridden. This causes a bit of a shock after seeing the boilerplate's p { margin: 1em 0; } work so well everywhere else.

line-height: 100% issue with multiline headings in gmail

Hi,

The line-height: 100% CSS isn't leaving enough space between lines in gmail for h2 (and possibly other styles), meaning that the two lines overlap when the heading wraps. Using line-height: normal resolves this, but I don't know how that affects the look on Hotmail, which according to the comments this was designed to fix.

version template

this is the last version that existed in htmlemailboilerplate site before 404?
3 years ago ?

2 image_fix questions

regarding .image_fix {display:block;}

if it's fixing something out-of-the-ordinary that only some clients do, shouldn't it be the default, like the other normalization style?
"You may not always want all of your images to be block elements. Apply the "image_fix" class to any image you need to fix." — so isn't the fix backwards? If the problem is that the clients force a space, shouldn't the fix be to make it inline?

xmlns shouldn't be used?

If you run boilerplate code through HTML validator, it gets tripped up on this line:

<HTML xmlns="http://www.w3.org/1999/xhtml">

Exact error thrown is "there is no attribute "xmlns"" with description of:

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

.ReadMsgBody and .ExternalClass

I've noticed mailchimp adds

<style type="text/css">
  .ReadMsgBody{width:100%;}
  .ExternalClass{width:100%;}
</style>

at the top of the email(not inline). After a bit of googling found this http://learnpublicaster.groupsite.com/post/hotmail-update-changes-to-table-rendering-might-affect-your-template.

May be it should be included to boilerplate

Regards,
Dmitry

Shouldn't the mobile link example be

    <span class="mobile_link">
        <a href="tel:123-456-7890">123-456-7890</a>
    </span>

Gmail spam

This boiler plate seems to trigger the gmail spam in google apps. I have tried it without this boilerplate with exact same content and passed.

seanpowell / email-boilerplate Goto Github PK

email-boilerplate's Introduction

HOW TO USE:

A few things to note:

Subscribe

License:

Contributors

email-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

email-boilerplate's Issues

Recommend Projects

Recommend Topics

Recommend Org