HTML Email with Corresponding Landing Page Example

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See the social media share links when they click the share icon

Screenshot

Links

• View Email in Browser
• View Landing Page Live

My process

Email Template

• 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.

Landing Page

• This landing page uses Bootstrap.

Built with

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

Tested With

• Litmus PutsMail
• Validator - w3.org
• Mailchimp

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.
• Bootstrap.
• Font Awesome CDN.

Author

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