Creating a Responsive HTML Email | Chris Converse | Skillshare

Creating a Responsive HTML Email

Chris Converse, Designer & Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
34 Lessons (1h 43m)
    • 1. Preview the final project

      0:42
    • 2. About the exercise files

      0:50
    • 3. Setting expectations about HTML email

      1:31
    • 4. Beginning the project

      1:49
    • 5. Creating the banner and background graphics

      3:26
    • 6. Creating the content graphics

      2:20
    • 7. Setting up the base layout structure

      3:36
    • 8. Styling the table row for the logo

      2:24
    • 9. Styling the table row for the headline

      2:32
    • 10. Styling the table row for the banner and content

      2:51
    • 11. Styling the table row for the promos

      2:55
    • 12. Styling the table row for the callouts

      2:47
    • 13. Styling the table row for the footer

      1:10
    • 14. Styling anchor links as buttons

      2:06
    • 15. Creating a call-to-action button

      4:33
    • 16. Adding CSS media queries to your HTML email

      4:22
    • 17. Styling the headline and banner for smaller screens

      3:14
    • 18. Styling the content and footer for smaller screens

      3:04
    • 19. Styling the promos for smaller screens

      4:45
    • 20. Rearranging the callouts for medium screens

      5:35
    • 21. Stacking the callouts for small screens

      5:29
    • 22. Adding inbox preview text

      1:39
    • 23. Adding animation to your HTML email

      1:59
    • 24. Using web fonts with your HTML email

      2:20
    • 25. Adding HTML5 video into HTML email

      6:13
    • 26. Encoding and embedding Base64 images

      4:44
    • 27. Using High Definition (Retina®) graphics in your HTML Email

      10:50
    • 28. Validating your HTML code

      1:42
    • 29. Testing your email in 30+ HTML email clients

      5:09
    • 30. Suggestion for Yahoo! Mail incompatibilities

      1:11
    • 31. Suggestions for Blackberry 5 layout correction

      0:54
    • 32. Suggestion for supporting Lotus Notes 6.5, 7, and 8.5

      1:14
    • 33. Planning alternate layouts

      2:31
    • 34. Where to go from here

      0:58

About This Class

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.

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