updated
12/4/2014released
8/30/2013this 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
duration
views
- [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?
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."
share this video
embed this video
video: previewing the final project