Project Case Study

Design Conference PSD to Email Conversion

PSD to Email Conversion for a single responsive email template including design work, MailChimp integration

  • Design work
  • Responsive
  • Email Best Practices
  • MailChimp Integration
  • Counters
  • Content filtering


For this project the client did not have any designs provided, so we had to come up with a few concepts. We received several well-prepared wireframe mockups that we had to follow, so it worked out very well.

Project design


The client wanted a simple email template they could use to send to all their possible attendants.

  • We had to do the design based on their wireframes.
  • We had to fully stick to their style guide.
  • We had to follow the best practices for email templates coding.
  • It had to be as clear and intuitive as possible.

Clearing up the details

Although everything was pretty clear, we had to discuss a few things to make sure we were on the same page.

  • Did we have to make the email template responsive (optimized for mobile clients)?
  • Which service would they use to send the emails?
  • Did they have the content we were supposed to add?
  • Which social channels would they use?

These were the details we discussed with our client and we cleared up everything.

And we started...

The time frame was 4 Business Days: two for the design and two for the coding.

Project design
Step 1


Zack (project manager) assigned the project to the designer and he also involved a developer. This way they grouped a team of three people that could easily collaborate and help each other.

After completing the first version, we sent it to the client. They liked it a lot and wanted us to continue with the development right away.

Step 2


For the coding of html emails we used our own custom framework (Boilerplate), use for rapid development. It also helped us keep the code well organized and consistent.

Project responsive
Project responsive
Step 3

Responsive version

For the responsive version of the email template we decided to use the developer’s best judgment since he already knew what needed to be achieved. This helped us speed up the process. Most of the sections were standard, so the two things we had to do were adjust the content in a single column layout and test the responsive email template in various email clients like Outlook and Apple Mail.

MailChimp integration
Step 4

MailChimp Integration

The design and coding phases were completed and the template was optimized and ready for MailChimp. The only thing left to be done was upload it in MailChimp. The client needed our help because he did not have any previous experience. He granted us access to his MailChimp account. We packed the code and the images, uploaded the template and set up a new campaign, so he could get started.

Project preview

The project is ready!

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

Video cover

All the hard work is done

We compiled the PHP framework files to a standard HTML email which we uploaded on our preview server. In the end the client received a fully responsive, MailChimp compatible email template with preview screenshots taken on more than 35 email clients.


Project Estimate

4 Business Days
Previous / Woon Furniture

A full set of 11 different email templates: transactional, newsletter, and promotional. All of them had to be optimized for mobile devices, i.e. made responsive.

  • Responsive
  • Best Email Practices
  • Transactional Emails
  • Modern Design
  • Newsletter Email
Next / World Wide Stats

Six responsive email templates, mainly transactional which had to be optimized to work with both MailChimp and CampaignMonitor.

  • Responsive
  • MailChimp Integration
  • Custom Charts
  • Transactional Emails
  • Dynamic Sections
Project preview

This Is Our Web Let’s shape it together!

© htmlBoutique 2008-2022. All Rights Reserved