Project Case Study

Sweet Sensations Bakery PSD to Email Conversion

PSD to Email Conversion for three responsive email templates including CampaignMonitor integration

  • Responsive
  • CampaignMonitor Integration
  • Newsletter Coding
  • Products Listing
  • Video Email
Preparation

Design

There were 6 PSD files for the email templates we had to convert - 3 for the desktop versions and 3 for the mobile. They were very sweet, so we couldn’t resist and started working on coding and integrating them in CampaignMonitor. We didn’t have much time.

Design

Requirements

We had to do the conversion for 3 email templates, to optmize them for mobile devices and integrate them in to CampaignMonitor.

Everything was rather straight forward. There was just one catch - we had to complete everything in less than 12 hours because the client wanted to send his campaign on the following day.

These were the requirements, so we started right away.

Clearing the details

We didn’t have much time to discuss the details with the client. We had to think fast and make sure it worked perfectly. Zack prepared a quick summary for the developer.

  • Complete the coding phase in 6 hours.
  • Make sure emails pass all tests.
  • Make them responsive.
  • Integrate them in CampaignMonitor and try with a test campaign.

And we started...

The timeframe was exactly 12 hours.

Slicing
Step 1

Slicing

Due to the nature of the design, large part of the project was to slice the images properly. At the same time we had to make sure images were easily editable and all texts were kept as actual texts instead of slicing them as part of the images.

Step 2

Coding

For producing html emails we had developed our own custom framework (boilerplate) used for rapid development. This framework also helped us keep the code well organized and consistent.

Responsive version
Responsive version
Step 3

Responsive version

We received separate design files for both the desktop and the mobile versions from the client. We could tell by the work they had done for this project that they were real design experts. The mobile version followed the course of the desktop version very well. It was designed according to the best practices. It was a pleasure for the developer to code the concepts.

QA
Step 4

Fine tuning and QA

We completed the coding phase in just a few hours, so Della had just enough time to review the code. She discussed her concerns with Zack and then got back to the developer with the revisions.

There were just a few minor things she noticed, usability issues eg. in the design. We decided that we shouldn’t follow the design blindly, thus making compromises with the usability, so Zack had to explain these differences to the client.

Project preview
Voilà!

The project is ready!

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

Project preview
Delivery

All the hard work is done

We coded the templates and added the CampaignMonitor files in the sources. Zack explained why we did a few things differently and the client agreed. They had an expert in CampaignMonitor, so they decided they would upload everything on their side. We assisted them with just a 2-3 corrections, before they sent the campaign.

Overall

Project Estimate

Price:
$880.00
Timeframe:
1 Business Days
Previous / 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
Next / 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
Project preview

This Is Our Web Let’s shape it together!

© htmlBoutique 2008-2016. All Rights Reserved