It was Kalen Jordan’s idea to build responsive e-mail templates with CSS inliner for Magento during this weekend’s #MageHackDay. Andreas von Studnitz and I also voted for the idea and joined his team on Friday evening. While I was building Magento’s welcome e-mail based on Ink, a responsive e-mail framework from ZURB, Andreas developed a module that converts the responsive HTML template’s external CSS into inline CSS and uses it instead of Magento’s default template when sending the welcome e-mail and other e-mail confirmations.
After we experienced some issues with the CssToInlineStyles class, Kalen tried to use InlineStyle which yielded slightly better results, but was still not satisfying. As CSS media queries cannot be inlined at all, they are supposed to be placed inside a <style> tag right after the opening body tag (not inside the head), but did not work in either of the inliner classes. This was not the main reason, though, why Kalen decided to build his own HTML template without any tables and without framework.
Responsive Magento Order Confirmation E-Mail
In the following screenshot and in his screencast, you can see the very promising results of his endeavor.
Personally, I haven’t been using Ink or any other responsive e-mail frameworks before, so it was a good opportunity for me to do some reading before diving into converting the Magento welcome e-mail template. The order confirmation e-mail would have actually been a better use case for responsiveness, because billing/shipping addresses and payment/shipping methods use a 2 column layout.
I respect Kalen’s decision to build his own e-mail template from scratch, but after looking into some other responsive e-mail frameworks, I concluded that it’s definitely better to use some sort of boilerplate in order to achieve the biggest possible compatibility with different e-mail clients. Floating div-containers won’t work e.g. in outlook.com.
When researching other responsive e-mail frameworks today, I found 2 more which also look very interesting. One of them even supports Outlook 2007/10/13+ which is not the case with Ink.
Responsive E-Mail Frameworks
- Ink – A Responsive Email Framework from ZURB
- Antwort – Responsive Layouts for E-Mail
- Emailology – E-Mail Boilerplate
If you know any other noteworthy responsive e-mail frameworks, please leave a comment.
Magento 2 will come with a responsive base theme and word got out that even the next release of Magento 1.8 will get a responsive base theme which is very nice, but of course the next logical step is responsive e-mail templates out-of-the-box.
I just saw that Kalen also blogged about #MageHackDay and only now became aware that on Saturday he had actually been working on the project with Derek, Dhru, and Piotr, the latter of which is a Magento product manager and sort of part-time Magento community manager. Thank you all for taking part in yet another great Magento community event and sharing all of your code. You are awesome! Go go Magento.
Great write-up, Nick. It was fun to be able to collaborate a bit with you after having twitter-known you for a while now!
It’s funny that you mention you didn’t know I was working Saturday! I think that there were definitely some challenges with the hackathon around time zones and scheduling. I wasn’t even able to start work at the same time as you guys (because the hackathon started in the middle of my work day) and by the time I started working, you guys were offline!
This was the first virtual hackathon, so I’m sure that we’ll learn from some of the challenges and make some tweaks for the next one.
I hear what you’re saying about wanting to build off of a platform, in order to achieve maximum compatibility. I felt bad about kind of changing the direction of things when I changed from the Ink template to a new one from scratch, especially since you guys weren’t around at that time when I had to make the decision!
I have to say though it’s pretty nice to not have any tables at all in the markup, and I think that it should have about 94% coverage.
According to this email client market share report, outlook.com only has 6% share and is in a downward trend, and it’s the only one that doesn’t support floats out of all the major ones:
http://emailclientmarketshare.com/
Thanks for your comment, Kalen.
There are no hard feelings at all about your decision to build the template from scratch and maybe you’re right about neglecting outlook.com, but there’s a lot of other stuff like paddings that render differently in different clients, so if you want to avoid doing lots of testing, a framework can save you lots of time. I might have a look at Antwort and give it a try if I find the time.
I was actually aware that you were planning to work on Saturday, but I wasn’t aware that 3 other people joined you 😉
Pingback: Magento World Wide Online Hackathon #MageHackDay - Openstream Internet Solutions
Nice article and effort indeed.
I were looking with the Githut for the source code. Beside the source code I can see more than few items requiring additional clarifications i.e. how the code is working. Like basic review as we do with template seems nothing much informative but the module explains that bit more. i.e. how the stylesheets are being linked and relevant. Which was expected to be in the template .html files.
Overall good progress.
Thanks for your comment, Farhan. Please add your questions and suggestions directly on https://github.com/magento-hackathon/Responsive-Email-Templates-with-CSS-Inliner.