├── LICENSE ├── README.md ├── images ├── header.png ├── sidebar-01.png ├── sidebar-02.png ├── three-column-01.png ├── three-column-02.png ├── three-column-03.png ├── three-column-04.png ├── three-column-05.png ├── three-column-06.png ├── two-column-01.png └── two-column-02.png ├── index.html └── legacy ├── images ├── header.jpg ├── sidebar-01.jpg ├── sidebar-02.jpg ├── three-column-01.jpg ├── three-column-02.jpg ├── three-column-03.jpg ├── two-column-01.jpg └── two-column-02.jpg ├── index.html └── styles.css /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Envato Tuts+ 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Tuts+ Tutorial: Creating a Future-Proof Responsive Email Without Media Queries 2 | ### Instructor: Nicole Merlin 3 | 4 | Using this method you can create an email that has responsiveness baked in to the layout, without any need for CSS or media queries in the , so that even in the worst case scenario of email rendering, your layout will remain intact. 5 | 6 | Source files for the Tuts+ tutorial: [Creating a Future-Proof Responsive Email Without Media Queries](http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919) 7 | 8 | **Originally written June 2015, updated December 2020** 9 | 10 | [View the demo](http://tutsplus.github.io/creating-a-future-proof-responsive-email-without-media-queries/index.html) 11 | -------------------------------------------------------------------------------- /images/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/header.png -------------------------------------------------------------------------------- /images/sidebar-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/sidebar-01.png -------------------------------------------------------------------------------- /images/sidebar-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/sidebar-02.png -------------------------------------------------------------------------------- /images/three-column-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/three-column-01.png -------------------------------------------------------------------------------- /images/three-column-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/three-column-02.png -------------------------------------------------------------------------------- /images/three-column-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/three-column-03.png -------------------------------------------------------------------------------- /images/three-column-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/three-column-04.png -------------------------------------------------------------------------------- /images/three-column-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/three-column-05.png -------------------------------------------------------------------------------- /images/three-column-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/three-column-06.png -------------------------------------------------------------------------------- /images/two-column-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/two-column-01.png -------------------------------------------------------------------------------- /images/two-column-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/images/two-column-02.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 25 | 59 | 60 | 61 |
62 | 63 | 64 | 301 | 302 |
65 | 70 |
71 | 72 | 73 | 74 | 77 | 78 | 79 | 83 | 84 |
75 | 76 |
80 |

Creating responsive email magic

81 |

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus!

82 |
85 | 86 |
 
87 | 88 |
89 | 94 |
95 |
96 |

97 | 98 |

99 |
100 |
101 | 105 |
106 |
107 |

Taciti nostra, per litora nostra

108 |

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.

109 |

Claim yours now

110 |
111 |
112 | 117 |
118 | 119 |
 
120 | 121 |
122 | 127 |
128 |
129 |

130 | 131 |

132 |
133 |
134 | 138 |
139 |
140 |

Conubia nostra, per inceptos himenaeos

141 |

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.

142 |

Lock it in

143 |
144 |
145 | 150 |
151 | 152 |
 
153 | 154 | 155 | 156 | 160 | 161 |
157 |

Praesent laoreet malesuada cursus

158 |

Posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora!

159 |
162 | 163 |
164 | 169 |
170 |
171 |

172 |

Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.

173 |
174 |
175 | 179 |
180 |
181 |

182 |

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.

183 |
184 |
185 | 189 |
190 |
191 |

192 |

Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.

193 |
194 |
195 | 201 |
202 |
203 |

204 |

Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.

205 |
206 |
207 | 211 |
212 |
213 |

214 |

Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.

215 |
216 |
217 | 221 |
222 |
223 |

224 |

Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.

225 |
226 |
227 | 232 |
233 | 234 |
 
235 | 236 |
237 | 242 |
243 |
244 | 245 |
246 |
247 | 251 |
252 |
253 |

Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. Read on

254 |
255 |
256 | 261 |
262 | 263 |
 
264 | 265 |
266 | 271 |
272 |
273 | 274 |
275 |
276 | 280 |
281 |
282 |

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Register today

283 |
284 |
285 | 290 |
291 | 292 |
 
