Responsive E-Mails for Magento

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.