Join Chris Converse for an in-depth discussion in this video What you should know, part of Creating a Responsive HTML Email.
- View Offline
Now, before we get started in this course, I want to set some expectations. I want to set expectations, for you in this particular course. And give you some information that you can share with your clients on setting their expectations. With HTML email, there's some good news and bad news. Now the bad news is that HTML emails are not web pages. This is because the amount of HTML and CSS supported in each email client varies. In some cases the responsive design techniques we are going to be adding to our projects will have a negative effect on some web based email clients. There is some jsut OK news. Right now most email distribution companies will recommend that your email remain extremely simple.
A lot of times these suggestions will be that you keep your email to one column. You simply float or align images to the right or the left and allow the content to flow. And while this strategy will make your e-mail work in the largest number of clients, it's going to be a hard sell for your design clients who want to have an e-mail that's much more interesting. And now for the good news, I'm going to walk you through a step-by-step process for creating a much more complex layout. An e-mail design that's got a strategy for gracefully degrading in older e-mail clients. While incorporating responsive design techniques, so that it can adapt for smaller screen sizes.
And by the end of the course, we'll have a responsive e-mail that will work on small-screen devices, a whole series of desktop e-mail applications, and even web-based e-mail clients. And we'll even see how the design will gracefully degrade, where we'll lose things like background graphics or rounded corners. But we'll still be able to maintain the integrity of the design, even when some e-mail clients don't support all of the design features. So now with our expectations set, let's start building out our project.
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