293 | 294 |
295 | 300 |
303 |
304 | 305 | 306 | -------------------------------------------------------------------------------- /legacy/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/legacy/images/header.jpg -------------------------------------------------------------------------------- /legacy/images/sidebar-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/legacy/images/sidebar-01.jpg -------------------------------------------------------------------------------- /legacy/images/sidebar-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/legacy/images/sidebar-02.jpg -------------------------------------------------------------------------------- /legacy/images/three-column-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/legacy/images/three-column-01.jpg -------------------------------------------------------------------------------- /legacy/images/three-column-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/legacy/images/three-column-02.jpg -------------------------------------------------------------------------------- /legacy/images/three-column-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/legacy/images/three-column-03.jpg -------------------------------------------------------------------------------- /legacy/images/two-column-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/legacy/images/two-column-01.jpg -------------------------------------------------------------------------------- /legacy/images/two-column-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/creating-a-future-proof-responsive-email-without-media-queries/de3171a57185f8ce5e6e73655474880f015b3c6a/legacy/images/two-column-02.jpg -------------------------------------------------------------------------------- /legacy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 |
19 |
20 | 25 | 26 | 27 | 30 | 31 | 32 | 42 | 43 | 44 | 99 | 100 | 101 | 179 | 180 | 181 | 277 | 278 | 279 | 312 | 313 | 314 | 347 | 348 |
28 | 29 |
33 | 34 | 35 | 39 | 40 |
36 |

Lorem ipsum dolor sit amet

37 |

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.

38 |
41 |
45 | 50 |
51 | 52 | 53 | 67 | 68 |
54 | 55 | 56 | 59 | 60 | 61 | 64 | 65 |
57 | 58 |
62 | Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 63 |
66 |
69 |
70 | 73 |
74 | 75 | 76 | 90 | 91 |
77 | 78 | 79 | 82 | 83 | 84 | 87 | 88 |
80 | 81 |
85 | Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. 86 |
89 |
92 |
93 | 98 |
102 | 107 |
108 | 109 | 110 | 124 | 125 |
111 | 112 | 113 | 116 | 117 | 118 | 121 | 122 |
114 | 115 |
119 | Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. 120 |
123 |
126 |
127 | 130 |
131 | 132 | 133 | 147 | 148 |
134 | 135 | 136 | 139 | 140 | 141 | 144 | 145 |
137 | 138 |
142 | Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. 143 |
146 |
149 |
150 | 153 |
154 | 155 | 156 | 170 | 171 |
157 | 158 | 159 | 162 | 163 | 164 | 167 | 168 |
160 | 161 |
165 | Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. 166 |
169 |
172 |
173 | 178 |
182 | 187 |
188 | 189 | 190 | 195 | 196 |
191 |

Fashion

192 |

Class eleifend aptent taciti sociosqu ad litora torquent conubia

193 |

Read requirements

194 |
197 |
198 | 201 |
202 | 203 | 204 | 209 | 210 |
205 |

Photography

206 |

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor

207 |

See examples

208 |
211 |
212 | 215 |
216 | 217 | 218 | 223 | 224 |
219 |

Design

220 |

Class aptent taciti sociosqu eleifend ad litora per conubia nostra

221 |

See the winners

222 |
225 |
226 | 232 |
233 | 234 | 235 | 240 | 241 |
236 |

Cooking

237 |

Class aptent taciti eleifend sociosqu ad litora torquent conubia

238 |

Read recipes

239 |
242 |
243 | 246 |
247 | 248 | 249 | 254 | 255 |
250 |

Woodworking

251 |

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor

252 |

See examples

253 |
256 |
257 | 260 |
261 | 262 | 263 | 268 | 269 |
264 |

Craft

265 |

Class aptent taciti sociosqu ad eleifend litora per conubia nostra

266 |

Vote now

