unset property is a combination property that resets a property to its inherited value. It behaves like the inherit and the initial keywords, but it properly selects the right value for you. Unfortunately, unset is not fully supported in Internet Explorer. Because of this all unset values have the correct inherit or initial value applied.
| Class | +Output | +Use Case | +
|---|---|---|
| .bar | +border-radius: 5px; | +Rounding all four corners of a simple email. | +
| .btr | +border-top-left-radius: 5px; border-top-right-radius: 5px; |
+ Rounding the top corners of a complex promotional email in one location… | +
| .bbr | +border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; |
+ …and rounding the bottom corners in another location. | +
-
+
- + + + Small + + +
- + + + Large + + +
+ We can use MSO (Microsoft Office) tags to add HTML / CSS anywhere in an email template. This code will be ignored by other email clients. Here’s what it looks like: +
++ Only Outlook will render this table. +
+
+ MSO tags can also be used to add styles targeting Outlook (Outlook supports CSS in the <head>):
+
+ It’s the same thing we used to do to target old versions of Internet Explorer, except it targets Microsoft Office. +
+
+ The main way we use MSO tags in our emails is to create “ghost tables” so hybrid emails don’t fall apart in Outlook. Hybrid design uses inline-block, max-width, min-width to stack table columns. Outlook doesn’t support these CSS properties, so we use MSO tags to create “ghost tables” that apply a fixed width just for Outlook.
+
+ Without the ghost table above, Outlook would display the <div> at 100% width. Learn how we use ghost tables to make our emails responsive.
+
+ We usually target all versions of Outlook using <!--[if mso]>. But sometimes when testing emails in Litmus, an email looks ok in one Outlook version but is broken in another. It’s not common but it happens, and there are a few ways to target specific versions of Outlook while omitting others.
+
+ Using Microsoft Office version numbers allows you to target a specific Outlook version. +
+| Outlook Version(s) | +Code | +
|---|---|
|
+
+ All Windows Outlook
+ Most common
+ |
+ <!--[if mso]> your code <![endif]--> |
+
| Outlook 2000 | +<!--[if mso 9]> your code <![endif]--> |
+
| Outlook 2002 | +<!--[if mso 10]> your code <![endif]--> |
+
| Outlook 2003 | +<!--[if mso 11]> your code <![endif]--> |
+
| Outlook 2007 | +<!--[if mso 12]> your code <![endif]--> |
+
| Outlook 2010 | +<!--[if mso 14]> your code <![endif]--> |
+
| Outlook 2013 | +<!--[if mso 15]> your code <![endif]--> |
+
| Outlook 2016 | +<!--[if mso 16]> your code <![endif]--> |
+
+ Using operators allows you to create conditional expressions for targeting multiple Outlook versions. +
+| Code | +Description | +Example | +
|---|---|---|
gt |
+ greater than | +<!--[if gt mso 14]> Everything above Outlook 2010 <![endif]--> |
+
lt |
+ less than | +<!--[if lt mso 14]> Everything below Outlook 2010 <![endif]--> |
+
gte |
+ greater than or equal to | +<!--[if gte mso 14]> Outlook 2010 and above <![endif]--> |
+
lte |
+ less than or equal to | +<!--[if lte mso 14]> Outlook 2010 and below <![endif]--> |
+
| |
+ or | +<!--[if (mso 12)|(mso 16)]> Outlook 2007 / 2016 only <![endif]--> |
+
! |
+ not | +<!--[if !mso]><!--> All Outlooks will ignore this <!--<![endif]--> |
+
+ Media queries are a standard way to optimize layouts for small screen sizes on the web. In the email world, though, there are some “small screen scenarios” where media queries aren’t supported (eg. some Gmail Apps) or only partially supported (eg. some Android device native mail apps). +
+ {% header {element: 'h3', text: 'Hybrid Design'} %} +
+ Hybrid design uses inline-block, max-width, min-width, and ghost tables stack columns without media queries while imposing a fixed, desktop width for Outlook.
+
+ In this example, the two columns will display side-by-side on wide, desktop displays and stack on top of each other in narrow, mobile displays. The promotional email template uses this technique in a few places. +
+ {% header {element: 'h3', text: 'Media Queries'} %} ++ Once a hybrid baseline is set, media queries can be used to fine-tune a responsive email layout. Since columns are (hopefully) already stacked, media queries can be used to change the width and text alignment in small viewports. +
+| Class | +Description | +
|---|---|
| stack-column | +Makes table columns 100% wide and stacks them in source order. | +
| stack-column-center | +Makes table columns 100% wide, stacks them in source order, and centers everything inside. | +
+ Default desktop padding for email templates is 30px. Utility classes can be used to reduce spacing to 20px on smaller viewports. +
+| Class | +Output | +
|---|---|
| .sm-p | +padding: 20px; | +
| .sm-pt | +padding-top: 20px; | +
| .sm-pb | +padding-bottom: 20px; | +
| .sm-pr | +padding-right: 20px; | +
| .sm-pl | +padding-left: 20px; | +
| .sm-py | +padding-top: 20px; padding-bottom: 20px; | +
| .sm-px | +padding-right: 20px; padding-left: 20px; | +
| .sm-mb | +margin-bottom: 20px; | +
+ It’s safe and accessible to use semantic HTML tags like <h>, <p>, and <ul> for text in email just as we do for the web. The main difference in email is that CSS should be written inline to specify intended styles (like the color of an <a href> tag) and zero out unintended defaults (like the margin around a <p> tag)
+
A lead paragraph with slightly larger text lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est.
+A regular paragraph with strong and italic text, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est. Sed non tincidunt erat, ut commodo augue.
+A paragraph with no margin (useful for the last paragraph in a section).
+A lead paragraph with slightly larger text lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est.
+A regular paragraph with strong and italic text, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est. Sed non tincidunt erat, ut commodo augue.
+A paragraph with no margin (useful for the last paragraph in a section).
+I’m a headline
+I’m a subheadline
+{% endhighlight %} +I’m a headline
+I’m a subheadline
+-
+
- You get a list item. +
- And you get a list item! +
- Everyone gets a list item! +
-
+
- You get a list item. +
- And you get a list item! +
- Everyone gets a list item! +
-
+
- You get a list item. +
- And you get a list item! +
- Everyone gets a list item! +
-
+
- You get a list item. +
- And you get a list item! +
- Everyone gets a list item! +
+ If email content is written in markdown, we can’t write inline CSS into link tags. Left unstyled, links will appear like this. To style links contained in markdown text, add a class="has-markdown" to any parent tag that might contain a markdown link.
+
@_s("I’m a text string in markdown.")
+@_m("I’m a *bold* [text link](https://www.stackoverflow.com) in markdown.")
+{% endhighlight %} +I’m a text string in markdown.
+I’m a bold text link in markdown.
+class="has-markdown" applies styles defined in the <style> tag. Only email clients that support <style> in <head> will render has-markdown links properly.
+ + Some email clients auto-detect certain text strings (like dates, times, and locations) and automatically convert them into hyperlinks. We can’t remove the link, but we can make the link appear like the text around it by negating a few CSS styles. +
+On Thursday we’ll be doing on planned maintenance on our New York server, so the parts of the site might be unavailable.
+On Thursday we’ll be doing on planned maintenance on our New York server, so the parts of the site might be unavailable.
+{% endhighlight %} + +class="unstyle-auto-detected-links" applies styles defined in the <style> tag. Only email clients that support <style> in <head> will render has-markdown links properly.
+
+ A non-breaking space ( ) can be used to prevent a group of words from breaking onto multiple lines. Useful for keeping names together and preventing typographic orphans and widows.
+
Inspect the line above to see ☝️
+
Now with Stack Overflow you can level up.
+The last sentence shouldn’t produce an orphan.
+@_m("Also works for text written in$nbsp$markdown.", new { nbsp = " ".AsRawHtml() })
+{% endhighlight %} +Now with Stack Overflow you can level up.
+The last sentence shouldn’t produce an orphan.
+Also works for text written in markdown.
++ A visual style used to highlight the most important actions. To avoid confusing users, don’t use more than one primary button within an email. +
++ A visual style used to highlight the most important actions on a dark background. To avoid confusing users, don’t use more than one white button within an email. +
++ All buttons, by default, are secondary buttons. +
+s-btn class with s-btn__primary, s-btn__white or s-btn__outlined applies :hover progressive enhancements defined in the <style> tag. Only email clients that support <style> in <head> will render the :hover.
+
+ All email clients can display .png, .gif, and .jpg images displayed with the <img> tag. .svg images are not well supported, regardless of how they’re referenced, so avoid using these.
+
+ Most images should be coded responsive by default, meaning they’ll scale down proportionately in small viewports. It’s safest to code all images this way, even if they don’t end up scaling in practice. However if we’re confident that an image will never scale, we can display a non-responsive image using less code. +
+ {% header {element: 'h3', text: 'Foreground Image Attributes'} %} +| Name | +Type | +Notes | +
|---|---|---|
src |
+ attribute | +Always set and use full https:// reference. |
+
width |
+ attribute | +Always set to intended desktop width. | +
height |
+ attribute | +Optional. Use only for images that won’t scale. | +
border |
+ attribute | +Always set to 0 to avoid blue outlines on image links. | +
alt |
+ attribute | +Always include but can be left empty if image is ornamental (Eg. alt=""). |
+
width |
+ inline CSS | +[Responsive] Always set to 100% for responsive images. Optional for static images. |
+
max-width |
+ inline CSS | +[Responsive] Always set to intended desktop width. Optional for static images. | +
height |
+ inline CSS | +[Responsive] Always set to auto for responsive images. Optional for static images. |
+
display |
+ inline CSS | +Generally good practice to use `display:block;` when possible since it negates a few pixels of unwanted space below images in some clients. | +
.g-img |
+ class | +Advisable for images larger than ~300px wide. Prevents gmail from displaying an image download icon over images. | +
+
+ Background images allow us to place additional HTML content on top of them, one of the few reliable ways to provide layering possibilities in email. A benefit of using background images over foreground images is, when paired with a background color, the HTML content on top of the background image remains accessible even when images are disabled. +
++ Background images can be complicated to implement in email, as many properties need to be defined once in CSS and again in VML for Windows Outlook and Win10 Mail. +
+ {% header {element: 'h3', text: 'Background Image Attributes'} %} +| Name | +Type | +Notes | +
|---|---|---|
background-image |
+ inline CSS | +Always set and use full https:// reference. |
+
background-position |
+ inline CSS | +Optional to set the size of the image. | +
background-size |
+ inline CSS | +Optional to set the position of the image. | +
background-color |
+ inline CSS | +Always set to make foreground HTML legible if background image doesn’t load. | +
width |
+ VML in <v:rect> |
+ Always set to full container width. VML doesn’t account for padding, adjust as necessary. | +
height |
+ VML in <v:rect> |
+ Always set to full container height. VML doesn’t account for padding, adjust as necessary. | +
src |
+ VML in <v:fill> |
+ Always set and use full https:// reference. |
+
color (background color) |
+ VML in <v:fill> |
+ Always set to make foreground HTML legible if background image doesn’t load. | +
| + Foreground HTML content. + | +
|
+
+
+
+
|
+
+ Questions, jobs, and candidates can be tagged with up to 5 tags. Individual tags should not break onto multiple lines, though a list of tags can. +
+s-tag class applies :hover progressive enhancements defined in the <style> tag. Only email clients that support <style> in <head> will render the :hover.
+ Team Icon and Names should be placed in a prominent place to identify the private Team an email is referencing. If spacing is tight, an icon-only version is also available.
+| + T + | + ++ Team Name + | + +
| + T + | ++ Team Name + | +
+
| + T + | +
https://stackoverflow.com/c/team-name/admin/settings/theme) on Stack Overflow or Stack Overflow for Enterprise.
+ - Use margin block-level typography tags like <h>, <p>, <ul>, and <li>... and use padding on <td>’s. + Use margin block-level typography tags like <h>, <p>, <ul>, and <li>... and use padding on <td>s.
Outlook only honors margins on typography tags, and only honors padding on <td> tags. Its interpretation of spacing on other tags like <table>, <div>, and <img> tags is sketchy, so it’s best to avoid spacing with those. diff --git a/docs/email/index.html b/docs/email/index.html index bc71abdca9..cc718df827 100644 --- a/docs/email/index.html +++ b/docs/email/index.html @@ -9,25 +9,22 @@
Templates
Starting points for creating new emails.
+ 
+ 
+ 
+ 