4 ms·
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/ho
by 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 agoAwesome, 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 :)
- ameister14 13y agoBorder-radius doesn't work in Outlook 2007/10/13. For me, that's a dealbreaker since a lot of traditional businesses use those clients.
- nathancahill 13y agoYeah, it's really going to suck for those traditional businessmen when they can't see the rounded corners on your buttons.
- eli 13y agoAh, but I have an answer for that! Take a look, I updated my post: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/ http://www.industrydive.com/blog/how-to-make-html-email-butt... 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 13y agoYou may want to use <!--[if vml]> instead of <!--[if mso]>, and test the content with IE8 as well as Word.
- deleted 13y ago[deleted]
- yuhong 13y agoIn 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>
- mikepurvis 13y agoImages are going to be a problem for the social buttons, too. There should definitely be alt attributes providing reasonable fallback text.