#MageHackDay 2014

Good times at the first ever global virtual Magento hackathon

Sun, February 2, 2014

This weekend I had a blast participating in the first ever global virtual Magento hackathon.

I was apart of the Responsive Email with CSS Inliner project. Our project team included Andreas and Nick from Germany, and myself in Pasadena on Friday. And on Saturday, Derek, Dhru, and Piotr joined in.

Andreas and Nick laid the groundwork with finding the inliner library and hooking it up to magento, as well as the initial work on the templates.

Then, Derek and I fleshed out the welcome and order confirmation base templates a bit. Dhru took the base template to the next level with an actual template design for Clean. And Peter helped to flesh out requirements for everything.

A CSS inliner is a tool that takes an HTML file and a CSS file and converts them into HTML with inline CSS. This is necessary because some prominent email clients only allow you to use inline CSS to style email.

At first we were hoping to use the Zurb Ink templates as a foundation, but we ran into some rendering hiccups, so we ended up writing some simple responsive base templates and their CSS from scratch.

I have to say that even after working with the inliner for a solid 15 hours or so over the weekend, it still feels like absolute magic every time I see it in action.

I guess it’s because I spend a decent amount of time working with crazy email markup for MageMail.

Here’s what the email markup looks like:

And the SASS:

And here are some screenshots of the templates.
Screen Shot 2014-02-02 at 9.04.42 AM
Screen Shot 2014-02-02 at 9.04.55 AM

Screen Shot 2014-02-02 at 9.05.10 AM

Screen Shot 2014-02-02 at 9.18.25 AM

Screen Shot 2014-02-02 at 9.18.51 AM

Back to Blog Post List

Your First $250 of Generated Sales is on us!

MageMail generates sales by sending triggered email to your customers. It's painless to setup - sign up now to get your first $250 of generated sales completely free.