Project Case Study

World Wide Stats PSD to Email Conversion

PSD to Email Conversion for six responsive email templates optimized to work with MailChimp / Mandrill

  • Responsive
  • Transactional Emails
  • MailChimp / Mandrill Integration
  • Dynamic Sections
  • Custom Charts
Preparation

Design

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.

Design

Requirements

The client needed us to code the 6 transactional emails as responsive templates and integrate them with MailChimp / Mandrill.

  • We had to make the templates easily editable through MailChimp.
  • All sections had to be made dynamic, so the client could update them.
  • We had to optimize the templates for mobile devices, i.e. make them responsive.
  • We had to use the best practices for better compatibility.

Clearing up the details

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.

And we started...

The time frame for the coding, responsive versions and the integration was 2 business days.

Planning
Step 1

Planning

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.

Step 2

Coding

The complex part of this project were the charts. Due to the many limitations of email coding, we had to figure out a way to code the charts using HTML/CSS only. We started by testing them out and then continued with the rest.

Responsive version
Responsive version
Step 3

Responsive version

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.

Fine tuning
Step 4

Fine tuning and QA

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.

Project preview
Voilà!

The project is ready!

Check out the video below the see the whole thing in action

Video cover
Delivery

All the hard work is done

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.

Overall

Project Estimate

Price:
$1370.00
Timeframe:
2 Business Days
Previous / Design Conference

Design and coding of a single email template for a design conference. Including responsive design and MailChimp Integration.

  • Design work
  • Responsive
  • Email Best Practices
  • MailChimp Integration
Next / Sweet Sensations Bakery

Coding of 3 email templates including responsive work and CampaignMonitor integration.

  • Responsive
  • CampaignMonitor Integration
  • Newsletter Coding
  • Products Listing
  • Video Email
Project preview

This Is Our Web Let’s shape it together!

© htmlBoutique 2008-2016. All Rights Reserved