December is fast approaching us, and with it comes Christmas. My partner’s family like to participate in a Kris Kringle (KK) present giving event where in previous years each of us has drawn a name from a hat to determine who we buy a gift for. Until two years ago.
Two years ago I wrote a little java application (more like three java classes) that would randomly pick a KK for everyone and send them an email. This software became known as KK picker 3000. In it’s first year, the KK picker email was very simple. Just some black text on a white background with a single image. Last year I spent a bit of time on developing a new template and the result was KK Picker – Into Christmas. However last year I didn’t spend a lot of time updating the java project behind the email. I had left it as about three java classes that had to be manually built via the command line and weren’t really that well thought out.
This year was a bit different. Before spending time on updating the email template, I decided to update the java project itself. The KK picker java project is now a maven project within eclipse. It has classes in packages that actually show that at least a little bit of thought has gone into them. And it’s all been committed into my bitbucket git repository. I’ve basically rewritten the whole project from scratch. And I must say that I’m really happy that I did!
So with a much nicer “backend” implemented, it was time to start looking at this years template. My partner and I had already determined a theme, and we had a few images that we were using as sources. But in terms of the template, we didn’t have much to start from. Looking through last years template, there was a source css file and a html file that had all of the styles applied inline. I hadn’t kept track of how I did this, or what it looked like to begin with. So this year I decided, once again, that it was time to make things better. The 2015 template was build using Grunt. With Grunt I was able to compile a scss file into css. Then using the compiled css and a source html file, use grunt-premailer to move the styles inline and output the final email template. This made developing the html template much easier than having to do it “the old fashioned way”.
Below is the final template we ended up using for this years KK Picker emails. Instead of just taking a screenshot of the email this year I’ve embedded the template in an iframe! (ewwww… I know… iframes are horrible!) I apologise if you’re looking at this post on a mobile and see a scrollbar for the email content. You can view the template using this link if you’d rather see it without the iframe.