Buy and Download - Lynda.com Creating a Responsive HTML Email

2013
lynda.com
Chris Converse
1h32m
English

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

Introduction
Previewing the final project
About the exercise files
What you should know
A look at the beginning project
1. Creating the Graphics
Creating the banner and background graphics
Creating the content graphics
2. Creating the HTML Email
Setting up the base layout structure
Styling the table row for the logo
Styling the table row for the headline
Styling the table row for the banner and content
Styling the table row for the promos
Styling the table row for the callouts
Styling the table row for the footer
3. Creating Buttons with HTML and CSS
Styling anchor links as buttons
Creating a call-to-action button
4. Adding CSS to the Email
Adding CSS media queries to your HTML email
Styling the headline and banner for smaller screens
Styling the content and footer for smaller screens
Styling the promos for smaller screens
Rearranging the callouts for medium screens
Stacking the callouts for small screens
5. Pushing the Envelope
Adding inbox preview text
Adding animation to your HTML email
Using web fonts with your HTML email
Adding HTML5 video into HTML email
Encoding and embedding Base64 images
6. Validation and Testing
Validating your HTML code
Testing your email in 30+ HTML email clients
Suggestion for Yahoo! Mail incompatibilities
Suggestions for BlackBerry 5 layout correction
Suggestion for supporting Lotus Notes 6.5, 7, and 8.5
Conclusion
Exploring alternative layouts
Where to go from here