├── images
    ├── header.jpg
    ├── sidebar-01.jpg
    ├── sidebar-02.jpg
    ├── two-column-01.jpg
    ├── two-column-02.jpg
    ├── three-column-01.jpg
    ├── three-column-02.jpg
    └── three-column-03.jpg
├── README.md
├── styles.css
└── index.html


/images/header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/HEAD/images/header.jpg


--------------------------------------------------------------------------------
/images/sidebar-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/HEAD/images/sidebar-01.jpg


--------------------------------------------------------------------------------
/images/sidebar-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/HEAD/images/sidebar-02.jpg


--------------------------------------------------------------------------------
/images/two-column-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/HEAD/images/two-column-01.jpg


--------------------------------------------------------------------------------
/images/two-column-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/HEAD/images/two-column-02.jpg


--------------------------------------------------------------------------------
/images/three-column-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/HEAD/images/three-column-01.jpg


--------------------------------------------------------------------------------
/images/three-column-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/HEAD/images/three-column-02.jpg


--------------------------------------------------------------------------------
/images/three-column-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emailwizardry/creating-a-future-proof-responsive-email-without-media-queries/HEAD/images/three-column-03.jpg


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 | 	<title></title>
  8 | 	<link rel="stylesheet" type="text/css" href="styles.css" />
  9 | 	<!--[if (gte mso 9)|(IE)]>
 10 | 	<style type="text/css">
 11 | 		table {border-collapse: collapse;}
 12 | 	</style>
 13 | 	<![endif]-->
 14 | </head>
 15 | <body>
 16 | 	<center class="wrapper">
 17 | 		<div class="webkit">
 18 | 			<!--[if (gte mso 9)|(IE)]>
 19 | 			<table width="600" align="center">
 20 | 			<tr>
 21 | 			<td>
 22 | 			<![endif]-->
 23 | 			<table class="outer" align="center">
 24 | 				<tr>
 25 | 					<td class="full-width-image">
 26 | 						<img src="images/header.jpg" alt="" />
 27 | 					</td>
 28 | 				</tr>
 29 | 				<tr>
 30 | 					<td class="one-column">
 31 | 						<table width="100%">
 32 | 							<tr>
 33 | 								<td class="inner contents">
 34 | 									<p class="h1">Lorem ipsum dolor sit amet</p>
 35 | 									<p>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.</p>
 36 | 								</td>
 37 | 							</tr>
 38 | 						</table>
 39 | 					</td>
 40 | 				</tr>
 41 | 				<tr>
 42 | 					<td class="two-column">
 43 | 						<!--[if (gte mso 9)|(IE)]>
 44 | 						<table width="100%">
 45 | 						<tr>
 46 | 						<td width="50%" valign="top">
 47 | 						<![endif]-->
 48 | 						<div class="column">
 49 | 							<table width="100%">
 50 | 								<tr>
 51 | 									<td class="inner">
 52 | 										<table class="contents">
 53 | 											<tr>
 54 | 												<td>
 55 | 													<img src="images/two-column-01.jpg" alt="" />
 56 | 												</td>
 57 | 											</tr>
 58 | 											<tr>
 59 | 												<td class="text">
 60 | 													Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 61 | 												</td>
 62 | 											</tr>
 63 | 										</table>
 64 | 									</td>
 65 | 								</tr>
 66 | 							</table>
 67 | 						</div>
 68 | 						<!--[if (gte mso 9)|(IE)]>
 69 | 						</td><td width="50%" valign="top">
 70 | 						<![endif]-->
 71 | 						<div class="column">
 72 | 							<table width="100%">
 73 | 								<tr>
 74 | 									<td class="inner">
 75 | 										<table class="contents">
 76 | 											<tr>
 77 | 												<td>
 78 | 													<img src="images/two-column-02.jpg" alt="" />
 79 | 												</td>
 80 | 											</tr>
 81 | 											<tr>
 82 | 												<td class="text">
 83 | 													Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.  
 84 | 												</td>
 85 | 											</tr>
 86 | 										</table>
 87 | 									</td>
 88 | 								</tr>
 89 | 							</table>
 90 | 						</div>
 91 | 						<!--[if (gte mso 9)|(IE)]>
 92 | 						</td>
 93 | 						</tr>
 94 | 						</table>
 95 | 						<![endif]-->
 96 | 					</td>
 97 | 				</tr>
 98 | 				<tr>
 99 | 					<td class="three-column">
