Creating a Responsive HTML Email

Design a responsive HTML email that will adapt to varying screen sizes and render correctly in over 30 different email clients, including Gmail, Outlook, and Yahoo.

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
• Using high-definition graphics in your HTML email

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