- 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.
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!
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.
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 :)
"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.
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.
Very cool, love the layout generator! There's also http://buttons.cm/ for non-image buttons and http://backgrounds.cm/ for background images, both are cross-client compatible (even with our friend Outlook!).
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.
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.
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.
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.
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.
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.
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.
Despite the terrible name, I've been pretty happy with competitor 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.
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 :)
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.