PSD to Email Conversion for six responsive email templates optimized to work with MailChimp / Mandrill
We received the project design files for all six email templates as well-structured PSDs. Designing email templates, being a rather complex field and coming with many limitations, was not an issue for our client. They had a lot of experience.
The client needed us to code the 6 transactional emails as responsive templates and integrate them with MailChimp / Mandrill.
The client needed us to code the 6 transactional emails as responsive templates and integrate them with MailChimp / Mandrill.
We were asked for a few more additional features:
Although the main points were clear, we had to clear up some details like the charts and a way to integrate them.
Since we couldn't use JavaScript in email templates and the styling capabilities were very limited by some of the email clients, we had to find another way to integrate the charts in the emails. We were going to upload everything in MailChimp, so they could use Mandrill.
After spending some time discussing possible options, we found a solution.
After clearing up all the details with the client, we prepared a summary of the process showing how we would handle the project.
For some of the complex graph charts we had to use images. After a brief discussion we suggested that the client should use PHP that would generate images after a chart was drawn. This was the perfect solution to put real and dynamic charts in the emails, so they liked the idea.
The time frame for the coding, responsive versions and the integration was 2 business days.
After we cleared up the project details, the manager was responsible for providing all the information needed by the developer. It was clearly noted how we would handle each type of chart, so there was no room for hesitation. We were ready to start the email templates conversion.
We received mockups for the responsive version of the email templates, showing how the elements had to be positioned. We also needed to find a way to present the chart data on small devices.
We followed the best practices and kept the balance between maximum compatibility and abiding by the design guidelines.
As many of you might know: “The good testing is top of the list when it comes to delivering first class emails.” This was our first priority, so we did a lot of tests before completing the project.
We used Litmus services to make sure the emails were compatible with all major email clients. Even more, we did our own independent tests to make sure everything worked perfectly.
Check out the video below the see the whole thing in action
We converted the email templates and optimized them for mobile devices. After the client approved them, we uploaded everyting in MailChimp, so they could start using them.
Design and coding of a single email template for a design conference. Including responsive design and MailChimp Integration.
Coding of 3 email templates including responsive work and CampaignMonitor integration.