267 |
270 |
271 | 276 |
280 | 285 |
286 | 287 | 288 | 291 | 292 |
289 | 290 |
293 |
294 | 297 |
298 | 299 | 300 | 303 | 304 |
301 | Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. Read on 302 |
305 |
306 | 311 |
315 | 320 |
321 | 322 | 323 | 326 | 327 |
324 | 325 |
328 |
329 | 332 |
333 | 334 | 335 | 338 | 339 |
336 | Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Per inceptos 337 |
340 |
341 | 346 |
349 | 354 |
355 |
356 | 357 | -------------------------------------------------------------------------------- /legacy/styles.css: -------------------------------------------------------------------------------- 1 | /* Basics */ 2 | body { 3 | margin: 0 !important; 4 | padding: 0; 5 | background-color: #ffffff; 6 | } 7 | table { 8 | border-spacing: 0; 9 | font-family: sans-serif; 10 | color: #333333; 11 | } 12 | td { 13 | padding: 0; 14 | } 15 | img { 16 | border: 0; 17 | } 18 | div[style*="margin: 16px 0"] { 19 | margin:0 !important; 20 | } 21 | .wrapper { 22 | width: 100%; 23 | table-layout: fixed; 24 | -webkit-text-size-adjust: 100%; 25 | -ms-text-size-adjust: 100%; 26 | } 27 | .webkit { 28 | max-width: 600px; 29 | margin: 0 auto; 30 | } 31 | .outer { 32 | Margin: 0 auto; 33 | width: 100%; 34 | max-width: 600px; 35 | } 36 | .inner { 37 | padding: 10px; 38 | } 39 | .contents { 40 | width: 100%; 41 | } 42 | p { 43 | Margin: 0; 44 | } 45 | a { 46 | color: #ee6a56; 47 | text-decoration: underline; 48 | } 49 | .h1 { 50 | font-size: 21px; 51 | font-weight: bold; 52 | Margin-bottom: 18px; 53 | } 54 | .h2 { 55 | font-size: 18px; 56 | font-weight: bold; 57 | Margin-bottom: 12px; 58 | } 59 | .full-width-image img { 60 | width: 100%; 61 | max-width: 600px; 62 | height: auto; 63 | } 64 | 65 | /* One column layout */ 66 | .one-column .contents { 67 | text-align: left; 68 | } 69 | .one-column p { 70 | font-size: 14px; 71 | Margin-bottom: 10px; 72 | } 73 | 74 | /*Two column layout*/ 75 | .two-column { 76 | text-align: center; 77 | font-size: 0; 78 | } 79 | .two-column .column { 80 | width: 100%; 81 | max-width: 300px; 82 | display: inline-block; 83 | vertical-align: top; 84 | } 85 | .two-column .contents { 86 | font-size: 14px; 87 | text-align: left; 88 | } 89 | .two-column img { 90 | width: 100%; 91 | max-width: 280px; 92 | height: auto; 93 | } 94 | .two-column .text { 95 | padding-top: 10px; 96 | } 97 | 98 | /*Three column layout*/ 99 | .three-column { 100 | text-align: center; 101 | font-size: 0; 102 | padding-top: 10px; 103 | padding-bottom: 10px; 104 | } 105 | .three-column .column { 106 | width: 100%; 107 | max-width: 200px; 108 | display: inline-block; 109 | vertical-align: top; 110 | } 111 | .three-column img { 112 | width: 100%; 113 | max-width: 180px; 114 | height: auto; 115 | } 116 | .three-column .contents { 117 | font-size: 14px; 118 | text-align: center; 119 | } 120 | .three-column .text { 121 | padding-top: 10px; 122 | } 123 | 124 | /* Left sidebar layout */ 125 | .left-sidebar { 126 | text-align: center; 127 | font-size: 0; 128 | } 129 | .left-sidebar .column { 130 | width: 100%; 131 | display: inline-block; 132 | vertical-align: middle; 133 | } 134 | .left-sidebar .left { 135 | max-width: 100px; 136 | } 137 | .left-sidebar .right { 138 | max-width: 500px; 139 | } 140 | .left-sidebar .img { 141 | width: 100%; 142 | max-width: 80px; 143 | height: auto; 144 | } 145 | .left-sidebar .contents { 146 | font-size: 14px; 147 | text-align: center; 148 | } 149 | .left-sidebar a { 150 | color: #85ab70; 151 | } 152 | 153 | /* Right sidebar layout */ 154 | .right-sidebar { 155 | text-align: center; 156 | font-size: 0; 157 | } 158 | .right-sidebar .column { 159 | width: 100%; 160 | display: inline-block; 161 | vertical-align: middle; 162 | } 163 | .right-sidebar .left { 164 | max-width: 100px; 165 | } 166 | .right-sidebar .right { 167 | max-width: 500px; 168 | } 169 | .right-sidebar .img { 170 | width: 100%; 171 | max-width: 80px; 172 | height: auto; 173 | } 174 | .right-sidebar .contents { 175 | font-size: 14px; 176 | text-align: center; 177 | } 178 | .right-sidebar a { 179 | color: #70bbd9; 180 | } 181 | 182 | /*Media Queries*/ 183 | @media screen and (max-width: 400px) { 184 | .two-column .column, 185 | .three-column .column { 186 | max-width: 100% !important; 187 | } 188 | .two-column img { 189 | max-width: 100% !important; 190 | } 191 | .three-column img { 192 | max-width: 50% !important; 193 | } 194 | } 195 | 196 | @media screen and (min-width: 401px) and (max-width: 620px) { 197 | .three-column .column { 198 | max-width: 33% !important; 199 | } 200 | .two-column .column { 201 | max-width: 50% !important; 202 | } 203 | } --------------------------------------------------------------------------------