Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • Tested With
  • Useful resources
• Author

Overview

• An example of a responsive HTML email template compatible with all email clients.

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• Use in all email clients.

Links

• View Live In Browser

My process

• This follows a workflow of build and test:
• Work structurally leaving in all table borders and cell background colors to help more clearly see what is being created, then removing them at the end.
• Work until a minor development milestone is reached, then run a test.
• Run tests through a validator, accessibility checker, and spam checker.
• First: Build the skeleton - then test.
• Next: Add content - then test (also test for spam score).
• Next: Style colors and fonts - then test.
• Next: Remove borders and backgrounds - then test.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow

Tested With

• Litmus PutsMail
• Validator - w3.org

Useful resources

• Outlook Conditionals - Stackoverflow - Outlook Conditionals Documentation.
• VML - Vector markup Language Documentation used to deliver vector graphics for some email clients.
• Imgbb - Free image Hosting.
• Email Accessibility Article - A great article on accessibility in emails.
• What You Should Know About HTML Email - Great article on things to know.

Author

• Website - Michelle Renee
• Facebook - Creative Software Solutions
• Twitter - @michellere57052
• CodePen - @slimbloodworth
• LinkedIn - Michelle Renee
• GitHub - @slimbloodworth