Email Design Systems Outline

Content to include in an email design system

(Note: starting with the pattern library)

Code Snippets

  • HTML Framework
    • Doctype
    • Head content
    • Title + Subject Line
    • Body Tag
    • Wrapper Divs and Tables
  • CSS
    • define naming convention, when to use IDs and classes
    • when to use !important
    • resets
    • custom styles
    • Outlook specific
    • when to use inline CSS and where
    • Media Queries
  • Header (Logo / Top Nav / Pre-header)
    • layout options
    • spacing between elements
    • logo scaling
    • appearance: desktop/mobile
    • top nav
    • default links
  • Foot content
    • Foot Navigation
    • Social Media
    • Footers
  • Email Body Content
    • Heros
    • Banners
    • Titles
    • Subtitles
    • CSS buttons
    • HTML text areas
    • Link structure and tag elements
    • Image slicing and file size guidelines
    • Font scaling
    • alt tag content
    • accessibility elements
  • Ampscript (Header and Variables)
    • Header Ampscript
    • Variables
    • Marketing Cloud tracking
    • Customization and Personalization
      • Reminders
      • View As Webpage tracking
      • alias tags
  • Assets
    • spacer images, decorative elements etc
  • Litmus Testing and QA practices
    • clients to test against
    • Variations in appearance