├── README.md ├── 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 /README.md: -------------------------------------------------------------------------------- 1 | ### Tuts+ Tutorial: Creating a Future-Proof Responsive Email Without Media Queries 2 | #### Instructor: Nicole Merlin 3 | 4 | Using this ‘fluid hybrid’ method you can build an HTML email with lots of different layouts that doesn't rely on media queries to look great on mobile devices. 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 | **Available on Tuts+ June, 2015** 9 | 10 | [View the demo](http://tutsplus.github.io/creating-a-future-proof-responsive-email-without-media-queries/index.html) 11 | -------------------------------------------------------------------------------- /images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/66521350c0f94316a460cd51e2635a23214d9558/images/header.jpg -------------------------------------------------------------------------------- /images/sidebar-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/66521350c0f94316a460cd51e2635a23214d9558/images/sidebar-01.jpg -------------------------------------------------------------------------------- /images/sidebar-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/66521350c0f94316a460cd51e2635a23214d9558/images/sidebar-02.jpg -------------------------------------------------------------------------------- /images/three-column-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/66521350c0f94316a460cd51e2635a23214d9558/images/three-column-01.jpg -------------------------------------------------------------------------------- /images/three-column-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/66521350c0f94316a460cd51e2635a23214d9558/images/three-column-02.jpg -------------------------------------------------------------------------------- /images/three-column-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/66521350c0f94316a460cd51e2635a23214d9558/images/three-column-03.jpg -------------------------------------------------------------------------------- /images/two-column-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/66521350c0f94316a460cd51e2635a23214d9558/images/two-column-01.jpg -------------------------------------------------------------------------------- /images/two-column-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/66521350c0f94316a460cd51e2635a23214d9558/images/two-column-02.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 |
18 | 23 | 24 | 25 | 28 | 29 | 30 | 40 | 41 | 42 | 97 | 98 | 99 | 171 | 172 | 173 | 257 | 258 | 259 | 288 | 289 | 290 | 319 | 320 |
26 | 27 |
31 | 32 | 33 | 37 | 38 |
34 |

Lorem ipsum dolor sit amet

35 |

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.

36 |
39 |
43 | 48 |
49 | 50 | 51 | 65 | 66 |
52 | 53 | 54 | 57 | 58 | 59 | 62 | 63 |
55 | 56 |
60 | Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 61 |
64 |
67 |
68 | 71 |
72 | 73 | 74 | 88 | 89 |
75 | 76 | 77 | 80 | 81 | 82 | 85 | 86 |
78 | 79 |
83 | Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. 84 |
87 |
90 |
91 | 96 |
100 | 105 | 106 | 107 | 121 | 122 |
108 | 109 | 110 | 113 | 114 | 115 | 118 | 119 |
111 | 112 |
116 | Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. 117 |
120 |
123 | 126 | 127 | 128 | 142 | 143 |
129 | 130 | 131 | 134 | 135 | 136 | 139 | 140 |
132 | 133 |
137 | Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. 138 |
141 |
144 | 147 | 148 | 149 | 163 | 164 |
150 | 151 | 152 | 155 | 156 | 157 | 160 | 161 |
153 | 154 |
158 | Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. 159 |
162 |
165 | 170 |
174 | 179 | 180 | 181 | 186 | 187 |
182 |

Fashion

183 |

Class eleifend aptent taciti sociosqu ad litora torquent conubia

184 |

Read requirements

185 |
188 | 191 | 192 | 193 | 198 | 199 |
194 |

Photography

195 |

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor

196 |

See examples

197 |
200 | 203 | 204 | 205 | 210 | 211 |
206 |

Design

207 |

Class aptent taciti sociosqu eleifend ad litora per conubia nostra

208 |

See the winners

209 |
212 | 218 | 219 | 220 | 225 | 226 |
221 |

Cooking

222 |

Class aptent taciti eleifend sociosqu ad litora torquent conubia

223 |

Read recipes

224 |
227 | 230 | 231 | 232 | 237 | 238 |
233 |

Woodworking

234 |

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor

235 |

See examples

236 |
239 | 242 | 243 | 244 | 249 | 250 |
245 |

Craft

246 |

Class aptent taciti sociosqu ad eleifend litora per conubia nostra

247 |

Vote now

