This course was created and produced by Chris Converse. We are honored to host this content in our library.
- Creating the graphics
- Setting up the base layout structure
- Styling the table rows for the headline, banner, etc.
- Creating buttons
- Adding CSS media queries
- Styling the content
- Incorporating animation and web fonts
- Validating your code
- Testing in various email clients
Skill Level Beginner
- [Voiceover] Hi, I'm Chris Converse, and in this course we're gonna create a responsive HTML e-mail design, featuring a rather complex layout that will adapt to varying screen sizes. Now, considering that older e-mail clients require us to use table-based layouts, I'll show you strategies for making a table-based layout that's responsive. And this technique will render acceptably in over 30 of today's most popular web-based and native-application-based e-mail clients. And another feature of the design that we're gonna build is its ability to gracefully degrade in older e-mail clients. We'll design this with background graphics, rounded corners, and shadows but we'll apply these in such a way that they don't sacrifice the design's integrity if they're not supported in certain e-mail clients.
So, I hope this course sounds interesting to you, and if so, let's get started.
Q: What are the sizes of the images used in this course?
<div>A: The sizes are: </div><div> </div><div>Large: 638x180 </div><div>Medium: 478x150 </div><div>Small: 510x115</div>
Q: This course was updated on 11/26/2013. What changed?
A: We added two new movies to Chapter 5, "Adding HTML5 video into HTML email" and "Encoding and embedding base64 images."
Q: This course was updated on 12/03/2014. What changed?
A: We added one bonus movie, "Using high-definition graphics in your HTML email."