Email Template Design in Sketch and HTML
In this Sketch and HTML tutorial, you'll learn how to create a responsive email template. Software required: Sketch 3, Brackets 1.4, web browser.
What you'll learn
In this Sketch and HTML tutorial, you'll learn how to create a responsive email template. With the explosion of mobile devices, you'll never know when someone is opening an email on their desktop or on their mobile device. You need to be prepared with a responsive design that works no matter where it's displayed. By the end of this Sketch and HTML training, you'll have followed along with a production process that includes different stages for approvals, implementation and testing, all to learn the best practices for creating a responsive email template by designing in Sketch and coding in HTML. Software required: Sketch 3, Brackets 1.4, web browser.
Table of contents
- Exploring Best Practices for Designing Responsive Emails 8m
- Mocking up Responsive Email in Sketch 8m
- Designing an Email Header 11m
- Placing Text, Fonts, and Dummy Copy Blocks 10m
- Adding Images and Site Modules 8m
- Exporting from Sketch 10m
- Discussing HTML Design for Email 10m
- Creating a Responsive HTML Document 10m
- Coding an Email Header 10m
- Creating a Row of Icons 6m
- Laying out Content Modules 10m
- Programming Responsive Images 7m
- Putting It All Together by Inlining Styles 10m
- Delivering a Well-crafted Email 8m
About the author
Jay Boucher is a freelance illustrator and interactive designer creating games and websites for young people. He strives to create work that is both entertaining and intuitive to use, a combination of visual fun and UI best practices. Jay spent much of the 2000s as Senior Designer for MTV.com, designing sites for shows like "Pimp My Ride" and "The Real World", as well as cable channels MTV2 and MTV Tr3s. He has worked with Hearst Digital, Condé Nast and Westwood One Radio Network and currently c... more