Creating Responsive Product Emails in Photoshop and HTML

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. Software required: Photoshop CS6, HTML, Dreamweaver CS6.
Course info
Level
Intermediate
Updated
Feb 2, 2015
Duration
2h 31m
Table of contents
Description
Course info
Level
Intermediate
Updated
Feb 2, 2015
Duration
2h 31m
Description

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. Software required: Photoshop CS6, HTML, Dreamweaver CS6.

About the author
About the author

Andy Mitchell is an interactive designer in the Atlanta area and currently designs email, banner, and social media placements for an agency in the retail sector.

Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
Hi everyone, my name is Andy Mitchell. I'm an interactive designer in Atlanta, Georgia. My latest work includes banner, social media, and email design for various retail clients. In this course, we're going to go over designing and developing a product sales oriented email, which will also be responsive. Some of the key takeaways from watching this course include learning how to design an email structure intended to work in both desktop and mobile platforms, design a responsive email with a two to one column method, develop a desktop and responsive compatible email using standard methods, as well as CSS and media queries, and use MailChimp to process, test, and deliver your email. By the end of the training, you'll have learned how to design a sales targeted email compatible across multiple platforms, developed using popular techniques, and finally tested and distributed using MailChimp. I'm excited to work with Digital-Tutors and share these techniques with fellow creatives like yourself, so let's get started with the first lesson.