Call Me E-schmail: Conquering the Beast that is HTML Email (zurb.com)
over 6 years ago from Luke Pettway, Web Developer
over 6 years ago from Luke Pettway, Web Developer
Thanks for posting, Luke! If anyone wants to chat about Foundation for Emails Tim and I would love to answer here or on the post :)
I'm something of a newbie when it comes to HTML email. My applications send plain text emails instead because I don't know a thing about HTML emails so I don't bother!
A lot of this article talks about Outlook.com and Office 365. Both of those products are quite recent. I'd expect errors in something old and decrepit like Outlook Express, but can you shed some light on why even modern clients have such bizarre bugs?
Further, do you know of any attempts from people at the top of the "food chain" (I guess that'd be vendors like Microsoft/Google/Apple, etc.) to fix this and make HTML email easier to write?
I hope this isn't super difficult to answer. Thanks. :)
Thanks for the read!
Yeah, we'd assume that too ha! Its not that these newer browsers are worse than the old, but that over the years the email community has learned a lot of tricks to combat the older browsers.
The main issue with most of these is there is no standard in email clients. Older outlook uses words rendering engine and many don't support media-queries . This just leads to tons of hack to fix one thing, which breaks another. The illustration of a boat with tons of holes needing to be plugged really fits what it's like to code and HTML email.
As far as the food chain is concerned there are a lot of great people trying to solve this problem and even tech crunch has a great article on it, so we really hope we can someday start to build emails with a little more sanity. http://techcrunch.com/2015/11/10/gmail-we-need-to-talk/
Hi Brandon, this looks really promising. After having some issues with the original Ink I've been using a tweaked version of Glenn Smith's E-mail Framework pumped through Jekyll with a bunch of handy Grunt tasks. The next step for my workflow was to rewrite everything in Jade or HAML. I'll be excited to test Foundation 2!
I have two questions: 1. Do you foresee any issues with using your file generator on Windows? 2. Will there be support for Markdown in your flat file generator? The ultimate goal for my workflow is to allow my colleagues to input text in markdown format and spit out a bulletproof e-mail, I'm pretty close to that now but would adapt to using Foundation 2 if it yielded better results!
Awesome to hear Drew! So our flat file generator is called Panini, the same one we use for Foundation for Sites. We haven't seen any issues with Windows, so it should work just fine. It also supports markdown, just wrap your content with {{ #markdown }}
{{ /markdown }}
.
Cheers, Tim! Looking forward to giving it a whirl.
Ha what Tim said!
Huge difference in amount of code written.
Thats the goal and we're pretty excited to make it happen. Abstraction is always a risk, but the templiting language will allow you to mix our tags with tables, so if the abstraction breaks down you can always go back to the real thing.
As an entry level designer, I recently put together my first responsive email template; This framework cannot come soon enough.
Can't wait for you to try it out! It'll be open-sourced in the near future.
So glad you guys are going the partials, helpers, and static site generator route. I put together https://github.com/timknight/middleman-tattoo about 2 years ago with the intention of doing that with Ink (get it... tattoo... ink... I'm clever) but just never had the time to maintain the concept as much as I would have liked.
Love the pun! haha. That's really awesome to see that though. We're definitely excited to get your feedback on the new stuff.
I can't wait to check it out!
Great to hear! Shoot me a message if you'd like to hop on the private release.
Until there are more universal standards for email clients I'm sticking with the MailChimp template builder. Although it's more restrictive than I'd like there's just no way to create a custom-built HTML template that is mobile responsive & compatible across all email clients for a decent price (it just takes up way too much of my time).
That said, it's great to see people working at making this more of a possibility in the future!
MailChimp is definitely great at what it does. We're working on chasing down that white whale of a perfect email! We'll be releasing some templates when we launch F4E, are there any templates/patterns you'd like to see when we release it?
Hey Tim, if you haven't already seen it this site may give you an inventory of some useful patterns: http://responsiveemailpatterns.com/
Thanks Drew! Will definitely check it out.
Great work. That being said I'm not convinced that it's actually worth it to use a grid in your email layouts. I feel like single-column emails are a lot easier to code, and also easier to read.
Thanks Sacha! I agree with you that that single page layouts, especially on mobile, are usually easier to read. However, we didn't want to restrict the designer, maybe they have a 2-up or 3-up gallery of products that they'd like to include on a small view. With the new syntax and attributes with the Inky language it's much simpler to code like you would using Foundation for Sites. If you'd like to check out the private release shoot me message, would love to hear your feedback!
That's a good point, there's definitely use cases where a grid might be required. Looking forward to giving this a try when it comes out :)
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now