├── LICENSE
├── Hybrid Emails
├── hybrid-single-column.html
├── hybrid-two-column.html
└── hybrid-three-column.html
├── Alternative Approaches
├── mobile-first.html
├── nearly-table-free.html
├── fab-four.html
└── div-based.html
├── README.md
├── Workshop Files
├── ex1.html
├── ex2.html
├── ex3.html
├── ex4.html
└── ex5.html
├── Traditional Responsive Email
├── traditional-responsive-INLINE-STYLES.html
└── traditional-responsive-EMBEDDED-STYLES.html
└── Traditional Responsive Emails
├── traditional-responsive-INLINE-STYLES.html
└── traditional-responsive-EMBEDDED-STYLES.html
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Jason Rodriguez
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/Hybrid Emails/hybrid-single-column.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
15 |
16 |
17 | |
18 |
19 |
20 |
21 | CENTER
22 |
23 |
24 |
25 | |
26 |
27 |
28 |
33 | |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/Alternative Approaches/mobile-first.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 | Coding mobile-first emails
11 |
39 |
42 |
43 |
44 |
45 |
50 |
51 |
52 |
Herligheter hva penge, tærer innflytelse forderve hukommelse.
53 |
54 |
55 |
59 |
60 |
61 |
Lettsindigheten anstrengende røbe, overser rekk makroner, sengeliggende avbetaler klokt uskjønt fedre.
62 |
Thanks for checking out this demonstration of mobile-first email.
63 |
64 |
65 |
70 |
71 |
This was a one-off email, but you can unsubscribe here.
72 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # The Principles of Email Design
2 | A repository of coding resources for anyone first dipping their toes into the waters of HTML email design. Godspeed.
3 |
4 | Originally released as part of a [Litmus Live Workshop](https://litmus.com/email-workshops) of the same name. The example files from the workshop can be found in the `Workshop Files` directory.
5 |
6 | Below you'll find some information on different techniques for designing and developing HTML email campaigns along with links to some inspiring email campaigns and other valuable resources.
7 |
8 | ## Traditional Responsive
9 |
10 | This approach uses the three tenets of responsive design to create responsive HTML emails. It relies on media queries, fluid tables, and fluid images, all of which are now well-supported in most email clients. For those clients that don't support media queries or embedded styles, the hybrid/spongy approach below is a good alternative.
11 |
12 | Example can be found in `Traditional Responsive Emails`.
13 |
14 | ## Hybrid/Spongy Approach
15 |
16 | This approach, first introduced by [Fabio Carneiro](), uses fluid-by-default tables, combined with `max-width` styles and Outlook ghost tables to create responsive emails. It is an excellent approach when media queries or embedded styles aren't supported, as it works nearly everywhere. It also serves as a good base to build on, with media queries used as progressive enhancements for email clients that support them.
17 |
18 | Example can be found in `Hybrid Emails`.
19 |
20 | ## Different Development Approaches
21 |
22 | Below are three alternative approaches to building responsive HTML email campaigns. Each has its pros and cons, so choose wisely.
23 |
24 | ### Fab Four Technique
25 |
26 | As pioneered by [Rémi Parmentier](https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848), this approach uses an understanding of `width`, `max-width`, `min-width`, and the `calc()` function to allow for different layouts across desktop and mobile devices.
27 |
28 | Example can be found in `Alternative Approaches/fab-four.html`.
29 |
30 | ### Mobile-First Approach
31 |
32 | First introduced by [Stig Morten Myre](https://cm.engineering/coding-mobile-first-emails-1513ac4673e), this approach also uses `width`, `max-width`, `min-width`, and the `calc()` function, combined with Microsoft ghost tables and `display: table;` (plus a few hacks) to achieve responsive emails. This builds on the mobile version first, which is a nice way to approach email as more subscribers move towards consuming email via mobile devices. It works damned near everywhere and is a nice base to build on.
33 |
34 | Example can be found in `Alternative Approaches/mobile-first.html`.
35 |
36 | ### Div-Based Design
37 |
38 | This approach relies primarily on `div` elements as the containers and `display: table;` as the layout mechanism of your email. Nearly every email client, with the exception of Outlook, understands layout with `divs`. For Outlook clients, ghost tables are employed to get layouts rendering properly. Depending on the complexity of your design, this can be a great approach as it can keep your code lean and easy to maintain.
39 |
40 | Example of a single-column, minimal approach can be found in `Alternative Approaches/nearly-table-free.html`.
41 |
42 | Example of a complex, div-based email can be found in `Alternative Approaches/div-based.html`.
43 |
44 | ## Mouth-Wateringly Good Campaigns
45 |
46 | Here are a few campaigns to get your imagination going with what you can accomplish in HTML emails.
47 |
48 | - [Interactive Litmus Builder launch email](https://litmus.com/builder/d965a91)
49 | - [Art Directed Collaborative Fund email](https://litmus.com/scope/ddmgsplrgkub)
50 | - [MailChimp for Agencies newsletter](https://litmus.com/scope/g1aim9ictclm)
51 | - [Litmus year in review email](https://litmus.com/builder/2c72caf)
52 | - [Interactive Alien email from Kristian Robinson](https://codepen.io/kristianrobinson/pen/bqaWNP)
53 | - [Interactive Sonic email from Kristian Robinson](https://codepen.io/kristianrobinson/pen/pepPyg)
54 | - [Interactive Christmas tree email from Kristian Robinson](https://codepen.io/kristianrobinson/pen/BWJRpg)
55 | - [Interactive advent calendar email from Cyrill Gross](https://swisscard-cdn.mayoris.com/go/15lj3n7h7t7yt6hy191vk85g7jki3hl8h9i0c8sss2ep/309/preview)
56 |
57 | ## More resources
58 |
59 | I actually maintain a huge list of resources for email designers and marketers. [Check out the resources page](http://rodriguezcommaj.com/resources) on my website.
60 |
61 | Looking for help troubleshooting or just want to chat with fellow email enthusiasts? [Check out the Litmus Community](https://litmus.com/community/discussions). It's free to join and comes with some cool benefits (access to Litmus tools, anyone?).
62 |
--------------------------------------------------------------------------------
/Workshop Files/ex1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The Principles of Email
6 |
7 |
8 |
29 |
30 |
31 |
32 |
33 | Join us as we dig into the components that power every HTML email campaign and learn to build or update your own emails. A few hours of email geekery and camaraderie.
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | The Principles of Email Design
43 | |
44 |
45 |
46 |
47 | |
48 | — April 5, 2017 —
49 | |
50 |
51 |
52 |
53 | |
54 | A detailed look at the basics of coding for email, this workshop digs into the individual components that go into every email campaign.
55 | |
56 |
57 |
58 |
59 | |
60 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
61 | |
62 |
63 |
64 |
65 | |
66 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
67 | |
68 |
69 |
70 |
71 | |
72 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
73 | |
74 |
75 |
76 |
77 | |
78 |
79 | |
80 |
81 |
82 | |
83 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/Hybrid Emails/hybrid-two-column.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
15 |
16 |
17 |
18 |
23 |
24 |
29 |
30 |
40 |
41 |
42 |
43 | |
44 |
45 |
46 | LEFT
47 |
48 |
49 | |
50 |
51 |
52 |
58 |
59 |
60 | |
61 |
62 |
63 | RIGHT
64 |
65 |
66 | |
67 |
68 |
69 | |
76 |
77 |
78 |
83 | |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/Hybrid Emails/hybrid-three-column.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
15 |
16 |
17 |
18 |
23 |
24 |
29 |
30 |
36 |
37 |
38 |
39 | |
40 |
41 |
42 | LEFT
43 |
44 |
45 | |
46 |
47 |
48 |
54 |
55 |
56 | |
57 |
58 |
59 | CENTER
60 |
61 |
62 | |
63 |
64 |
65 |
71 |
72 |
73 | |
74 |
75 |
76 | RIGHT
77 |
78 |
79 | |
80 |
81 |
82 | |
89 |
90 |
91 |
96 | |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/Workshop Files/ex2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The Principles of Email
6 |
7 |
8 |
29 |
30 |
31 |
32 |
33 | Join us as we dig into the components that power every HTML email campaign and learn to build or update your own emails. A few hours of email geekery and camaraderie.
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | The Principles of Email Design
43 | |
44 |
45 |
46 |
47 | |
48 | — April 5, 2017 —
49 | |
50 |
51 |
52 |
53 | |
54 | A detailed look at the basics of coding for email, this workshop digs into the individual components that go into every email campaign.
55 | |
56 |
57 |
58 |
59 | |
60 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
61 | |
62 |
63 |
64 |
65 | |
66 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
67 | |
68 |
69 |
70 |
71 | |
72 |
73 |
80 | |
81 |
82 |
83 |
84 | |
85 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
86 | |
87 |
88 |
89 |
90 | |
91 |
92 | |
93 |
94 |
95 | |
96 |
97 |
98 |
99 |
100 |
--------------------------------------------------------------------------------
/Workshop Files/ex3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The Principles of Email
6 |
7 |
8 |
29 |
30 |
31 |
32 |
33 | Join us as we dig into the components that power every HTML email campaign and learn to build or update your own emails. A few hours of email geekery and camaraderie.
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | The Principles of Email Design
43 | |
44 |
45 |
46 |
47 | |
48 | — April 5, 2017 —
49 | |
50 |
51 |
52 |
53 | |
54 | A detailed look at the basics of coding for email, this workshop digs into the individual components that go into every email campaign.
55 | |
56 |
57 |
58 |
59 |
60 | 
61 | |
62 |
63 |
64 |
65 | |
66 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
67 | |
68 |
69 |
70 |
71 | |
72 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
73 | |
74 |
75 |
76 |
77 | |
78 |
79 |
86 | |
87 |
88 |
89 |
90 | |
91 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
92 | |
93 |
94 |
95 |
96 | |
97 |
98 | |
99 |
100 |
101 | |
102 |
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/Alternative Approaches/nearly-table-free.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | The Intermittent Newsletter by Jason Rodriguez
10 |
11 |
12 |
13 |
42 |
43 |
44 |
47 |
48 |
49 | The Intermittent Newsletter
50 | by Jason Rodriguez
51 |
52 |
53 | So, it's been a while…
54 |
55 |
56 | … but I’m finally back to sending my newsletter. If you forgot who the hell I am or are shaking your head wondering why you’re receiving this, here’s a little bit of context:
57 |
58 |
59 | I’m Jason, a writer, designer, and product manager at Litmus. While I love all things web-related, I’m primarily focused on teaching people to create better HTML email campaigns that not only look and function great, but provide real, tangible value to their subscribers. You most likely signed up for this email on my website or as a result of buying one of my books.
60 |
61 |
62 | Up until a few months ago, I sent a regular weekly newsletter filled with my latest writing as well as links to interesting things I found online. I needed a break, though, for a variety of reasons we won’t get into here.
63 |
64 |
65 | But, I’m back at it. This is the first issue of what I’m now calling The Intermittent Newsletter. It will feature the same stuff—my latest writing and links to anything I find fascinating online—but will be a little more loose in terms of cadence. I’m trying to take the pressure out of sending an email newsletter, so I’m not promising anyone any regular sends… hence the intermittent part.
66 |
67 |
68 | If you don’t want to have any part of the above, feel free to unsubscribe.
69 |
70 |
71 | For those of you willing to stick around—thank you. I appreciate the invite into your inbox, that most sacred of online spaces. I’ll try to keep things interesting.
72 |
73 |
74 | If you want to catch up on what I’ve been writing about the past few months, head over to my blog. If you just want to see what I’ve been interested in lately, let’s get to it.
75 |
76 |
77 | Things of Interest
78 |
79 |
80 | One of my favorite newsletters is getting a redesign. The folks over at Action Rocket are rebuilding #EmailWeekly from the ground up, and documenting the process in public. Should be fun to see what they come up with.
81 |
82 |
83 | Ethan Marcotte wrote a great article on how we all have responsibilities to the world, regardless of what line of work you’re in. I’ve been following what seems to be a trend towards real ethics in the design/tech world over the past year or so and I think Ethan nails a lot of what I’ve been thinking about in his article.
84 |
85 |
86 | Related is this amazing article from the team at &yet. I absolutely adore what &yet has been doing this past year and see them as one of the most ethical companies around. Would love the opportunity to work with them at some point in my life.
87 |
88 |
89 | I shut down (actually redirected) Email Toolbox and revived my resources section on my website. If you’re ever looking for amazing resources, tools, tutorials, etc. on email marketing and design, this should be your first stop.
90 |
91 |
92 | Finally, I really like Noel Jackson’s take on the importance of owning your own space on the web.
93 |
94 |
95 | What's on your mind?
96 |
97 |
98 | Strong reactions to any of the above? Want to chat about the web, email, or anything else? Email me and let me know. I promise I'll get back to you.
99 |
100 |
101 |
102 |
103 |
118 |
6 |
7 |
8 |
The Fab Four
9 |
10 |
11 |
12 |
15 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
30 |
33 |
34 |
35 |
36 |
39 |
40 |
41 |
44 |
45 |
46 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
47 |
48 |
49 |
52 |
53 |
54 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
55 |
56 |
57 |
60 |
61 |
62 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
63 |
64 |
65 |
68 |
69 |
70 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
71 |
72 |
73 |
76 |
77 |
78 |
81 |
82 |
83 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
84 |
85 |
86 |
89 |
90 |
91 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente error quisquam facere ex harum dolores qui.
92 |
93 |
94 |
97 |
98 |
99 |
102 |
103 |
104 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
105 |
106 |
107 |
110 |
111 |
112 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
113 |
114 |
115 |
118 |
119 |
120 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
121 |
122 |
123 |
126 |
127 |
128 | Illustrations by Elias Stein
129 |
130 |
33 | Join us as we dig into the components that power every HTML email campaign and learn to build or update your own emails. A few hours of email geekery and camaraderie.
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | The Principles of Email Design
43 | |
44 |
45 |
46 |
47 | |
48 | — April 5, 2017 —
49 | |
50 |
51 |
52 |
53 | |
54 | A detailed look at the basics of coding for email, this workshop digs into the individual components that go into every email campaign.
55 | |
56 |
57 |
58 |
59 | |
60 |
61 | |
62 |
63 |
64 |
65 | |
66 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
67 | |
68 |
69 |
70 |
71 | |
72 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
73 | |
74 |
75 |
76 |
77 | |
78 |
79 |
86 | |
87 |
88 |
89 |
90 | |
91 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
92 | |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 | 
109 | |
110 |
111 |
112 |
113 | Maybe this one
114 | |
115 |
116 |
117 | |
118 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
119 | |
120 |
121 |
122 | |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 | 
133 | |
134 |
135 |
136 |
137 | Or this one
138 | |
139 |
140 |
141 | |
142 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
143 | |
144 |
145 |
146 | |
147 |
148 |
149 | |
150 |
151 |
152 | |
153 |
154 |
155 |
156 | |
157 |
158 | |
159 |
160 |
161 | |
162 |
163 |
164 |
165 |
166 |
--------------------------------------------------------------------------------
/Traditional Responsive Email/traditional-responsive-INLINE-STYLES.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The Elements of Email
6 |
7 |
8 |
53 |
54 |
55 |
56 |
57 | Join us as we dig into the components that power every HTML email campaign and learn to build or update your own emails. A few hours of email geekery and camaraderie.
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | The Principles of Email Design
67 | |
68 |
69 |
70 |
71 | |
72 | — April 5, 2017 —
73 | |
74 |
75 |
76 |
77 | |
78 | A detailed look at the basics of coding for email, this workshop digs into the individual components that go into every email campaign.
79 | |
80 |
81 |
82 |
83 | |
84 |
85 | |
86 |
87 |
88 |
89 | |
90 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
91 | |
92 |
93 |
94 |
95 | |
96 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
97 | |
98 |
99 |
100 |
101 | |
102 |
103 |
110 | |
111 |
112 |
113 |
114 | |
115 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
116 | |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | |
132 |
133 | |
134 |
135 |
136 |
137 | Maybe this one
138 | |
139 |
140 |
141 | |
142 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
143 | |
144 |
145 |
146 | |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 | |
156 |
157 | |
158 |
159 |
160 |
161 | Or this one
162 | |
163 |
164 |
165 | |
166 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
167 | |
168 |
169 |
170 | |
171 |
172 |
173 | |
174 |
175 |
176 | |
177 |
178 |
179 |
180 | |
181 |
182 | |
183 |
184 |
185 | |
186 |
187 |
188 |
189 |
190 |
--------------------------------------------------------------------------------
/Workshop Files/ex5.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The Principles of Email
6 |
7 |
8 |
53 |
54 |
55 |
56 |
57 | Join us as we dig into the components that power every HTML email campaign and learn to build or update your own emails. A few hours of email geekery and camaraderie.
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | The Principles of Email Design
67 | |
68 |
69 |
70 |
71 | |
72 | — April 5, 2017 —
73 | |
74 |
75 |
76 |
77 | |
78 | A detailed look at the basics of coding for email, this workshop digs into the individual components that go into every email campaign.
79 | |
80 |
81 |
82 |
83 | |
84 |
85 | |
86 |
87 |
88 |
89 | |
90 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
91 | |
92 |
93 |
94 |
95 | |
96 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
97 | |
98 |
99 |
100 |
101 | |
102 |
103 |
110 | |
111 |
112 |
113 |
114 | |
115 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
116 | |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | |
132 |
133 | |
134 |
135 |
136 |
137 | Maybe this one
138 | |
139 |
140 |
141 | |
142 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
143 | |
144 |
145 |
146 | |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 | |
156 |
157 | |
158 |
159 |
160 |
161 | Or this one
162 | |
163 |
164 |
165 | |
166 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
167 | |
168 |
169 |
170 | |
171 |
172 |
173 | |
174 |
175 |
176 | |
177 |
178 |
179 |
180 | |
181 |
182 | |
183 |
184 |
185 | |
186 |
187 |
188 |
189 |
190 |
--------------------------------------------------------------------------------
/Traditional Responsive Emails/traditional-responsive-INLINE-STYLES.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The Principles of Email
6 |
7 |
8 |
53 |
54 |
55 |
56 |
57 | Join us as we dig into the components that power every HTML email campaign and learn to build or update your own emails. A few hours of email geekery and camaraderie.
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | The Principles of Email Design
67 | |
68 |
69 |
70 |
71 | |
72 | — April 5, 2017 —
73 | |
74 |
75 |
76 |
77 | |
78 | A detailed look at the basics of coding for email, this workshop digs into the individual components that go into every email campaign.
79 | |
80 |
81 |
82 |
83 | |
84 |
85 | |
86 |
87 |
88 |
89 | |
90 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
91 | |
92 |
93 |
94 |
95 | |
96 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
97 | |
98 |
99 |
100 |
101 | |
102 |
103 |
110 | |
111 |
112 |
113 |
114 | |
115 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
116 | |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | |
132 |
133 | |
134 |
135 |
136 |
137 | Maybe this one
138 | |
139 |
140 |
141 | |
142 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
143 | |
144 |
145 |
146 | |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 | |
156 |
157 | |
158 |
159 |
160 |
161 | Or this one
162 | |
163 |
164 |
165 | |
166 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
167 | |
168 |
169 |
170 | |
171 |
172 |
173 | |
174 |
175 |
176 | |
177 |
178 |
179 |
180 | |
181 |
182 | |
183 |
184 |
185 | |
186 |
187 |
188 |
189 |
190 |
--------------------------------------------------------------------------------
/Traditional Responsive Email/traditional-responsive-EMBEDDED-STYLES.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The Principles of Email Design
6 |
7 |
8 |
144 |
145 |
146 |
147 |
148 |
149 | Join us as we dig into the components that power every HTML email campaign and learn to build or update your own emails. A few hours of email geekery and camaraderie.
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 | The Principles of Email Design
160 | |
161 |
162 |
163 |
164 | |
165 | — April 5, 2017 —
166 | |
167 |
168 |
169 |
170 | |
171 | A detailed look at the basics of coding for email, this workshop digs into the individual components that go into every email campaign.
172 | |
173 |
174 |
175 |
176 | |
177 |
178 | |
179 |
180 |
181 |
182 | |
183 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
184 | |
185 |
186 |
187 |
188 | |
189 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
190 | |
191 |
192 |
193 |
194 | |
195 |
196 |
203 | |
204 |
205 |
206 |
207 | |
208 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
209 | |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 | |
225 |
226 | |
227 |
228 |
229 |
230 | Maybe this one
231 | |
232 |
233 |
234 | |
235 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
236 | |
237 |
238 |
239 | |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 | |
249 |
250 | |
251 |
252 |
253 |
254 | Or this one
255 | |
256 |
257 |
258 | |
259 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
260 | |
261 |
262 |
263 | |
264 |
265 |
266 | |
267 |
268 |
269 | |
270 |
271 |
272 |
273 | |
274 |
275 | |
276 |
277 |
278 | |
279 |
280 |
281 |
282 |
283 |
284 |
--------------------------------------------------------------------------------
/Traditional Responsive Emails/traditional-responsive-EMBEDDED-STYLES.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The Principles of Email Design
6 |
7 |
8 |
144 |
145 |
146 |
147 |
148 |
149 | Join us as we dig into the components that power every HTML email campaign and learn to build or update your own emails. A few hours of email geekery and camaraderie.
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 | The Principles of Email Design
160 | |
161 |
162 |
163 |
164 | |
165 | — April 5, 2017 —
166 | |
167 |
168 |
169 |
170 | |
171 | A detailed look at the basics of coding for email, this workshop digs into the individual components that go into every email campaign.
172 | |
173 |
174 |
175 |
176 | |
177 |
178 | |
179 |
180 |
181 |
182 | |
183 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
184 | |
185 |
186 |
187 |
188 | |
189 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
190 | |
191 |
192 |
193 |
194 | |
195 |
196 |
203 | |
204 |
205 |
206 |
207 | |
208 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis!
209 | |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 | |
225 |
226 | |
227 |
228 |
229 |
230 | Maybe this one
231 | |
232 |
233 |
234 | |
235 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
236 | |
237 |
238 |
239 | |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 | |
249 |
250 | |
251 |
252 |
253 |
254 | Or this one
255 | |
256 |
257 |
258 | |
259 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus impedit aspernatur laudantium.
260 | |
261 |
262 |
263 | |
264 |
265 |
266 | |
267 |
268 |
269 | |
270 |
271 |
272 |
273 | |
274 |
275 | |
276 |
277 |
278 | |
279 |
280 |
281 |
282 |
283 |
284 |
--------------------------------------------------------------------------------
/Alternative Approaches/div-based.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Litmus News
8 |
313 |
499 |
507 |
546 |
778 |
884 |
1071 |
1072 |
1075 |
1076 |
1077 |
1078 |
1079 | February news from Litmus. Email workshops coming to a city near you, 2017 email predictions, and more.
1080 |
1081 |
1082 |
1083 |
1084 |
1085 |
1090 |
1091 |
1096 |
1097 |
1098 |
1103 |
1104 |
1105 |
1106 | Tweet
1107 |
1108 |
1109 |
1112 |
1120 |
1125 |
1126 |
1127 |
1128 |
1129 |
1130 |
1135 |
1136 | Email Workshops from Litmus
1137 |
1138 |
1139 | Learn the fundamentals of email strategy, become an expert on the principles of email design, or dig into how to use progressive enhancement and interactive elements in your next campaign. Litmus Live workshops are hands-on, immersive experiences full of actionable tips that you can start using immediately.
1140 |
1141 |
1144 | Reserve your spot →
1145 |
1146 |
1151 |
1152 |
1153 |
1158 |
1159 |
1164 |
1165 |
1166 | Save the Date: Litmus Live 2017
1167 |
1168 |
1169 |
1174 |
1175 |
1178 |
1179 | Boston
1180 |
1181 |
1182 | August 2–4
1183 |
1184 |
1185 |
1186 |
1189 |
1190 |
1193 |
1194 |
1197 |
1198 | London
1199 |
1200 |
1201 | August 29–30
1202 |
1203 |
1204 |
1205 |
1208 |
1209 |
1212 |
1213 |
1216 |
1217 | San Francisco
1218 |
1219 |
1220 | September 21–22
1221 |
1222 |
1223 |
1224 |
1229 |
1230 |
1231 |
1236 |
1237 |
1238 |
1243 |
1244 |
1245 | Formerly known as The Email Design Conference, Litmus Live brings the email community together to celebrate their craft and gives email professionals a platform to learn, share, and grow.
1246 |
1247 | Opt in for conference updates to hear when tickets go on sale and learn how you can win a free ticket.
1248 |
1249 |
1252 | Save the date →
1253 |
1254 |
1255 |
1260 |
1261 |
1262 |
1267 |
1268 |
1273 |
1274 |
1275 |
1276 |
1277 |
1280 |
1295 |
1300 |
1301 |
1306 |
1307 |
1308 |
1309 |
1314 |
1315 |
1316 |
1325 |
1326 |
1327 |
1332 |
1333 |
1334 |
1335 |
1336 |
1337 |
1338 |
1339 |
1340 |
1343 |
1355 |
1360 |
1361 |
1362 |
1371 |
1372 |
1373 |
1382 |
1383 |
1384 |
1389 |
1402 |
1405 |
1406 |
1407 |
1408 |
1413 |
1414 |
1415 |
1424 |
1425 |
1426 |
1435 |
1436 |
1437 |
1442 |
1443 |
1444 |
1445 |
1448 |
1460 |
1465 |
1466 |
1467 |
1476 |
1477 |
1478 |
1486 |
1487 |
1488 |
1493 |
1494 |
1497 |
1498 | The Email Design Podcast
1499 |
1500 |
1501 | Join hosts Kevin Mandeville and Jason Rodriguez as they talk about the latest news in the email design world.
1502 |
1503 |
1504 |
1507 |
1508 |
1513 |
1514 |
1515 |
1516 |
1519 |
1527 |
1532 |
1533 |
1534 |
1535 |
1538 |
1539 |
1544 |
1545 |
1546 |
1547 |
1550 |
1559 |
1564 |
1565 |
1566 |
1567 |
1570 |
1571 |
1576 |
1577 |
1578 |
1579 |
1582 |
1590 |
1595 |
1596 |
1597 |
1598 |
1601 |
1602 |
1607 |
1608 |
1609 |
1610 |
1613 |
1621 |
1626 |
1627 |
1628 |
1631 |
1632 | Subscribe to the #EmailDesignPodcast
1633 |
1634 |
1635 |
1640 |
1641 |
1642 |
1645 |
1646 |
1647 |
1650 |
1651 |
1656 |
1657 |
1662 |
1663 |
1668 |
1669 |
1678 |
1679 |
1680 |
1688 |
1689 |
1690 |
1695 |
1696 | 
1697 |
1698 |
1701 |
1702 | Blog & Community Highlights
1703 |
1704 |
1705 |
1708 |
1709 |
1714 |
1715 |
1716 |
1717 |
1720 |
1725 |
1730 |
1731 |
1732 |
1733 |
1736 |
1737 |
1742 |
1743 |
1744 |
1745 |
1748 |
1753 |
1758 |
1759 |
1760 |
1761 |
1764 |
1765 |
1770 |
1771 |
1772 |
1773 |
1776 |
1781 |
1786 |
1787 |
1788 |
1789 |
1792 |
1793 |
1798 |
1799 |
1800 |
1801 |
1804 |
1809 |
1814 |
1815 |
1816 |
1817 |
1820 |
1821 |
1826 |
1827 |
1828 |
1829 |
1832 |
1837 |
1842 |
1843 |
1844 |
1849 |
1850 |
1855 |
1856 |
1865 |
1866 |
1867 |
1872 |
1873 |
1878 |
1879 |
1880 |
1885 |
1886 | What’s New at Litmus
1887 |
1888 |
1889 | Join us as we go over what’s new at Litmus. We’ll show you how to get started testing your emails, as well as give you a full overview of Builder and Checklist.
1890 |
1891 |
1896 |
1897 |
1898 |
1903 |
1904 |
1909 |
1910 |
1911 |
1916 |
1917 |
1918 | |
1919 | FEB
1920 | |
1921 |
1922 |
1923 | |
1924 |
1925 | 15
1926 |
1927 | 11AM EST
1928 | |
1929 |
1930 |
1931 |
1934 |
1935 |
1938 |
1939 |
1940 | |
1941 | FEB
1942 | |
1943 |
1944 |
1945 | |
1946 |
1947 | 23
1948 |
1949 | 2PM EST
1950 | |
1951 |
1952 |
1953 |
1956 |
1957 |
1960 |
1961 |
1962 | |
1963 | MAR
1964 | |
1965 |
1966 |
1967 | |
1968 |
1969 | 1
1970 |
1971 | 11AM EST
1972 | |
1973 |
1974 |
1975 |
1980 |
1981 |
1982 |
1987 |
1988 |
1989 |
1994 |
1999 |
2004 |
2005 |
2010 |
2011 |
2012 |
2017 |
2018 |
2019 |
2024 |
2025 |
2026 |
2031 |
2043 |
2046 |
2047 |
2048 |
2049 |
2050 |
2055 |
2056 |
2057 |
2062 |
2063 |
2064 |
2069 |
2081 |
2086 |
2087 |
2088 |
2089 |
1106 | 
1116 | 
2072 |