100 | 						<!--[if (gte mso 9)|(IE)]>
101 | 						<table width="100%">
102 | 						<tr>
103 | 						<td width="200" valign="top">
104 | 						<![endif]-->
105 | 						<table class="column">
106 | 							<tr>
107 | 								<td class="inner">
108 | 									<table class="contents">
109 | 										<tr>
110 | 											<td>
111 | 												<img src="images/three-column-01.jpg" alt="" />
112 | 											</td>
113 | 										</tr>
114 | 										<tr>
115 | 											<td class="text">
116 | 												Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. 
117 | 											</td>
118 | 										</tr>
119 | 									</table>
120 | 								</td>
121 | 							</tr>
122 | 						</table>
123 | 						<!--[if (gte mso 9)|(IE)]>
124 | 						</td><td width="200" valign="top">
125 | 						<![endif]-->
126 | 						<table class="column">
127 | 							<tr>
128 | 								<td class="inner">
129 | 									<table class="contents">
130 | 										<tr>
131 | 											<td>
132 | 												<img src="images/three-column-02.jpg" alt="" />
133 | 											</td>
134 | 										</tr>
135 | 										<tr>
136 | 											<td class="text">
137 | 												Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. 
138 | 											</td>
139 | 										</tr>
140 | 									</table>
141 | 								</td>
142 | 							</tr>
143 | 						</table>
144 | 						<!--[if (gte mso 9)|(IE)]>
145 | 						</td><td width="200" valign="top">
146 | 						<![endif]-->
147 | 						<table class="column">
148 | 							<tr>
149 | 								<td class="inner">
150 | 									<table class="contents">
151 | 										<tr>
152 | 											<td>
153 | 												<img src="images/three-column-03.jpg" alt="" />
154 | 											</td>
155 | 										</tr>
156 | 										<tr>
157 | 											<td class="text">
158 | 												Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.
159 | 											</td>
160 | 										</tr>
161 | 									</table>
162 | 								</td>
163 | 							</tr>
164 | 						</table>
165 | 						<!--[if (gte mso 9)|(IE)]>
166 | 						</td>
167 | 						</tr>
168 | 						</table>
169 | 						<![endif]-->
170 | 					</td>
171 | 				</tr>
172 | 				<tr>
173 | 					<td class="three-column">
174 | 						<!--[if (gte mso 9)|(IE)]>
175 | 						<table width="100%">
176 | 						<tr>
177 | 						<td width="200" valign="top">
178 | 						<![endif]-->
179 | 						<table class="column">
180 | 							<tr>
181 | 								<td class="inner contents">
182 | 									<p class="h2">Fashion</p>
183 | 									<p>Class eleifend aptent taciti sociosqu ad litora torquent conubia</p>
184 | 									<p><a href="#">Read requirements</a></p>
185 | 								</td>
186 | 							</tr>
187 | 						</table>
188 | 						<!--[if (gte mso 9)|(IE)]>
189 | 						</td><td width="200" valign="top">
190 | 						<![endif]-->
191 | 						<table class="column">
192 | 							<tr>
193 | 								<td class="inner contents">
194 | 									<p class="h2">Photography</p>
195 | 									<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor</p>
196 | 									<p><a href="#">See examples</a></p>
197 | 								</td>
198 | 							</tr>
199 | 						</table>
200 | 						<!--[if (gte mso 9)|(IE)]>
201 | 						</td><td width="200" valign="top">
202 | 						<![endif]-->
203 | 						<table class="column">
204 | 							<tr>
205 | 								<td class="inner contents">
206 | 									<p class="h2">Design</p>
207 | 									<p>Class aptent taciti sociosqu eleifend ad litora per conubia nostra</p>
208 | 									<p><a href="#">See the winners</a></p>
209 | 								</td>
210 | 							</tr>
211 | 						</table>
212 | 						<!--[if (gte mso 9)|(IE)]>
213 | 						</td>
214 | 						</tr>
215 | 						<tr>
216 | 						<td width="200" valign="top">
217 | 						<![endif]-->
218 | 						<table class="column">
219 | 							<tr>
220 | 								<td class="inner contents">
221 | 									<p class="h2">Cooking</p>
222 | 									<p>Class aptent taciti eleifend sociosqu ad litora torquent conubia</p>
223 | 									<p><a href="#">Read recipes</a></p>
224 | 								</td>
225 | 							</tr>
226 | 						</table>
227 | 						<!--[if (gte mso 9)|(IE)]>
228 | 						</td><td width="200" valign="top">
229 | 						<![endif]-->
230 | 						<table class="column">
231 | 							<tr>
232 | 								<td class="inner contents">
233 | 									<p class="h2">Woodworking</p>
234 | 									<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor</p>
235 | 									<p><a href="#">See examples</a></p>
236 | 								</td>
237 | 							</tr>
238 | 						</table>
239 | 						<!--[if (gte mso 9)|(IE)]>
240 | 						</td><td width="200" valign="top">
241 | 						<![endif]-->
242 | 						<table class="column">
243 | 							<tr>
244 | 								<td class="inner contents">
245 | 									<p class="h2">Craft</p>
246 | 									<p>Class aptent taciti sociosqu ad eleifend litora per conubia nostra</p>
247 | 									<p><a href="#">Vote now</a></p>
248 | 								</td>
249 | 							</tr>
250 | 						</table>
251 | 						<!--[if (gte mso 9)|(IE)]>
252 | 						</td>
253 | 						</tr>
254 | 						</table>
255 | 						<![endif]-->
256 | 					</td>
257 | 				</tr>
258 | 				<tr>
259 | 					<td class="left-sidebar">
260 | 						<!--[if (gte mso 9)|(IE)]>
261 | 						<table width="100%">
262 | 						<tr>
263 | 						<td width="100">
264 | 						<![endif]-->
265 | 						<table class="column left">
266 | 							<tr>
267 | 								<td class="inner">
268 | 									<img src="images/sidebar-01.jpg" width="80" height="80" alt="" />
269 | 								</td>
270 | 							</tr>
271 | 						</table>
272 | 						<!--[if (gte mso 9)|(IE)]>
273 | 						</td><td width="500">
274 | 						<![endif]-->
275 | 						<table class="column right">
276 | 							<tr>
277 | 								<td class="inner contents">
278 | 									Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="#">Read&nbsp;on</a>
279 | 								</td>
280 | 							</tr>
281 | 						</table>
282 | 						<!--[if (gte mso 9)|(IE)]>
283 | 						</td>
284 | 						</tr>
285 | 						</table>
286 | 						<![endif]-->
287 | 					</td>
288 | 				</tr>
289 | 				<tr>
290 | 					<td class="right-sidebar" dir="rtl">
291 | 						<!--[if (gte mso 9)|(IE)]>
292 | 						<table width="100%" dir="rtl">
293 | 						<tr>
294 | 						<td width="100">
295 | 						<![endif]-->
296 | 						<table class="column left" dir="ltr">
297 | 							<tr>
298 | 								<td class="inner contents">
299 | 									<img src="images/sidebar-02.jpg" width="80" height="80" alt="" />
300 | 								</td>
301 | 							</tr>
302 | 						</table>
303 | 						<!--[if (gte mso 9)|(IE)]>
304 | 						</td><td width="500">
305 | 						<![endif]-->
306 | 						<table class="column right" dir="ltr">
307 | 							<tr>
308 | 								<td class="inner contents">
309 | 									Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per&nbsp;inceptos</a>
310 | 								</td>
311 | 							</tr>
312 | 						</table>
313 | 						<!--[if (gte mso 9)|(IE)]>
314 | 						</td>
315 | 						</tr>
316 | 						</table>
317 | 						<![endif]-->
318 | 					</td>
319 | 				</tr>
320 | 			</table>
321 | 			<!--[if (gte mso 9)|(IE)]>
322 | 			</td>
323 | 			</tr>
324 | 			</table>
325 | 			<![endif]-->
326 | 		</div>
327 | 	</center>
328 | </body>
329 | </html>


--------------------------------------------------------------------------------