seanpowell / email-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

3.8K 3.8K 677.0 54 KB

The email boilerplate for sending out nicely formatted messages.

Home Page: htmlemailboilerplate.com

HTML 100.00%

email-boilerplate's People

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

Would be nice to have web-browseable examples,

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

.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

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.

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!

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.

Good

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.

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.

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

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.

"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

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.

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.

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

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.

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

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

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.

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?

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

version template

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

Shouldn't the mobile link example be

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

seanpowell / email-boilerplate Goto Github PK

email-boilerplate's People

Stargazers

Watchers

Forkers

email-boilerplate's Issues

Recommend Projects

Recommend Topics

Recommend Org