Important Notice:

As of September 15, 2016, we no longer publish new courses on this website. We encourage you to use your Digital-Tutors credentials to sign in on Pluralsight where you'll find all new creative courses, skill tests and paths, 1:1 mentoring and more.
Creating Responsive Product Emails in Photoshop and HTML
See Details
Released Feb 2, 2015
Andy Mitchell

Guest Tutor

Andy Mitchell
In this Photoshop and HTML tutorial, we'll learn to design and develop a responsive email intended to promote and market a consumer product utilizing the popular 2-to-1 column method of responsive design.

We'll start with the structure of the email using wireframes for both desktop and mobile versions and design the email based on the wireframe. Next, we'll go over a popular email service provider, MailChimp, which we'll eventually use to prepare our coded email for delivery and to review two popular HTML email boilerplates.

Then, we'll code out the email using media queries and review some helpful practices for developing a responsive email that can perform optimally across different platforms.

By the end of the Photoshop and HTML training, you'll have learned how to design a sales-targeted email that is compatible across multiple platforms while being developed using popular techniques and finally tested and distributed using MailChimp.
Introduction and project overview
1

Introduction and project overview

 
01:06
Reviewing the wireframe
2

Reviewing the wireframe

 
08:34
Designing the email structure from the wireframe
3

Designing the email structure from the wireframe

 
11:01
Adding content to the email design
4

Adding content to the email design

 
12:49
Adding imagery to the email design
5

Adding imagery to the email design

 
13:24
Mocking up the responsive email design
6

Mocking up the responsive email design

 
12:07
Getting started with MailChimp
7

Getting started with MailChimp

 
10:47
Working with email boilerplates
8

Working with email boilerplates

 
10:55
Coding the framework for the responsive email
9

Coding the framework for the responsive email

 
11:42
Adding tables to the responsive email
10

Adding tables to the responsive email

 
13:21
Adding content to the responsive email
11

Adding content to the responsive email

 
12:24
Optimizing the HTML for performance
12

Optimizing the HTML for performance

 
08:55
Correcting email client anomalies
13

Correcting email client anomalies

 
07:54
Running the email through quality assurance
14

Running the email through quality assurance

 
13:51
Reviewing ways to ensure a successful email design
15

Reviewing ways to ensure a successful email design

 
03:23