repository·main·Indexed 26 days ago
https://github.com/emailmonday/cerberusA collection of responsive and accessible HTML email patterns and templates designed for high compatibility across various screen sizes and email clients, including Outlook and Gmail. Version 3.3.0 provides three template approaches: cerberus-fluid.html for simple layouts, cerberus-responsive.html for complex layouts using media queries, and cerberus-hybrid.html for clients without media query support. The documentation includes best practices for table-based layouts, inline CSS, image optimization, accessibility guidelines, and VML for background images.
@media (prefers-color-scheme: dark) block located within the <head> section of the HTML.Hybrid design uses inline-block, max-width, and min-width to stack columns, but Outlook does not support these properties. To prevent layout collapse, wrap your responsive <div> elements in "ghost tables" using MSO tags. The ghost table provides a fixed width that Outlook respects, while other clients use the <div> styling.
Example of wrapping a 340px wide container:
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="340">
<![endif]-->
<div style="display:inline-block; width:100%; min-width:200px; max-width:340px;">
Outlook can’t render the CSS in this DIV but other email clients can, so we wrap this in a ghost table that replicates the DIV’s desktop style. In this case, a container 340px wide.
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->Improve accessibility and avoid spam filters by following these practices:
role="presentation" to all layout tables to prevent screen readers from reading structural cell data. Use aria-hidden="true" on purely presentational elements.<p>, <h>, <strong>, and <em> to allow screen readers to navigate content effectively.alt attribute on every image. Use descriptive text for content and an empty alt="" for decorative images. Avoid leaving it blank, as screen readers may read the filename.To ensure images scale down proportionately in small viewports, use a responsive approach. This involves setting the width attribute to 100% and using max-width in the inline style attribute to define the intended desktop width. It is also recommended to use height: auto and display: block to prevent unwanted spacing and ensure proper scaling.
Key Attributes & Styles:
src: Must use a full https:// absolute path.border: Always set to 0 to avoid blue outlines on image links.alt: Always include; use alt="" for ornamental images.class="g-img": Recommended for images wider than ~300px to prevent Gmail from displaying a download icon.Responsive vs. Static Implementation:
While padding (on <td>) and margin (on <h>, <p>, etc.) are preferred for general spacing, they cannot be used reliably to space out <table> or <tr> elements. In these cases, use a spacer <tr> containing a <td> with a specific height.
To ensure the spacer works correctly across all clients:
aria-hidden="true" to hide the spacer content from screen readers. inside the cell, as some clients collapse the height if the cell is empty.style="font-size: 0; line-height: 0px;" to prevent the from inheriting and adding unintended space.Cerberus uses the prefers-color-scheme CSS media feature to detect a user's system theme. To implement dark mode, define utility classes within a @media (prefers-color-scheme: dark) block in the <head> of your email template.
Note that dark mode utility classes must be suffixed with !important to ensure they successfully override the inline styles typically used in HTML emails.
<style>
@media (prefers-color-scheme: dark) {
.my-class {
color: white !important;
}
}
</style>
<p style="color: #000000;" class="my-class">
Text that is black in light mode and white in dark mode.
</p><h>, <p>, and <ul> are safe and accessible for email. However, you must write CSS inline to specify intended styles (like color) and to zero out default browser/client margins and paddings.To ensure maximum compatibility with email clients like Microsoft Outlook and various Gmail versions, follow these core principles:
<table> elements for layout instead of <div>s.Refer to Can I Email? for specific HTML & CSS support details.
to prevent specific words from breaking onto multiple lines. This is useful for keeping names together or preventing typographic orphans and widows.Follow these rules to ensure consistent rendering across email clients:
<table border="0" cellpadding="0" cellspacing="0" role="presentation"> for new tables to prevent unwanted spacing and to instruct screen readers to skip structural tags.font-family, font-size, font-weight, line-height, and color. Always place styles directly in the <td> tag rather than <table> or <tr>.align attribute for layout. Avoid float, grid, or flexbox as they lack reliable support in Outlook.align, valign, height, and width for styling, as older rendering engines understand them better than CSS.#ffffff) instead of shorthand (#fff) or rgb() to ensure compatibility with HTML attributes like bgcolor.Some email clients automatically convert text like dates, times, or addresses into hyperlinks. To make these links appear as plain text, wrap the container in a class named unstyle-auto-detected-links and include the following styles in your <head>:
<style>
a[x-apple-data-detectors], /* iOS */
.aBn, /* Gmail */
.unstyle-auto-detected-links a {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
</style>