248 |
251 | 256 |
260 | 265 | 266 | 267 | 270 | 271 |
268 | 269 |
272 | 275 | 276 | 277 | 280 | 281 |
278 | Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. Read on 279 |
282 | 287 |
291 | 296 | 297 | 298 | 301 | 302 |
299 | 300 |
303 | 306 | 307 | 308 | 311 | 312 |
309 | Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Per inceptos 310 |
313 | 318 |
321 | 326 |
327 |
328 | 329 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* Basics */ 2 | body { 3 | Margin: 0; 4 | padding: 0; 5 | min-width: 100%; 6 | background-color: #ffffff; 7 | } 8 | table { 9 | border-spacing: 0; 10 | font-family: sans-serif; 11 | color: #333333; 12 | } 13 | td { 14 | padding: 0; 15 | } 16 | img { 17 | border: 0; 18 | } 19 | .wrapper { 20 | width: 100%; 21 | table-layout: fixed; 22 | -webkit-text-size-adjust: 100%; 23 | -ms-text-size-adjust: 100%; 24 | } 25 | .webkit { 26 | max-width: 600px; 27 | } 28 | .outer { 29 | Margin: 0 auto; 30 | width: 100%; 31 | max-width: 600px; 32 | } 33 | .inner { 34 | padding: 10px; 35 | } 36 | .contents { 37 | width: 100%; 38 | } 39 | p { 40 | Margin: 0; 41 | } 42 | a { 43 | color: #ee6a56; 44 | text-decoration: underline; 45 | } 46 | .h1 { 47 | font-size: 21px; 48 | font-weight: bold; 49 | Margin-bottom: 18px; 50 | } 51 | .h2 { 52 | font-size: 18px; 53 | font-weight: bold; 54 | Margin-bottom: 12px; 55 | } 56 | .full-width-image img { 57 | width: 100%; 58 | height: auto; 59 | /*display: block;*/ 60 | } 61 | 62 | /* Windows Phone Viewport Fix */ 63 | @-ms-viewport { 64 | width: device-width; 65 | } 66 | 67 | /* One column layout */ 68 | .one-column .contents { 69 | text-align: left; 70 | } 71 | .one-column p { 72 | font-size: 14px; 73 | Margin-bottom: 10px; 74 | } 75 | 76 | /*Two column layout*/ 77 | .two-column { 78 | text-align: center; 79 | font-size: 0; 80 | } 81 | .two-column .column { 82 | width: 100%; 83 | max-width: 300px; 84 | display: inline-block; 85 | vertical-align: top; 86 | } 87 | .two-column .contents { 88 | font-size: 14px; 89 | text-align: left; 90 | } 91 | .two-column img { 92 | width: 100%; 93 | height: auto; 94 | } 95 | .two-column .text { 96 | padding-top: 10px; 97 | } 98 | 99 | /*Three column layout*/ 100 | .three-column { 101 | text-align: center; 102 | font-size: 0; 103 | padding-top: 10px; 104 | padding-bottom: 10px; 105 | } 106 | .three-column .column { 107 | width: 100%; 108 | max-width: 200px; 109 | display: inline-block; 110 | vertical-align: top; 111 | } 112 | .three-column img { 113 | width: 100%; 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 | 125 | /* Left sidebar layout */ 126 | .left-sidebar { 127 | text-align: center; 128 | font-size: 0; 129 | } 130 | .left-sidebar .column { 131 | width: 100%; 132 | display: inline-block; 133 | vertical-align: middle; 134 | } 135 | .left-sidebar .left { 136 | max-width: 100px; 137 | } 138 | .left-sidebar .right { 139 | max-width: 500px; 140 | } 141 | .left-sidebar .contents { 142 | font-size: 14px; 143 | text-align: center; 144 | } 145 | .left-sidebar a { 146 | color: #85ab70; 147 | } 148 | 149 | /* Right sidebar layout */ 150 | .right-sidebar { 151 | text-align: center; 152 | font-size: 0; 153 | } 154 | .right-sidebar .column { 155 | width: 100%; 156 | display: inline-block; 157 | vertical-align: middle; 158 | } 159 | .right-sidebar .left { 160 | max-width: 100px; 161 | } 162 | .right-sidebar .right { 163 | max-width: 500px; 164 | } 165 | .right-sidebar .contents { 166 | font-size: 14px; 167 | text-align: center; 168 | } 169 | .right-sidebar a { 170 | color: #70bbd9; 171 | } 172 | 173 | /*Media Queries*/ 174 | @media screen and (max-width: 400px) { 175 | .two-column .column, 176 | .three-column .column { 177 | max-width: 100% !important; 178 | } 179 | .three-column img { 180 | max-width: 50% !important; 181 | } 182 | } 183 | 184 | @media screen and (min-width: 401px) and (max-width: 620px) { 185 | .three-column .column { 186 | max-width: 33% !important; 187 | } 188 | .two-column .column { 189 | max-width: 50% !important; 190 | } 191 | } --------------------------------------------------------------------------------