7 ms·

Bulletproof HTML Email Components

118 points by gschier 13y ago

protonfish 13y ago
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 13y ago
  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.
  - joshuacc 13y ago
    And judging by the number of subscribers to Peter Cooper's newsletter empire, and my own humble offerings, many technical people have a different tolerance, too.
  - protonfish 13y ago
    That's true, but when you find yourself being the person responsible for implementing and sending bulk email, it helps to keep a sense of humor about it.
    - mrmch 13y ago
      Absolutely :)
  - stonogo 13y ago
    All HTML email is spam.
    - eli 13y ago
      I'd encourage you to A/B test a text-only newsletter versus an HTML one. Or even just ask people which they prefer. I think you're in the minority.
    - joshuacc 13y ago
      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.
- gschier 13y ago
  I used to love splicing corners and shadows into massive nested table layouts. I didn't realize that skill would someday be useful to me again :D
mrmch 13y ago
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 13y ago
  Is there a mailing list I can subscribe to? These kind of goodies are something I'd like to stay updated on.
  - mrmch 13y ago
    Absolutely, you can sign up for our goodies newsletter here: https://www.sendwithus.com/resources/bulletproof-html-email-components#contact https://www.sendwithus.com/resources/bulletproof-html-email-...
jessicaraygun 13y ago
The layout generator is so cool! Yoink.
- mrmch 13y ago
  Let us know what else you might find useful ;]
TheMakeA 13y ago
Any plans for a WebFlow style editor for e-mail? That would be awesome.
- gschier 13y ago
  Something like that definitely needs to exist. Possibly down the road a bit... :D
  - eli 13y ago
    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.
SippinLean 13y ago
You should have just forked ink.css http://zurb.com/ink/docs.php http://zurb.com/ink/docs.php
- gschier 13y ago
  Definitely a great suggestion. We're planning on creating some resources for responsive emails as well so something like Ink would be a good starting point.
- eli 13y ago
  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.
wlfsbrg 13y ago
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!).
- gschier 13y ago
  Ya, I stumbled across that after starting on this. Great tool by Campaign Monitor.
- eli 13y ago
  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...
DenisM 13y ago
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 13y ago
  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 13y ago
    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.
pyrocat 13y ago
"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 13y ago
  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 13y ago
    Spamfighting filtering taking notes for future updates to spamfilters... :-)
eli 13y ago
I wrote up my bulletproof HTML Email Buttons too: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/ http://www.industrydive.com/blog/how-to-make-html-email-butt... 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.
- gschier 13y ago
  Awesome, thanks for the comments. I actually saw your blog post a few days ago. I wasn't aware that 3 digit hex codes had less support. I had tested everything in Litmus and it seemed fine, but I've updated the examples anyway to use 6 digit color codes just to be sure. I agree with your point on image buttons as well. We're planning on adding many more snippets in the future so stay tuned :)
  - eli 13y ago
    Cool, anything that makes HTML email design easier gets a thumbs up from me.
    - gschier 13y ago
      Hey Eli. It sounds like you're really knowledgeable in this space. I'd love to chat more. You can reach me at greg@sendwithus.com.
- ameister14 13y ago
  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.
kkl232 13y ago
Very excited to try it out. Mailchimp is not that conducive to made-from-scratch tepmlates
pg_is_a_butt 13y ago
<table border="you" cellpadding="use" cellspacing="too"> <tr> <td> many tables </td> </tr> </table>
ameister14 13y ago
Surprised nobody has posted this: http://www.campaignmonitor.com/css/ http://www.campaignmonitor.com/css/
- popopje 13y ago
  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
chenster 13y ago
That's great, but not sure about paying $79/mth to use an email template.
- bvanvugt 13y ago
  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 :)
callesgg 13y ago
Images in email is not bulletproof in any way...

118 points by gschier 13y ago

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 13y ago
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.
- joshuacc 13y ago
  And judging by the number of subscribers to Peter Cooper's newsletter empire, and my own humble offerings, many technical people have a different tolerance, too.
- protonfish 13y ago
  That's true, but when you find yourself being the person responsible for implementing and sending bulk email, it helps to keep a sense of humor about it.
  - mrmch 13y ago
    Absolutely :)
- stonogo 13y ago
  All HTML email is spam.
  - eli 13y ago
    I'd encourage you to A/B test a text-only newsletter versus an HTML one. Or even just ask people which they prefer. I think you're in the minority.
  - joshuacc 13y ago
    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.
gschier 13y ago
I used to love splicing corners and shadows into massive nested table layouts. I didn't realize that skill would someday be useful to me again :D

mrmch 13y ago

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 13y ago
Is there a mailing list I can subscribe to? These kind of goodies are something I'd like to stay updated on.
- mrmch 13y ago
  Absolutely, you can sign up for our goodies newsletter here: https://www.sendwithus.com/resources/bulletproof-html-email-components#contact https://www.sendwithus.com/resources/bulletproof-html-email-...

jessicaraygun 13y ago

The layout generator is so cool! Yoink.

mrmch 13y ago
Let us know what else you might find useful ;]

TheMakeA 13y ago

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

gschier 13y ago
Something like that definitely needs to exist. Possibly down the road a bit... :D
- eli 13y ago
  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.

SippinLean 13y ago

You should have just forked ink.css http://zurb.com/ink/docs.php http://zurb.com/ink/docs.php

gschier 13y ago
Definitely a great suggestion. We're planning on creating some resources for responsive emails as well so something like Ink would be a good starting point.
eli 13y ago
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.

wlfsbrg 13y ago

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

gschier 13y ago
Ya, I stumbled across that after starting on this. Great tool by Campaign Monitor.
eli 13y ago
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...

DenisM 13y ago

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 13y ago
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 13y ago
  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.

pyrocat 13y ago

"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 13y ago
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 13y ago
  Spamfighting filtering taking notes for future updates to spamfilters... :-)

eli 13y ago

I wrote up my bulletproof HTML Email Buttons too: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/ http://www.industrydive.com/blog/how-to-make-html-email-butt... 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.

gschier 13y ago
Awesome, thanks for the comments. I actually saw your blog post a few days ago. I wasn't aware that 3 digit hex codes had less support. I had tested everything in Litmus and it seemed fine, but I've updated the examples anyway to use 6 digit color codes just to be sure. I agree with your point on image buttons as well. We're planning on adding many more snippets in the future so stay tuned :)
- eli 13y ago
  Cool, anything that makes HTML email design easier gets a thumbs up from me.
  - gschier 13y ago
    Hey Eli. It sounds like you're really knowledgeable in this space. I'd love to chat more. You can reach me at greg@sendwithus.com.
ameister14 13y ago
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.

kkl232 13y ago

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

pg_is_a_butt 13y ago

<table border="you" cellpadding="use" cellspacing="too"> <tr> <td> many tables </td> </tr> </table>

ameister14 13y ago

Surprised nobody has posted this: http://www.campaignmonitor.com/css/ http://www.campaignmonitor.com/css/

popopje 13y ago
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

chenster 13y ago

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

bvanvugt 13y ago
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 :)

callesgg 13y ago

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