7 ms·
Zurb Ink: Responsive HTML Email Framework
- crisnoble 13y agoAnyone brave enough to bring a semblance of sanity to the world of HTML emails deserves major kudos. For kids like me who did not grow up making table layouts, coding emails is a nightmare. Oh the <td>'s. I am so glad Zurb is lending their knowledge building of excellent frameworks to this widely underserved market.
- azio_m 13y agoHuh. While I rarely use them nowadays, I still find tables much easier than divs.
- djjose 13y agoHonestly, even for someone that started his career making table HTML layouts with inline styling it's a major PITA to code up emails that look respectable on all clients. I can't wait to try this out.
- M4N14C 13y agoInline your styles with this https://github.com/craigmcnamara/sexxy-emails https://github.com/craigmcnamara/sexxy-emails
- erichurkman 13y agoIf you are programatically generating emails, there are libraries for most popular languages that will convert an external stylesheet into inline styles - for example, pynliner [1] for Python. They let you write HTML and CSS, test in the browser, and only at the last moment convert `p { text-color: #333 }` and `<p>..</p>` to `<p style="color: #333">` [1] https://github.com/rennat/pynliner https://github.com/rennat/pynliner
- EnderMB 13y agoI spent a ton of my childhood building HTML table layouts, especially forum skins. Maybe it's because I'm now spoiled by lovely CSS and established web standards, but the thought of coding any HTML email up makes me sick.
- buckbova 13y agoI never needed to get into table hell. I used an image map every time. One image. Define some areas with different links. Bingo. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
- tn13 13y agoHow does it work in Gmail / Yahoo etc where images are blocked ?
- buckbova 13y agoThis was pre-image blocking. Not sure how this would work now. I assume there's a big empty table where the image would go and some text+links above and below the image.
- amarcus 13y agoExcept you would most likely have a high rate spam rate and a major number of recipients won't be able to see your content without downloading images first. You will get a better response with a text only message.
- eli 13y agoSo what do the majority of recipients see (who don't have images load by default)?
- elwell 13y agoUm, I'm pretty sure he was joking.
- eli 13y agoshrug Quite a few people do exactly that.
- rurounijones 13y ago
- dannowatts 13y agoI've been using Zurb Foundation for quite some time and I truly enjoy using the framework, I'm sure I'm going to love using Zurb Ink as well. Everyone should be giving this a shot, congrats (and thanks) to everyone at Zurb! http://zurb.com/ink/ http://zurb.com/ink/
- cwilson 13y agoGone are the days of hacking up pre-fab Mailchimp templates! This is wonderful and very timely, I'll be giving this a try for two different projects next week.
- splatzone 13y agoLovely framework, but can someone explain why HTML email is so stuck in the past? Why can't email clients just abide by proper web standards?
- dmix 13y agoI prefer succinct plain-textish emails linking to HTML websites over HTML-heavy emails in most situations. I've personally found plain-text often also converts better than most HTML-heavy newsletters. Most HTML is pigeonholed into email where it doesn't fit well, for example the variety of unpredictable clients and devices. I'd rather serve that via the browser where full CSS/HTML is supported. Mobile is helping by standardizing webkit but we're still far from it being a good delivery mechanism for a web experience.
- splatzone 13y agoI feel the same way about plain text, but I can't help but wonder if I'm part of a nerdy minority. I know my mum finds her image heavy emails from eBay useful, for instance.
- biftek 13y agoWe’ve seen similar results at our company. Plain text emails always get more click throughs in A/B tests. And personally I prefer them. If I must use html, I only stick to the basic styling elements with no css.
- dntrkv 13y agoI think it was around Outlook 2007 Microsoft decided that instead of using Internet Explorer to render their emails, they would use Microsoft Word. That's right. Word. And now whenever you try to use even the most basic CSS rules, Outlook fucks it up very badly. Then there is that abomination called Lotus Notes (mainly <8.5). Yes, I have been doing a lot of emails lately and it is the worst experience in web dev I have ever had. Outlook 2007 makes IE6 look like the best browser in the world.
- splatzone 13y ago
- siliconc0w 13y agoKinda random question but does anyone know of a simple email template app for use for something like internal company emails?
- eli 13y agoMany consumer ESPs have free templates you can download. With a tiny bit of work, you can make them work anywhere. For example: http://www.campaignmonitor.com/templates/all/ http://www.campaignmonitor.com/templates/all/
- M4N14C 13y agoIf you use ActionMailer or Padrino Mailer you can use https://github.com/craigmcnamara/sexxy-emails https://github.com/craigmcnamara/sexxy-emails to inline those responsive styles.
- mmahemoff 13y agoThis would go well with Sendy (http://sendy.co/ http://sendy.co/), a pretty awesome self-hosted mailing list tool. Together it's like Mailchimp for hackers.
- xinkr 13y agoInteresting tool. Thanks for sharing.
- niteshade 13y agoZurb just became my favourite company in the world.
- hidamon 13y agodoesn't work in iOS 7 Mail.app..
- Kequc 13y agoI sometimes swear apple is on track to be the new internet explorer but on Ink's page it says ios7 is supported, could you expand?
- mkelly275 13y agoDo you have a Litmus test you can post on GitHub https://github.com/zurb/ink https://github.com/zurb/ink
- hidamon 13y agoiOS 7: http://imgur.com/N7NIWW4 http://imgur.com/N7NIWW4 iOS 6: http://imgur.com/wekWLJZ http://imgur.com/wekWLJZ
- kbar13 13y agoFor those who want to star/watch the project on GitHub: https://github.com/zurb/ink https://github.com/zurb/ink
- jedbrown 13y agoHTML email allows an unreasonable level of deception. How does your mail client render this? <a href="http://evil.host">http://trustworthy.host</a> If you can't get your message across in a plain text email, you may want to reconsider whether your intent is to mislead.
- kbar13 13y agoI wholeheartedly agree, and we had a discussion about plain text vs html emails at my org a while back. The problem is that marketing wants designed emails to the customer that catches the customer's eye. For the most part, plain text marketing emails end up TL;DR.
- aeroevan 13y agoSo send both! Multi-part mime types for a html and a text email for those of us who don't read HTML in our email :)
- cbr 13y agoIf you can't get your message across on a plain text web page you may want to reconsider whether you intent is to mislead. (I love plain text email, but this proves too much.)
- wil421 13y agoCompany wide emails or email signatures give a better impression to people if they are pretty, leadership likes that.
- wil421 13y agoYou'll always have that threat. The users don't want simple text. It looks great in html most people wont even know about the risk or even understand it.
- airencracken 13y agoThe desire for pretty isn't an excuse to be insecure.
- airencracken 13y agoNo no no no no no no no no no no no no no. NO HTML e-mail was and is an awful idea. My MUA doesn't need to be a browser as well. Stop the madness, please.
- eli 13y agoHTML Email is here to stay, whether there are nice frameworks for it or not.
- ryanSrich 13y agoHow else would you suggest designing an email? Plain text? Clients aren't just going to be like..."yeah, we don't want any images, or buttons, or fancy designs"... I swear all the devs on HN work in product.
- gregf 13y agoWhy do emails need to be designed in the first place? Honest question.
- ryanSrich 13y agoWhether you're consciously thinking about design decisions or not everything is designed. The better question would be, why does design matter? This list could be huge but here are a few common reasons: - To simplify information. - To make it more digestible. - To be engaging. To invoke emotion. If you blast an average email receiver with a poorly designed wall of text, at best, they might read part of it and drop out half way through. Most of them will archive or delete it without even opening it and another portion will probably report it as spam. I won't sit here and discuss the complexities of why design matters but here are a few links: - http://www.fastcodesign.com/3019604/design-50/design-in-30-seconds-nike-on-why-design-matters http://www.fastcodesign.com/3019604/design-50/design-in-30-s... - http://articles.latimes.com/2013/sep/30/business/la-fi-mo-worlds-most-valuable-brands-apple-coca-cola-20130930 http://articles.latimes.com/2013/sep/30/business/la-fi-mo-wo... - http://www.hackdesign.org/lessons/1 http://www.hackdesign.org/lessons/1
- 13y ago
- denysonique 13y agoHTML Email is what sells.
- denysonique 13y agoThere should be an option to email the docs page with examples to one self. In order to preview it in your own mail inbox(s).
- mkelly275 13y agoWe've got a bunch of example templates along with test results across different email clients. You can just copy and paste the email into your sender of choice and check it out http://zurb.com/ink/templates.php http://zurb.com/ink/templates.php
- twakefield 13y agoThis is great to see and long overdue. We get a lot of customers that ask about how they should create email templates. We don't really want to go down that path, so we'll be happy to direct them here. Also, +1 on using Litmus for testing rendering across different clients. There are also other things to consider when designing email templates and email deliverability in general. - Always use multi-part, with a nice text part. Not having a text part is a spam flag. - Keep the ratios of images and links to text low. High ratios are spam flags. Also, most of the time images will not be displayed by default. - Use common sense, avoiding exclamations and referencing spammy words (eg. buy now!). - Avoid link shorteners (commonly used in phishing emails) - Use Litmus to test against spam filters to see where common sense fails. - mail-tester.com is another nice free tool for checking for spam flags. - There are also some little things that can trip you up, like having malformed message-Ids where the domain in the message-ID does not match the sending domain. For more thoughts, we have a best practices (http://documentation.mailgun.com/best_practices.html http://documentation.mailgun.com/best_practices.html) Edit: Also, PLEASE only send emails to people that have given you (like on your website) permission and you have validated the email address with a confirmation link (double opt-in) before sending subsequent emails. Always give recipients the conspicuous and easy ability to unsubscribe.
- eli 13y agoAnother important one: optimize the design for display without images. Most email clients block images by default, so that's how most people are first going to see it. (The notable exceptions are Apple Mail and iOS Mail which load images by default.) With the notable exception of iOS Mail.app and OS X Mail, virtually all email clients block images by default.
- radicalbyte 13y agoOutlook displays (embedded) images too by default (that's why lots of people include them in their signatures). I think that href images are (correctly) blocked, because they pose a security and privacy risk. That, and the only group who uses them are email marketers. If I want to see your catalog, I'd open your website. You might have guessed, but yes, I do mark those image-mails as spam (and any mail where I can't find and 'unsubscribe' within 2 seconds). I wonder if Americans have less trouble with this. When I was last in NY the quantity + obnoxiousness of the advertisements shocked me - we're more used to being blitzed by Germans, not by marketing. Compared to that having an inbox full of brightly colored marketing mails is restful..
- wil421 13y agoI can't see any of the images on my iPad using safari.
- mkelly275 13y agoCan you post a Litmus test result or post the code as an issue on the GitHub repo https://github.com/zurb/ink https://github.com/zurb/ink
- wil421 13y agoMeant to get back yesterday - For some reason it worked when I tried about an hour later. I dont know if it was my connection or not.
- elm232 13y agoPlacehold.it might have been down. They're great for development, but a lot of people were probably opening the templates and sucking up their bandwidth yesterday.
- benched 13y agoThe word 'responsive' has been sprayed all over these pages. I take it I'm supposed to read that word a certain way in this context, but I don't know how. Does it mean you can click things? Something more? Something else?
- ricefield 13y ago'Responsive' simply means that a layout adjusts itself to the size of the device/screen. See: http://en.wikipedia.org/wiki/Responsive_web_design http://en.wikipedia.org/wiki/Responsive_web_design
- mkelly275 13y agoExactly, Ink uses media queries to modify the layout for different devices.
- elm232 13y agoBacking up what ricefield said, responsive design is making something that works well in many different viewing contexts (desktop, mobile, tablet, smart TV, etc). http://zurb.com/word/responsive-web-design http://zurb.com/word/responsive-web-design
- jhammer 13y agoIf you don't want to sign up for a Litmus subscription, you can use Direct Mail for OS X (http://directmailmac.com http://directmailmac.com) to run design tests on a pay-as-you-go basis. Also inlines your CSS by default (but can be turned off). Disclaimer: I am a developer on Direct Mail.
- NKCSS 13y agoI've been searching for something like this, great timing!
- mos2 13y agoI am super excited about this. I love the fun visuals, extensive documentation, transparency and honesty about issues with email clients. I think there is huge potential here and I can't wait to see where they go with it. A huge use case that no one is talking about is transactional emails from your web or mobile app. Now you can have great looking emails that increase engagement that look great on mobile email and look (both in design and the underlying code) much like foundation based rails apps.
- pearjuice 13y agoOfftopic Jacob Gube, how is sixrevisions going? It looks like it is really drying out. Have you abandoned it for designinstruct? A shame because it always had really good articles.
- gadders 13y agoDoesn't support Lotus Notes. Doh!
- Kequc 13y agoI imagine Lotus notes would have fallen back to plaintext anyway no?
- chii 13y agohaha, i was just working on emails, and now i see this framework. May be it will save me some effort. WOrth checking out.
- celso 13y agoSo, this is like InK, the responsive framework from SAPO launched over an year ago http://ink.sapo.pt/ http://ink.sapo.pt/, for E-mail... with the same name... and the same grid concept. Neat.
- rogeriopvl 13y agoThe framework looks pretty awesome. But the name choice is unfortunate. Ink is already used for this framework: http://ink.sapo.pt http://ink.sapo.pt
- HNSucksAss 13y agoResponsive to what?
- AYBABTME 13y agoThis looks very interesting, I wasn't even aware that email sucked that much. * * * Side tracking: Is email marketing a good thing? I've never looked at any numbers regarding that. I'm genuinely asking the community here. My intuition would be that it's not; I really hate receiving any sort of pre-formatted email from any service, unless it's Google Groups or something where I receive a message as a result of a human trying to interact with me, personally. In that sense, I would believe that more, fancier, mass distributed marketing emails aren't what I'm wishing for in this world. But my intuition could be wrong. I'm also the kind of guy who just automatically recycles all the marketing mail I receive without ever looking at it. So yeah: how effective is email marketing? On the long term, short term?
- theg2 13y agoWe use it in the form of a daily newsletter (news site), and originally when I took up speeding up the newsletter process and a redesign I realized I had entered the 5th circle of Hell. The article is dead on about just how painful it is to create that I thought it would be useless. But the numbers don't lie and a fair amount of our subscribers open and use the service every day. Granted we're not marketing, but we are at least seeing people click on the items in the newsletter.