Show HN: Responsive Email Templates(zurb.com) |
Show HN: Responsive Email Templates(zurb.com) |
btw try https://bitbucket.org/zalew/hackernews if you want to crawl it to save elsewhere.
So it's not just me. Just to make sure, you know that link only works for yourself, each user can only see his own saved stories page.
If you send me a paragraph of text, I'm going to read it on my mobile. If you send me an HTML email, I'm going to archive it right away on my mobile. If you send me too many HTML emails, I'm going to eventually be motivated enough to find your 'unsubscribe' button.
You're not alone - but you are in a minority (well - apart from here probably ;-). Most people don't really understand that there is even a difference between HTML and plain text mails.
The difference that most people act on is a well designed vs a poorly designed email - whether that be plain text or HTML. A badly designed text mail will lose to a well designed HTML one. A well designed text mail will beat a poorly designed HTML one.
Since you have more design options for HTML you can normally make the HTML mail be the most effective option.
If however you're getting an transaction type email just to update you on something, then yeah, text might be better.
I feel like HTML email design lags about 5-10 years behind website design. Some of that is the limited feature set, but I think more of it is the lack of design attention its given. It seems like most of it gets generated by a marketing department using some crappy marketing campaign templating software from a decade ago with little to no thought to how the output is consumed.
Email clients are definitely to blame.
The users of this board aren't exactly the type of people who impulse buy.
Responsive emails probably won't help with emails you don't care about...But, emails you are interested in, it can make all the difference.
e.g. http://www.enewsletterpro.com/articles/multi_part_mime_messa...
http://www.campaignmonitor.com/css/
I've also found Litmus to be an incredible resource for cross-client test (Outlook vs Gmail vs Yahoo! vs ....). If you send a lot of emails as a part of your user retention strateg it's vital that you test this. You'll be amazed at how different they look and how a few hours of tweaking can optimize things across a large number of clients.
Fortunately a <table> is (and always has been) responsive.
For non-business clients (who would be unlikely to use Outlook at all) these look great.
You might want to consider making the project page responsive.
Also, the tweet box is way off to the side, I had to resize my window to fully see it.
http://www.zurb.com/playground serves a separate mobile optimized page, but the link to the responsive email templates points to http://www.zurb.com/responsive-email-templates, which doesn't exist.
What do folks do with the large (large in this case anyway) stylesheet, that actually works with actual email clients?
Link it with a <link> tag? Plop it all into a <style> tag? (where?) Something else?
What are current best practices for sending html email that needs a non-trivial stylesheet like this? Googling around, i'm still left not sure; many pages I find make recommendations that would make using these templates tricky (although some of them are a couple years old or more).
However, most html emails are marketing emails, so I'm still not sold of the idea of responsive templates. The emails I really care about are plaintext (the best type of responsive design---so simple!)
Curious, they use the <table> element to get around the lack of media queries!
I will definitely considering integrating these into my workflow.
An addendum to that might read "ABV" - always be valuing (visitor value, that is).
I've personally tested both. It really depends on how html vs. text affects: a) your open rates b) your clickthrough rates c) your sales conversion rates d) your long term lifetime value and visitor value.
It's very dangerous to make decisions about "html vs. text" based upon one's own personal preference - or even HN readers (unless that's your target audience).
What do you know about your audience? That's what I always say when chatting with friends and colleagues.
As an example, are the majority of your users using gmail, hotmail, yahoo, aol? Or, are they using personal and/or academic addresses?
These different mailing providers treat html vs text quite differently.
The style of your email can affect whether or not you get inboxed (hence every action step from open rates, to ctr rates to sales will be affected).
What's the demo of your audience? If one has an older crowd, perhaps plain text may be easier to read.
A younger crowd? Perhaps xyz percentage more of them are reading via mobile devices. This would also affect the decision.
The Email Experience Council at the DMA has some great research on this topic - check their Youtube channel.
But above all I'm a big fan of making data-driven decisions based on a clear awareness of what your audience's behavior suggests - not on personal preferences or HN likes - IHMO.
Also HTML may be more appealing but text may drive more goal conversions.
Has anyone else seen better overall ROI with text, even though they personally have more of a preference for HTML?
added: http://www.emailexperience.org/ http://www.youtube.com/user/EmailExperience
If I receive a 600px wide email on my iPhone I can zoom and pan around it. I feel the same way about websites, I don't want my mobile browser to redirect me to a crippled mobile website with half the content. Especially when I have a browser designed to view desktop websites on a smaller screen.
I think we should wait and see if responsive emails are just a fad or is going to become the mainstream.
That being said, this is a fantastic tool for creating responsive emails.
Shameless plug: I made https://www.mailrox.com/
Personally, I bet they DID test them against Outlook 2007 and when they saw the amount of work that would be involved in making them render at least somewhat correctly they held a staff meeting and decided it would be more effective to just put a big red "X" in that column and I don't blame them for it one bit.
It'd be fantastic to get something like this for app-based communications (sign-up, notifications, PW change, etc), and there may be just as much of a reach as with campaign marketers.
Tons of people try to build responsive/multi-platform apps these days, but responsiveness in the communication to their users is a gaping hole. Every app we build, I feel like we start from scratch in putting together notification/communication emails (outside of campaigns).
The final conclusion was to stick to table layouts for a few more years. Has this changed?
As you can see, I'm already using Foundation on the main website. I've found it excellent.
Looking in the browser doesnt actually help me test the 'email responsiveness'.
I'd like an example emailed to me, so I can test on my iPhone, my computer, my ipad etc.
We provide a templating system which allows you to build and preview with separate HTML and CSS, and we compile to inline CSS at runtime to ensure compatibility with the majority of email clients.
The painful thing to remember is that html/css for email is a weird mix of HTML3 and HTML5 - meaning some major providers only allow for basic functionality, but other platforms support the bleeding edge while omitting some of the simpler aspects. In the end your demographics will strongly influence where you focus your efforts.
The templates from Zurb here are a great basis - as a start on a responsive email boilerplate this will be great value to the community - individuals using this for customization will hopefully push the development of these bases further.
- http://www.htmlemailgallery.com/
- http://www.campaignmonitor.com/blog/tips-resources
- http://www.campaignmonitor.com/css/
- http://www.emailonacid.com/blog
Basically, avoid floats, use tables, use inline styles.
Also, on OS X, if you can save the source of email newsletters sent to you as an html file (Cmd-Opt-U -- select the html portion), edit it to your liking, open it in Safari, then Cmd-I Cmd-Shift-T (Format - Make Rich Text if plain text is default) to send it as an unmodified HTML email from Mail app.
Yeah, that's what I was finding too -- and that advice is pretty much incompatible with the "responsive email templates" offered in the OP, no? That's what I'm wondering about.
http://beaker.mailchimp.com/inline-css
Also, read MailChimp's study on responsive emails:
http://mailchimp.com/resources/guides/html/email-on-mobile-d...
https://github.com/fphilipe/premailer-rails3
There are a few gotcha's with the gem but overall it works pretty smoothly!
It's a trial and error process. Build HTML emails using tables for as much as possible, you can't use background images just background colours, don't rely on floats or other common CSS properties (even using height or width in your CSS isn't as supported as well as you'd think) and the number one thing to remember is: the day a client complains it doesn't look good in Lotus Notes, you will want to throw your computer out the window and become a farmer because it's never going to work in Lotus Notes.
Always make sure your images are set to display block to fix issues with various email services like Windows Mail and Yahoo! Mail. If you need to set them side-by-side, add in another td inside of your table row.
Always make sure you write alternative text for images. Most email clients are set to not to display images in emails unless told otherwise. Another convenient feature not many know about is that you can style the alt text that shows. <img src="ourlogo.png" alt="Acme Company" style="color:#000;font-size:20px;" /> — doing this ensures even if someone without images still sees something that doesn't look like hideous empty squares.
With later versions of Outlook, Microsoft also stripped back support for various CSS attributes and HTML tags compared to previous version so you'll find you will encounter a lot of frustration with that as well.
So if you had `p { color: red; }` in your style sheet, then all your `p` tags should read: `<p style="color: red;">`. It sounds horrid, and it is, but you can automate the process with a preprocessor.
When it comes to email, you unfortunately need to throw out the last 10 years of advances.
Most web based email clients will rip out your <head> so link tags aren't a good idea. You'll need to inline 90%+ of your CSS. I usually create the table layout then add the inline style later. You can use the Mailchimp CSS inliner tool for quicker results.
I usually inline it all and leave some bits in a style tag. That's really the best you can do because of the crazy inconsistencies between email clients. Email clients render HTML and CSS like it's the 90's. Check out Campaign Monitor's blog. They have a big chart that shows you what HTML/CSS is compatible in each client. It's a life saver. I have it posted in my cube and I use it every day.
They seem to conflict with much of your advice to me. That's what I'm wondering about.
In the end you have to know your audience. At my job, we have a lot of corporate types who are checking their emails in Outlook and also webmail so the emails I create have only two style rules in the head of the document with the rest inlined. Email is just really fragile and I personally believe you have to resign yourself to the fact that your email will break for some of your readers. When I create a website I expect it to work beautifully for over 95% of people. With email, I expect it to work 3/4 of the time. Maybe more if I'm lucky. That of course depends on the complexity of the email's design of course.
But is that the cause or the effect?
Rather, are email clients still a mess because developers don't have much interest in topic? Even gmail has strange html/css rules, if google pulled that with chrome there would be pages of developer outrage here on HN, almost no one seems to care about gmail's html rendering, or enforcing a spec/compliance for email clients, developers are apathetic about it.
What I'm saying is, developers don't like working with html email because its a mess, but its a mess because the development community as a collective doesn't seem to care about it, at least not enough that there is a concerted effort to fix it.
Addressing that specifically, a couple years ago when Gmail's HTML rendering was even worse than it is now, the Email Standards Project started this http://www.email-standards.org/blog/entry/getting-some-gmail... to try to embarrass Google into improving the rendering. It sorta worked.
