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 canshare 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 goingto be adding to our projects will have a negative effecton some web based email clients. There is some jsut OK news.Right now most email distribution companies willrecommend 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 rightor the left and allow the content to flow.And while this strategy will make your e-mailwork in the largest number of clients, it'sgoing to be a hard sell for your design clients who want to have an e-mail that'smuch more interesting.And now for the good news, I'm going to walk youthrough a step-by-step process for creating a much more complex layout.An e-mail design that's got a strategyfor gracefully degrading in older e-mail clients.While incorporating responsive design techniques, so thatit can adapt for smaller screen sizes.

And by the end of the course, we'll have a responsive e-mail that will workon small-screen devices, a whole series ofdesktop 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.

Resume Transcript Auto-Scroll

Author

Updated

12/3/2014

Released

8/30/2013

Designing HTML emails can be challenging, considering the limited capabilities of desktop and web email readers, combined with the small screen sizes of mobile devices. Enter responsive HTML email. Let Chris Converse show you how to design an elegant email that will adapt to varying screen sizes and render correctly in over 30 different mail clients, including Gmail, Yahoo, AOL, and multiple versions of Outlook, as well as Android, iOS, and Windows phones. Learn to add complex features like background graphics, rounded corners, and shadows that don't break your email when they can't be displayed. Then create call-to-action buttons, add animation, and style the whole thing with CSS. Plus, explore tools and services that will help you test your campaigns. Start now and learn what is possible with HTML email.

This course was created and produced by Chris Converse. We are honored to host this content in our library.

Topics include:

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

1h 43m

Duration

974,771

Views

Show MoreShow Less

Q: What are the sizes of the images used in this course?

A: The sizes are:

Large: 638x180

Medium: 478x150

Small: 510x115

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."