# HTML Email Development Cheatsheet
## Sources:
- https://frontendmasters.com/courses/html-email-v2/background-images/
- https://github.com/rodriguezcommaj/frontendmasters
- https://codepen.io/collection/21b7ddd5c58aafc450c35c46e7cba9b5?grid_type=list
## Table of Contents
- [Basics](#basics)
- - [Basic HTML Email](#basic-html-email)
- - [CSS Resets](#css-resets)
- - [Email friendly HTML](#email-friendly-html)
- - [Email friendly CSS](#email-friendly-css)
- [Links & Buttons](#links-&-buttons)
- [Images](#images)
- - [Responsive Images](#responsive-images)
- - [Background Images](#background-images)
- [Accessibility](#accessibility)
- [Layouts](#layouts)
- [Mobile Emails](#mobile-emails)
- [Interactivity](#interactivity)
## Basics
- Marketing emails should have unsubscribe links
- Use email testing tools like [email on acid](https://www.emailonacid.com/) or [litmus](https://www.litmus.com/extension/)
- Use [Putsmail](https://putsmail.com) to enter html and it will send it out as an email
- Use [Can I Email](https://caniemail.com) or [Campaign Monitor](https://campaignmonitor.com) or [Fresh Inbox](https://freshinbox.com) to see what's supported in which email clients. just like `caniuse.com`.
- You can use tools to help you build emails like `Litmus builder`, `mjml.io`, `Inky` (from foundation.zurb), `Maizzle` to help you.
- Support channels: `email.geeks.chat`, `litmus.com/community`, `thebetter.email`
### Basic HTML Email
The basic HTML for Emails looks pretty much like the basic HTML for a website
```HTML
Document
```
- `lang` make sure to pass the proper lang for screen readers to know in which language tho read the text
- `body style=` we want to reset the margins and paddings to make sure that the email client does not add something weird to our emails
### CSS Resets
- Email clients add CSS to parts of the email on their own. I.e. highlighting times, phones, dates etc (to add to the calendar or call)
- We want to keep the behavior but improve it's styling
```
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* GMAIL BLUE LINKS */
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* SAMSUNG MAIL BLUE LINKS */
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
```
Taken from [Rodrigues Commajs example](https://github.com/rodriguezcommaj/frontendmasters/blob/master/Code%20Examples/Background-Image.html)
- Text size 100%: to make sure that they don't adjust the font-size settings (i.e. ios automatically bumps up small font-sizes to minimum 14px)
- mso-table: makes sure that there is no spacing around tables
- interpolation-mode: improves quality of imagery
- style resets: make sure the doc. renders as intended
- Link overrides: to make sure that the links that are automatically added by the email client don't get custom styling
### Email friendly HTML
- Use these for most things: `div`, `span`, `h1`-`h6`, `p`, `strong`, `em`, `img` (simple html tags)
- Most structuring is done with `table`s
- All URLs should be absolute URIs that also contain the protocol, not relative. So `https://google.com/image.jpg` instead of `/image.jpg` or `google.com/image.jpg`.
- `` is completely deprecated but can be used to centering parts in outlook.
### Email friendly CSS
- Don’t use Linked Stylesheets. A lot of email clients will remove those. Use embedded styles or even better inline styles.
- For text: `color`, `font-family`, `font-size`, `font-style`, `font-weight`, `line-height`, `text-align`.
- For block-level: `margin`, `padding`, `width`, `max-width` (might not always work), `border`.
- Make sure to search online to see what CSS properties are supported in what email client.
- Use pixel sizing `px` instead of relative units etc.
- You can use shorthands. i,e, `margin: 40px 0;` or `margin: 0 auto` to center the content
## Links & Buttons
- Don't use images for buttons
- Use descriptive links (not this "click here", use "read the article" for example)
- Embrace link conventions (i.e. blue and underlined text for links)
- Don't just rely on color. Don't underline things that are not links (might frustrate the user into thinking it's a link)
### Bulletproof buttons
- from https://buttons.cm/ (most reliable):
```html
```
- Padding based:
```html
```
- Border based
```html
```
## Images
- Make them responsive by default
- Use alt text describing the image
- Stick to standards: jpg, png, gif
### Responsive Images
- Set a fixed width for outlook `![]()
`
- `display: block; max-width: 100%; min-width: 100px; width: 100%;` to make them adjust across screen sizes
i.e.
```html
```
### Background Images
- Most reliable on table cells (td)
- Use both: HTML attributes and inline CSS
i.e.
```html
```
## Accessibility
- Left align longer text (center align only short text/headings etc.)
- Keep color contrast high
- Create a strong visual hierarchy
- Focus on readability
- Keep layouts simple and usable
- Use real text instead of images
- Keep tables quiet using `role="presentation"`
- Include text alternatives for images
- Include the language of an email `lang="de"`
### Testing
- Close your eyes and use a real screen reader: NVDA, VoiceOver, JAWS, Browser Extensions (NoCoffeee Vision Simulator, silktide, toadly, lighthouse), Litmus accessibility checker.
## Layouts
- Think in modules
- Use `role="presentation"` on any table
- Don't use table headers, body, footer
- Each component lives in their own rows/tables
- Override defaults using HTML attributes
- Most styles should be included in table tags
Boilerplate:
```html
```
- Basic structure is: Fluid table => Fixed table => Fluid table => Fixed table
## Mobile Emails
- For emails it makes sense to design in desktop first because otherwise you'd get the mobile version on the desktop as the queries don't always work.
- You can use media queries
- Still work with tables but make those responsive
i.e.
```css
@media screen and (max-width: 600px) {
.mobile { width: 100% !important }
.block { display: block !important; width: 100% !important; }
}
```
And add them to the tables i.e. to make them stack.
### Hybrid/Spongy Coding
- Fluid by default
- max-width
- MSO ghost tables:
```
|