Crafting HTML Email

Book description

Learn the secrets that HTML email pros use to create effective emails that work well in every single email client!

Emails are part of almost every web project, from password reset to order confirmations to marketing emails. Yet coding HTML emails is dreaded among even the most experienced web developers as they can be tricky, given the multiple quirks of different email clients. This short book explains modern HTML email best practices, from how to deal with multiple email clients, to adding interactivity (yes you can do that!), to accessibility, and more. We'll finish with a complete case study: a redesign of SitePoint's very own email newsletter. Stop worrying about HTML email and learn to love the craft!

Publisher resources

View/Submit Errata

Table of contents

  1. Crafting HTML Email: Beautiful Emails That Work Everywhere
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. About the Author
  7. Preface
    1. Who Should Read This Book?
    2. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
    3. Supplementary Materials
  8. Getting Started
    1. Email Isn’t Dead
    2. HTML Emails Aren’t Stuck in the 1990s
    3. Defining an Email Client
    4. “Email Developer” Is a Job
    5. Conclusion
  9. Chapter 2: Essential Best Practices
    1. Supporting the Outlooks
      1. How the Outlook Rendering Engine Works
      2. Conditional Comments
      3. mso- Properties
      4. VML
      5. Rendering at 120dpi
    2. Making Your Emails Work without <style>
    3. Avoiding Automatic Links
    4. Using Real URLs
    5. Adding an Empty <head>
    6. Keeping Email Sizes below 102KB
    7. Removing CSS Comments
    8. Using an HTML5 Doctype
    9. Conclusion
  10. Chapter 3: Adding Interactivity to HTML Emails
    1. Hover Effects on Link Buttons
    2. Swapping Images on Hover
    3. Toggling Content on Click
      1. A Basic Checkbox
      2. Wrapping a Checkbox inside a Label
      3. Conditional Comments for Outlook
      4. Hiding the Checkbox in Other Email Clients
      5. Using the ~ General Sibling Combinator
    4. Conclusion
  11. Chapter 4: Accessibility in HTML Emails
    1. Using Semantic Markup
      1. Adding role="presentation" to Tables
      2. Using Headings, Paragraphs, and Lists
      3. Adding role="article"
    2. The alt Attribute
      1. Setting an Empty alt Attribute
      2. Setting Appropriate Alternative Text
    3. The lang Attribute
    4. Conclusion
  12. Chapter 5: A Case Study: Redesigning SitePoint’s Weekly Newsletter
    1. A Full-width Header
    2. A More Semantic Article Block
    3. Responsive versus Mobile First
    4. Conclusion

Product information

  • Title: Crafting HTML Email
  • Author(s): Remi Parmentier
  • Release date: April 2022
  • Publisher(s): SitePoint
  • ISBN: 9781925836509