335 lines
12 KiB
Markdown
335 lines
12 KiB
Markdown
# 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
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
|
||
</style>
|
||
</head>
|
||
<body id="body" style="margin: 0 !important; padding: 0 !important;">
|
||
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
- `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`.
|
||
- `<center></center>` 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
|
||
<div><!--[if mso]>
|
||
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
|
||
<v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#556270" />
|
||
<w:anchorlock/>
|
||
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
|
||
</v:roundrect>
|
||
<![endif]--><a href="http://"
|
||
style="background-color:#556270;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a></div>
|
||
```
|
||
|
||
- Padding based:
|
||
|
||
```html
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td align="center" style="padding: 60px;">
|
||
<table border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td brcolor="#229efd" style="padding: 12px 18px 12px 18px; border-radius: 3px" align="center">
|
||
<a href="…" target="_blank" style="font-size: 18px; text-decoration: none; display: inline-block;">Button</a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
```
|
||
|
||
- Border based
|
||
|
||
```html
|
||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td align="center" style="padding: 60px;">
|
||
<table border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<td>
|
||
<a href="…" target="_blank" style="font-size: 18px; text-decoration: none; display: inline-block; color: #ffffff; background-color: #229efd; border-top: 12px solid #229efd; border-bottom: 12px solid #229efd; border-right: 18px solid #229efd;border-left: 18px solid #229efd;">Button</a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
```
|
||
|
||
|
||
## 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 `<img … width="600" border="0" … >`
|
||
- `display: block; max-width: 100%; min-width: 100px; width: 100%;` to make them adjust across screen sizes
|
||
|
||
i.e.
|
||
|
||
```html
|
||
<img width="600" border="0" style="display: block; max-width: 100%; min-width: 100px; width: 100%" src="img/image.jpg" alt="puppy licking ice-cream">
|
||
```
|
||
|
||
### Background Images
|
||
|
||
- Most reliable on table cells (td)
|
||
- Use both: HTML attributes and inline CSS
|
||
|
||
i.e.
|
||
|
||
```html
|
||
<td background="image/bg.jpg" bgcolor="#229efd" style="background: #229efd url('image/bg.jpg')">
|
||
```
|
||
|
||
## 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
|
||
<!-- Outer Fluid Container Table -->
|
||
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
|
||
<tr>
|
||
<td>
|
||
<!-- Inner Fixed Container Table -->
|
||
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600">
|
||
<!-- Each TR is it's own email "module", i.e. logo, headline, hero image, etc. -->
|
||
<tr>
|
||
<td>
|
||
<!-- logo -->
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<!-- headline -->
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
```
|
||
|
||
- 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:
|
||
|
||
```
|
||
<!--[if (gte mso 9)|(IE)]>
|
||
<table cellspacing="0" cellpadding="0" border="0" width="600" align="center" role="presentation"><tr><td>
|
||
<![endif]>
|
||
```
|
||
|
||
|
||
…content here…
|
||
|
||
<!--[if (gte mso 9)|(IE)]>
|
||
</td></tr></table>
|
||
<![endif]>
|
||
```
|
||
- This will wrap the whole content in tables for Outlook
|
||
- `gte` = greater than or equal, `gt` = greater than, `lte` = less than equal to, `lt` = less than.
|
||
- `9` = Outlook 2000, `10` = 2002, …, `15` = Outlook 2013
|
||
## Interactivity
|
||
- `:hover` pseudo selector works (only when included in the header)
|
||
- gifs
|
||
- movableink (using images that are generated when requested via GET requests. i.e. countdown timer etc.)
|
||
- “The checkbox hack” to create state (by using input labels to toggle checkboxes that changes display with sibling selectors to create interactivity):
|
||
```html
|
||
<input type="radio" class="slide-input" name="slides" id="slide1" checked>
|
||
<input type="radio" class="slide-input" name="slides" id="slide2">
|
||
<input type="radio" class="slide-input" name="slides" id="slide3">
|
||
<label for="slide1" class="slide-label">Slide 1</label>
|
||
<label for="slide2" class="slide-label">Slide 2</label>
|
||
<label for="slide3" class="slide-label">Slide 3</label>
|
||
<div class="slide-content" id="content1">Content 1</div>
|
||
<div class="slide-content" id="content2">Content 2</div>
|
||
<div class="slide-content" id="content3">Content 3</div>
|
||
```
|
||
```css
|
||
.slide-input { display: 'none' }
|
||
.slide-label { cursor: 'pointer' }
|
||
.slide-input ~ .slide-content { display: 'none' }
|
||
#slide1:checked ~ #content1 { display: 'block' }
|
||
#slide2:checked ~ #content2 { display: 'block' }
|
||
#slide3:checked ~ #content3 { display: 'block' }
|
||
``` |