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.
What you'll learn
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.
Table of contents
- Reviewing the Wireframe 8m
- Designing the Email Structure from the Wireframe 11m
- Adding Content to the Email Design 13m
- Adding Imagery to the Email Design 13m
- Mocking up the Responsive Email Design 12m
- Getting Started with Mailchimp 11m
- Working with Email Boilerplates 11m
- Coding the Framework for the Responsive Email 12m
- Adding Tables to the Responsive Email 14m
- Adding Content to the Responsive Email 13m
- Optimizing the HTML for Performance 9m
- Correcting Email Client Anomalies 8m
- Running the Email Through Quality Assurance 14m
- Reviewing Ways to Ensure a Successful Email Design 3m
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. His interest in the interactive dates back to his previous career in audio engineering when he did sound design for “new media”. Andy has worked in both in-house and agency roles creating for clients such as NOPI Motorsports, Care.org, College Board, Quebecor, Benjamin Moore, Callaway Golf, Kodak Dental, Verizon, Coca-Cola, Home Depot, ... more