forked from emailmonday/Cerberus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
243 lines (241 loc) · 13.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cerberus - Patterns for Responsive HTML Email Templates</title>
<link rel="stylesheet" href="assets/cerberus-docs.css">
</head>
<body>
<div class="outside title cf">
<div class="inside">
<div class="title-text">
<img src="assets/logo.png" alt="cerberus logo" width="75" height="64">
<h1>
<strong>Cerberus</strong>
A few simple, but solid patterns for responsive HTML emails. Even in Outlook and Gmail.
</h1>
<ul class="title-buttons-ul">
<li class="title-buttons-li">
<a href="https://github.com/TedGoas/Cerberus" class="button title-button button-solid"><i class="icon-github-circled"></i> View on GitHub</a>
</li>
<li class="title-buttons-li">
<a href="https://github.com/TedGoas/Cerberus/archive/master.zip" class="button title-button button-outline">Download Zip</a>
</li>
</ul>
</div>
<div class="title-figure">
<img src="assets/phone-outline.png" alt="phone outline">
</div>
</div>
<div class="blueprint"></div>
</div>
<div class="outside body">
<div class="inside cf">
<div class="toc">
<div class="toc-padding">
<ul class="toc-ul">
<li class="toc-li">
<a href="#intro" class="toc-a" data-scroll-nav="0">Introduction</a>
</li>
<li class="toc-li">
<a href="#things" class="toc-a" data-scroll-nav="1">Things to know</a>
</li>
<li class="toc-li">
<a href="#templates" class="toc-a" data-scroll-nav="2">The templates</a>
</li>
<li class="toc-li small">
<a href="#fluid" class="toc-a">Fluid Template</a>
</li>
<li class="toc-li small">
<a href="#responsive" class="toc-a">Responsive Template</a>
</li>
<li class="toc-li small">
<a href="#hybrid" class="toc-a">Hybrid Template</a>
</li>
<li class="toc-li">
<a href="#support" class="toc-a" data-scroll-nav="3">Client Support</a>
</li>
<li class="toc-li">
<a href="#contribute" class="toc-a" data-scroll-nav="4">Contributing</a>
</li>
<li class="toc-li">
<a href="#credits" class="toc-a" data-scroll-nav="5">Credits & Resources</a>
</li>
<li class="toc-li">
<a href="#author" class="toc-a" data-scroll-nav="6">Author</a>
</li>
</ul>
</div>
</div>
<div class="sections">
<blockquote>
<p>Cerberus - <br>
Between mobile, Gmail, and Outlook, HTML email is a three-headed dog from hell.
</p>
</blockquote>
<div class="section" id="intro" data-scroll-index="0">
<h2>Introduction</h2>
<p>Coding regular emails is hard enough by itself. Making them responsive shouldn't add to the headache. A few simple, but solid patterns are all that's needed to optimize emails for small screens.</p>
<p><strong>That's what Cerberus is.</strong>
<p>It's just a few responsive email patterns that go a long way. The code blocks are compartmentalized so that they may be used, combined, and nested to build an email.</p>
<p>Each template is annotated and has good support among popular email clients.</p>
<p>I <a href="http://www.tedgoas.com/blog/cerberus-responsive-email-templates/">wrote a blog post</a> that goes into more detail on why I made this in the first place. Cerberus is <a href="https://github.com/TedGoas/Responsive-Email-XX">Responsive Email XX</a>'s successor.</p>
</div>
<div class="section" id="things" data-scroll-index="1">
<h2>Things To Know</h2>
<ul>
<li>Cerberus is a small collection layout patterns for HTML email. The code is meant to be edited, adapted, and built upon.</li>
<li>The code is largely compartmentalized and annotated in an effort to explain what’s happening so you can add, edit, and remove code with some confidence.</li>
<li>This has been tested in all “popular” email clients, but not every email client out there. <a href="#support">More on that here</a>.</li>
</ul>
</div>
<div class="section" id="templates" data-scroll-index="2">
<h2>The Templates</h2>
<div id="fluid" class="cf">
<figure class="figure-wireframe">
<img src="assets/wireframe-fluid.png" width="800" height="425" class="figure fluid">
<span class="caption">As the layout narrows, the email content reflows and resizes gracefully.</span>
</figure>
<h3>Fluid Template</h3>
<p>Good for simple layouts such as transactional and single column emails.</p>
<p>This template focuses on a fluid layout that sizes itself using percentage-based widths to shrink horizontally on narrow screens. This email layout does not reconfigure at different screen sizes.</p>
<p>If you want a basic template to handle rich text and images, this is a good baseline.</p>
<ul class="buttons-ul">
<li class="buttons-li">
<a href="cerberus-fluid.html" class="button sections-button button-solid">View A Demo</a>
</li>
<li class="buttons-li">
<a href="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-fluid.html" class="button sections-button button-outline"><i class="icon-code"></i> View Raw</a>
</li>
</ul>
</div>
<hr>
<div id="responsive" class="cf">
<figure class="figure-wireframe">
<img src="assets/wireframe-responsive.png" width="800" height="425" class="figure fluid">
<span class="caption">The email layout changes at breakpoints using media queries.</span>
</figure>
<h3>Responsive Template</h3>
<p>Good for more complicated, shape-shifting email layouts that work on <em>some</em> mobile clients.</p>
<p>This template uses media queries to reconfigure the layout for different screen sizes for email clients that support media queries. However, mobile clients that don’t support media queries or the <code><style></code> tag will display a shrunk version of the desktop layout instead. This applies to Gmail, Inbox, and some Android 4.* Mail clients (<a href="http://stylecampaign.com/blog/2012/10/responsive-email-support/">bigger list</a>).</p>
<p>If you’re already comfortable with media queries, the learning curve is relatively low. If total device coverage isn’t required, you can create a responsive email the same way you create a responsive website.</p>
<ul class="buttons-ul">
<li class="buttons-li">
<a href="cerberus-responsive.html" class="button sections-button button-solid">View A Demo</a>
</li>
<li class="buttons-li">
<a href="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-responsive.html" class="button sections-button button-outline"><i class="icon-code"></i> View Raw</a>
</li>
</ul>
</div>
<hr>
<div id="hybrid" class="cf">
<figure class="figure-wireframe">
<img src="assets/wireframe-hybrid.png" width="800" height="425" class="figure fluid">
<span class="caption">The email layout stacks without media queries.</span>
</figure>
<h3>Hybrid Template</h3>
<p>This template uses a hybrid approach to reconfigure the layout for different screen sizes for email clients regardless of media query support. At its core, it uses max-width and min-width to impose rigid baselines (allowing some movement) and imposes a fixed, wide width for Outlook who is shackled to desktop anyway. Once a mobile-friendly baseline is set, media queries progressively enhance the email further in clients that support it.</p>
<p>If you have some email design experience, this template optimizes every popular email client. All the extra Outlook and Gmail code can make these templates quite large and your maths have to be spot on for multi-column layouts.</p>
<ul class="buttons-ul">
<li class="buttons-li">
<a href="cerberus-hybrid.html" class="button sections-button button-solid">View A Demo</a>
</li>
<li class="buttons-li">
<a href="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-hybrid.html" class="button sections-button button-outline"><i class="icon-code"></i> View Raw</a>
</li>
</ul>
</div>
</div>
<div class="section" id="support" data-scroll-index="3">
<h2>Client Support</h2>
<p>Cerberus is tested in the most popular email clients <a href="http://emailclientmarketshare.com/">as reported by Litmus</a> and my own email campaigns. <!--Litmus tests are available for <a href="https://litmus.com/pub/2f27214">template-with-media-queries</a> and <a href="https://litmus.com/pub/13545f9">template-without-media-queries</a>, but -->I've focused on the following clients:</p>
<div class="row cf">
<ul class="col-1-3">
<li class="li-title">Desktop</li>
<li>Outlook 2000/02/03/07/10/13 (Windows)</li>
<li>Outlook 2011/16 (Mac)</li>
<li>Apple Mail</li>
<li>Thunderbird</li>
</ul>
<ul class="col-1-3">
<li class="li-title">Web</li>
<li>Gmail</li>
<li>Outlook.com</li>
<li>Yahoo</li>
<li>Aol</li>
<li>Outlook Web Access</li>
</ul>
<ul class="col-1-3">
<li class="li-title">Mobile</li>
<li>Mail (iOS)</li>
<li>Gmail (iOS, Android 4.4)</li>
<li>Mail (Android 4.4)</li>
<li>Mailbox (iOS)</li>
<li>Inbox (iOS)</li>
<li>Yahoo (iOS)</li>
</ul>
</div>
<p class="warning">When I say “tested”, I mean “email doesn’t fall apart”. I don't mean “I found a way to make media queries work in Gmail” or "Everything is pixel perfect in Outlook."</p>
<p>Any client not listed above should be considered untested. If you feel I’ve left out a popular email client or can suggest a non-destabilizing fix for one, please <a href="https://github.com/TedGoas/Cerberus/issues">submit an issue</a>!</p>
<p>For what it's worth, Litmus (who DOES test every email client out there) chose to include these templates in its <a href="https://litmus.com/email-builder">Email Builder</a>, so there’s that.</p>
</div>
<div class="section" id="contribute" data-scroll-index="4">
<h2>Contributing</h2>
<p>If you would like to help, please <a href="https://twitter.com/tedgoas">@reply me on Twitter</a> or <a href="https://github.com/TedGoas/Cerberus/issues">open an issue</a> to discuss your idea. I'm forever interested in reducing the entropy of this code. I'm most interested in:</p>
<ul>
<li>Fixing existing code that's broken.</li>
<li>Reducing the amount of code.</li>
<li>Improving the documentation and explanations.</li>
</ul>
<p>Also please be mindful the there are <strong>three templates</strong> that have a lot of similarities. Many changes apply to all three.</p>
</div>
<div class="section" id="credits" data-scroll-index="5">
<h2>Credits & Resources</h2>
<div class="row cf">
<div class="col-1-2">
<ul>
<li class="li-title">General Email Design</li>
<li><a href="http://www.campaignmonitor.com/css">CSS Support in Email</a></li>
<li><a href="https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design">Bulletproof Buttons</a></li>
<li><a href="http://backgrounds.cm/">Bulletproof Background Images</a></li>
<li><a href="https://www.campaignmonitor.com/dev-resources/guides/mobile/">Responsive Email Design with Media Queries</a></li>
</ul>
</div>
<div class="col-1-2">
<ul>
<li class="li-title">Hybrid Email Design</li>
<li><a href="https://litmus.com/blog/understanding-responsive-and-hybrid-email-design">Understanding Responsive and Hybrid Email Design</a></li>
<li><a href="http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/">Responsive HTML Emails: a Different Strategy</a></li>
<li><a href="https://github.com/fcarneiro/tedc15_template">Fabio Carneiro's TEDC15 talk files</a></li>
<li><a href="http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919">Creating a Future-Proof Responsive Email Without Media Queries</a></li>
<li><a href="http://labs.actionrocket.co/the-hybrid-coding-approach">The Hybrid Coding Approach</a></li>
<li><a href="http://ryanfield.ca/fly-brid/">Fly-Brid Email Generator</a></li>
</ul>
</div>
</div>
</div>
<div class="section" id="author" data-scroll-index="6">
<h2>Author</h2>
<p>Hi there, I’m Ted Goas, the core author and maintainer. I'm a designer & front-end developer working on websites, web apps, and HTML emails. And I enjoy talking shop on Twitter.</p>
<p><a href="https://twitter.com/TedGoas" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @TedGoas</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></p>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="assets/scrollIt.js"></script>
<script src="assets/jquery.sticky.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-3248378-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>