2024-06-21

2024-06-21 14:14:35 +09:00
parent 955bf1c64c
commit 8480fa7c8f
32 changed files with 2258 additions and 19 deletions
--- a/Writerside/topics/Composing-Email.md
+++ b/Writerside/topics/Composing-Email.md
@@ -0,0 +1,335 @@
+# 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' }
+```