

Bulletproof HTML Email Components - gschier
https://www.sendwithus.com/resources/bulletproof-html-email-components

======
eli
I wrote up my bulletproof HTML Email Buttons too:
[http://www.industrydive.com/blog/how-to-make-html-email-
butt...](http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-
rock/) and, IMHO, my approach is better.

Two points about the linked article:

\- It uses images for the rounded corners, which are a pain to create and
aren't loaded by default in many/most email clients. I think it'd be better to
use CSS rounded corners in addition/instead.

\- Only the text in the middle of the button is clickable. The whole button
should be clickable. This can be really annoying on mobile/tablet where you
really want a big fat tap target.

(I've actually been meaning to update that year old blog post though -- I've
learned a lot since then!)

EDIT: Some of these other snippets look a little suspect. Using shorthand (3
digit) color codes can lead to problems in some clients. And I'm not sure that
padding is supported on a div in outlook.

~~~
ameister14
Border-radius doesn't work in Outlook 2007/10/13.

For me, that's a dealbreaker since a lot of traditional businesses use those
clients.

~~~
eli
Ah, but I have an answer for that!

Take a look, I updated my post: [http://www.industrydive.com/blog/how-to-make-
html-email-butt...](http://www.industrydive.com/blog/how-to-make-html-email-
buttons-that-rock/)

As terrible as Outlook's rendering engine is, it comes with a reliable way to
target code to a client. So you make an Outlook-only button that only Outlook
sees (and, bonus, are free to use Microsoft-only HTML extensions) and then a
separate HTML version that Outlook is instructed to ignore. The code's ugly
and annoying to work with, but it works!

~~~
yuhong
In fact, just did a more complete version that works in IE too:

    
    
      <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
      <head>
      <!--[if !mso]>
      <style>
      v\:* {behavior:url(#default#VML);}
      o\:* {behavior:url(#default#VML);}
      w\:* {behavior:url(#default#VML);}
      .shape {behavior:url(#default#VML);}
      </style>
      <![endif]-->
      </head>
      <body>
      <div>
      <!--[if vml]>
      <v:roundrect href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroked="f" fillcolor="#d62828">
        <w:anchorlock/>
      <v:textbox>
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
          Button Text Here!
        </center>
      </v:textbox>
    
      </v:roundrect>
      <![endif]-->
      <!--[if !vml]> <!-->
      <table cellspacing="0" cellpadding="0"> <tr> 
      <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
        <a href="http://www.EXAMPLE.com/" style="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
          Button Text Here!
        </a>
      </td> 
      </tr> </table> 
      <!-- <![endif]-->
      </div>

~~~
eli
Interesting! So this would be for rounded corners on IE8 or worse? (I think 9
supports border-radius, right?) Bummer that it requires adding styles to the
head.

------
pyrocat
"Bulletproof". They forgot to specify outline: none; border: none; on the img
and a tags, among other things. You're going to have a big ugly border around
all your social icons in some email clients. They also fail to specify which
email clients fall under "all the email clients that matter". I'm assuming
hotmail/outlook, gmail, yahoo? But what about native android and native iphone
clients? Android 2.2 or 4.0+? iPad? Surface? Email development is hell, and
I'm all for services that help with that, but not ones that brush off the
details with big promises.

~~~
gschier
I used Litmus to test email compatibility of the buttons. Just checked again
and you are correct. A border shows up in one of the older Android Gmail
clients, but it works in all the rest. Even Lotus Notes 8, Blackberry, and
Outlook 2000 :)

I'll update the example to fix. Thanks for pointing that out.

~~~
Moru
Spamfighting filtering taking notes for future updates to spamfilters... :-)

------
wlfsbrg
Very cool, love the layout generator! There's also
[http://buttons.cm/](http://buttons.cm/) for non-image buttons and
[http://backgrounds.cm/](http://backgrounds.cm/) for background images, both
are cross-client compatible (even with our friend Outlook!).

~~~
eli
One "bug" with the buttons these generate (which I've mentioned to @stigm) is
that they get all wonky if you forward a message with them in Outlook.

I'd suggest solving this by wrapping the inner <A ...></A> in condition
comments like: <![if !mso]><A ...></A><![endif]>

I've been meaning to write up a blog post on this...

------
protonfish
Ah, HTML email - table-based design is not dead! It looks a lot like how I
wrote web pages in 1998. I appreciate that my current job is developing
browser-only but it's good to remember these tricks in case I have to develop
spam again one day.

~~~
mrmch
Aw, not all email is spam. Be conscious of the customer; while developers
(you) prefer less/no email, many non technical people find it very valuable
and have a different tolerance.

~~~
stonogo
All HTML email is spam.

~~~
joshuacc
Spam is unsolicited email. I have 3,000 subscribers who voluntarily subscribed
to a (primarily) HTML email newsletter.

Why HTML instead of plain text? So that I can send articles with syntax
highlighted code snippets.

------
ameister14
Surprised nobody has posted this:
[http://www.campaignmonitor.com/css/](http://www.campaignmonitor.com/css/)

~~~
popopje
This, Litmus, and Mailchimp's responsive templates actually made the process
almost enjoyable at times, in a kind of tables throwback way.

[https://github.com/mailchimp/email-
blueprints](https://github.com/mailchimp/email-blueprints)

------
SippinLean
You should have just forked ink.css

[http://zurb.com/ink/docs.php](http://zurb.com/ink/docs.php)

~~~
eli
Last I looked the Ink buttons were looked a bit off in Outlook. I think they
(probably understandably) didn't want to hassle with Outlook conditional
comments and VML... but it's pretty tough to get perfect display in Outlook
without that stuff.

------
mrmch
We're stoked to be sharing some of the expertise we have around html email. Be
on the look out for even more email goodies very soon!

~~~
MichaelApproved
Is there a mailing list I can subscribe to? These kind of goodies are
something I'd like to stay updated on.

~~~
mrmch
Absolutely, you can sign up for our goodies newsletter here:
[https://www.sendwithus.com/resources/bulletproof-html-
email-...](https://www.sendwithus.com/resources/bulletproof-html-email-
components#contact)

------
DenisM
I think first thing you need a simple way to see how email looks across most
known email clients. After that you can start playing with layouts. Without
such safety net I would not feel comfortable with anything beyond <a> and <b>
tags.

~~~
bvanvugt
Should check out Litmus: [https://litmus.com/](https://litmus.com/)

They provide multi-client email rendering as a service. Very handy when
dealing with email HTML.

~~~
eli
Despite the terrible name, I've been pretty happy with competitor
[https://www.emailonacid.com/](https://www.emailonacid.com/) (it's also
cheaper). I like that they show you a preview of how the message looks without
images too -- that's how many people will first encounter it.

------
TheMakeA
Any plans for a WebFlow style editor for e-mail? That would be awesome.

~~~
gschier
Something like that definitely needs to exist. Possibly down the road a bit...
:D

~~~
eli
I've thought about this a bit. It would be hard -- harder than webflow. If
anybody is working on it, please drop me a line.

------
callesgg
Images in email is not bulletproof in any way...

------
kkl232
Very excited to try it out. Mailchimp is not that conducive to made-from-
scratch tepmlates

------
chenster
That's great, but not sure about paying $79/mth to use an email template.

~~~
bvanvugt
Don't worry, these components are free to use! Paid plans are only applicable
if you're sending email through us, and even then, there's a free tier to get
you started :)

------
jessicaraygun
The layout generator is so cool! Yoink.

~~~
mrmch
Let us know what else you might find useful ;]

