Mobile opens now capture 49% of the market share so overlooking mobile-friendly emails is a big mistake. In this tutorial, I’m going to show you how to code a simple, responsive HTML email from scratch. Here is a preview of what the email will look like.
Desktop
Mobile
The Approach
This tutorial will break the email down into 3 different parts. If you’re already comfortable with the HTML and styling, you can jump to the media queries section.
- HTML Structure
- CSS
- Media Queries
The HTML
Create the file
Start by creating a new HTML file within your favourite HTML editor. I like to use Dreamweaver for emails, but tools like Sublime Text or Notepad++ will work too.
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>My Responsive Email</title> </head> <body> </body> </html> |
Add a background color
The first thing we need to do is to create a table for the background colour of the email. On the web, this can easily be done by applying CSS to the BODY tag. However, email is a bit more complicated. CSS needs to be added to the BODY tag and a 100% width table needs to contain the background colour as well.
Create a table use bgcolor=”#e9e9e9″./p>
1 2 3 4 5 6 7 |
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#e9e9e9"> <tr> <td> </td> </tr> </table> |
Update the body tag to also have the same background colour as you chose for you 100% wide table.
1 |
<body style="background-color:#e9e9e9;"> |
Now your HTML document should look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>My Responsive Email</title> </head> <body style="background-color:#e9e9e9;"> <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#e9e9e9"> <tr> <td> </td> </tr> </table> </body> </html> |
Add the container table
Next, create a table that will hold the contents of the email, within the table cell of the 100% width table.
1 2 3 4 5 6 7 |
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center" bgcolor="#FFFFFF"> <tr> <td> /* All the content will go inside of this table */ </td> </tr> </table> |
The email should look like this.
Add the header
Create another table that will container the header and insert the logo. Give this table a width of 90% and center it. This will create some padding on either side.
1 2 3 4 5 6 7 |
<table cellpadding="0" cellspacing="0" border="0" width="90%" align="center"> <tr> <td> <img src="logo-placeholder.jpg" width="150" height="51" alt="My Logo"/> </td> </tr> </table> |
Now, the email should have the logo in it.
Add the Banner Image
Directly under the header table, create another table to hold the banner image.
1 2 3 4 5 6 7 |
<table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td> <img src="photo.jpg" width="600" height="338" alt="" style="border:0;margin:0;display:block;" /> </td> </tr> </table> |
The email will now contain the banner image.
Add the Content Section
Directly under the banner table, create another table to hold the main content for the email. This table should be the same width as the header (90%) and should be centered, to create padding on each side.
1 2 3 4 5 6 7 8 9 10 |
<table cellpadding="0" cellsapcing="0" border="0" width="90%" align="center"> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br /> Fusce facilisis accumsan lectus quis aliquam. Donec in nisi vel risus tempus semper a eget dolor. Nulla varius ipsum semper mi suscipit, ut iaculis urna mollis. Nulla vitae bibendum elit. Nulla facilisi. Donec semper leo vel lorem vulputate efficitur. Aliquam in orci a lacus aliquam fermentum. Etiam tincidunt tristique leo at feugiat. Integer luctus eleifend neque, eu convallis nibh malesuada ac. Donec consequat iaculis risus, sed convallis quam finibus sit amet. Donec eget porttitor massa. Vestibulum cursus elit scelerisque tempus tristique. Nam at erat id sem pretium viverra id ac ex. <Br /><br /> Sed vitae tellus ullamcorper, tempus augue ut, interdum lorem. Nam tincidunt quam tortor. Sed bibendum congue luctus. Donec lobortis aliquam nibh, vel venenatis arcu vulputate et. Phasellus pretium convallis velit nec blandit. Phasellus fermentum egestas enim. Maecenas at laoreet mi. Curabitur et ipsum non dolor varius lacinia. Pellentesque hendrerit a sapien ut venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eleifend diam orci, vel aliquet tellus malesuada sit amet. Nunc leo turpis, vehicula at mi vestibulum, lacinia consequat arcu. Etiam viverra nisi eu turpis posuere, vitae viverra eros pretium. </td> </tr> </table> |
No styling has been added yet but it should start to get some structure.
Add a Call-to-Action button
Inside the main content area (right underneath the text). Create a new table that will act as the call-to-action button in the email.
1 2 3 4 5 6 7 |
<table cellpadding="0" cellspacing="0" border="0" width="150" align="center"> <tr> <td> <a href="https://jennamolby.com">Read More</a> </td> </tr> </table> |
Add the Footer
1 2 3 4 5 6 7 8 |
<table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td> © 2015 Jenna Molby. All rights reserved. <br /> If you no longer wish to receive these emails you can <a href="#">unsubscribe</a> at any time. </td> </tr> </table> |
HTML is DONE!
All the HTML is done. Now, the styling can be put in place.
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>My Responsive Email</title> </head> <body style="background-color:#e9e9e9;"> <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#e9e9e9"> <tr> <td> <table cellpadding="0" cellspacing="0" border="0" width="600" align="center" bgcolor="#FFFFFF"> <tr> <td> <!-- Start Header --> <table cellpadding="0" cellspacing="0" border="0" width="90%" align="center"> <tr> <td> <img src="logo-placeholder.jpg" width="150" height="51" alt=""/> </td> </tr> </table> <!-- End Header --> <!-- Start Header Image --> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td> <img src="photo.jpg" width="600" height="338" alt="" style="border:0;margin:0;display:block;" /> </td> </tr> </table> <!-- End Header Image --> <!-- Start Main Content --> <table cellpadding="0" cellsapcing="0" border="0" width="90%" align="center"> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br /> Fusce facilisis accumsan lectus quis aliquam. Donec in nisi vel risus tempus semper a eget dolor. Nulla varius ipsum semper mi suscipit, ut iaculis urna mollis. Nulla vitae bibendum elit. Nulla facilisi. Donec semper leo vel lorem vulputate efficitur. Aliquam in orci a lacus aliquam fermentum. Etiam tincidunt tristique leo at feugiat. Integer luctus eleifend neque, eu convallis nibh malesuada ac. Donec consequat iaculis risus, sed convallis quam finibus sit amet. Donec eget porttitor massa. Vestibulum cursus elit scelerisque tempus tristique. Nam at erat id sem pretium viverra id ac ex. <Br /><br /> Sed vitae tellus ullamcorper, tempus augue ut, interdum lorem. Nam tincidunt quam tortor. Sed bibendum congue luctus. Donec lobortis aliquam nibh, vel venenatis arcu vulputate et. Phasellus pretium convallis velit nec blandit. Phasellus fermentum egestas enim. Maecenas at laoreet mi. Curabitur et ipsum non dolor varius lacinia. Pellentesque hendrerit a sapien ut venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eleifend diam orci, vel aliquet tellus malesuada sit amet. Nunc leo turpis, vehicula at mi vestibulum, lacinia consequat arcu. Etiam viverra nisi eu turpis posuere, vitae viverra eros pretium. <br> <br /> <table cellpadding="0" cellspacing="0" border="0" width="150" align="center"> <tr> <td> <a href="https://jennamolby.com">Read More</a> </td> </tr> </table> </td> </tr> </table> <!--End Main Content --> </td> </tr> </table> <!-- Start Footer --> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td> © 2015 Jenna Molby. All rights reserved. <br /> If you no longer wish to receive these emails you can <a href="#">unsubscribe</a> at any time. </td> </tr> </table> <!-- End Footer --> </td> </tr> </table> </body> </html> |
The CSS
Header Styles
Add some padding to the header and center the logo. The CSS has to be inline and inside the
1 2 3 4 5 6 7 8 9 |
<!-- Start Header --> <table cellpadding="0" cellspacing="0" border="0" width="90%" align="center"> <tr> <td style="padding-top:10px;padding-bottom:10px;text-align:center;"> <img src="logo-placeholder.jpg" width="150" height="51" alt=""/> </td> </tr> </table> <!-- End Header --> |
Style the Main Content
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table cellpadding="0" cellsapcing="0" border="0" width="90%" align="center"> <tr> <td style="padding-top:25px;padding-bottom:25px;font-family:Arial,Verdana,Sans-serif;font-size:13px;line-height:22px;color:#959595;"> <span style="font-size:18px;text-align:center;color:#444444;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br /><br /> Fusce facilisis accumsan lectus quis aliquam. Donec in nisi vel risus tempus semper a eget dolor. Nulla varius ipsum semper mi suscipit, ut iaculis urna mollis. Nulla vitae bibendum elit. Nulla facilisi. Donec semper leo vel lorem vulputate efficitur. Aliquam in orci a lacus aliquam fermentum. Etiam tincidunt tristique leo at feugiat. Integer luctus eleifend neque, eu convallis nibh malesuada ac. Donec consequat iaculis risus, sed convallis quam finibus sit amet. Donec eget porttitor massa. Vestibulum cursus elit scelerisque tempus tristique. Nam at erat id sem pretium viverra id ac ex. <Br /><br /> Sed vitae tellus ullamcorper, tempus augue ut, interdum lorem. Nam tincidunt quam tortor. Sed bibendum congue luctus. Donec lobortis aliquam nibh, vel venenatis arcu vulputate et. Phasellus pretium convallis velit nec blandit. Phasellus fermentum egestas enim. Maecenas at laoreet mi. Curabitur et ipsum non dolor varius lacinia. Pellentesque hendrerit a sapien ut venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eleifend diam orci, vel aliquet tellus malesuada sit amet. Nunc leo turpis, vehicula at mi vestibulum, lacinia consequat arcu. Etiam viverra nisi eu turpis posuere, vitae viverra eros pretium. <br /> <br /> <table cellpadding="0" cellspacing="0" border="0" width="150" align="center"> <tr> <td> <a href="https://jennamolby.com">Read More</a> </td> </tr> </table> </td> </tr> </table> |
Style the Button
1 2 3 4 5 6 7 |
<table cellpadding="0" cellspacing="0" border="0" width="150" align="center" bgcolor="#3498db"> <tr> <td style="font-size:14px;font-weight:bold;font-family:Arial,Verdana,Sans-serif;color:#FFFFFF;text-align:center;padding-top:10px;padding-bottom:10px;"> <a href="https://jennamolby.com" style="color:#FFFFFF;text-decoration:none;">Read More</a> </td> </tr> </table> |
Style the Footer
1 2 3 4 5 6 7 8 9 10 |
<!-- Start Footer --> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="font-family:Arial,Verdana,Sans-serif;font-size:11px;padding-bottom:20px;padding-top:20px;color:#959595;line-height:22px;text-align:center;"> © 2015 Jenna Molby. All rights reserved. <br /> If you no longer wish to receive these emails you can <a href="#" style="color:#3498db">unsubscribe</a> at any time. </td> </tr> </table> <!-- End Footer --> |
Styling is DONE!
Here is what the code looks after adding all the styling.
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>My Responsive Email</title> </head> <body style="background-color:#e9e9e9;"> <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#e9e9e9"> <tr> <td> <table cellpadding="0" cellspacing="0" border="0" width="600" align="center" bgcolor="#FFFFFF"> <tr> <td> <!-- Start Header --> <table cellpadding="0" cellspacing="0" border="0" width="90%" align="center"> <tr> <td style="padding-top:10px;padding-bottom:10px;text-align:center;"> <img src="logo-placeholder.jpg" width="150" height="51" alt=""/> </td> </tr> </table> <!-- End Header --> <!-- Start Header Image --> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td> <img src="photo.jpg" width="600" height="338" alt="" style="border:0;margin:0;display:block;" /> </td> </tr> </table> <!-- End Header Image --> <!-- Start Main Content --> <table cellpadding="0" cellsapcing="0" border="0" width="90%" align="center"> <tr> <td style="padding-top:25px;padding-bottom:25px;font-family:Arial,Verdana,Sans-serif;font-size:13px;line-height:22px;color:#959595;"> <span style="font-size:18px;text-align:center;color:#444444;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br /><br /> Fusce facilisis accumsan lectus quis aliquam. Donec in nisi vel risus tempus semper a eget dolor. Nulla varius ipsum semper mi suscipit, ut iaculis urna mollis. Nulla vitae bibendum elit. Nulla facilisi. Donec semper leo vel lorem vulputate efficitur. Aliquam in orci a lacus aliquam fermentum. Etiam tincidunt tristique leo at feugiat. Integer luctus eleifend neque, eu convallis nibh malesuada ac. Donec consequat iaculis risus, sed convallis quam finibus sit amet. Donec eget porttitor massa. Vestibulum cursus elit scelerisque tempus tristique. Nam at erat id sem pretium viverra id ac ex. <Br /><br /> Sed vitae tellus ullamcorper, tempus augue ut, interdum lorem. Nam tincidunt quam tortor. Sed bibendum congue luctus. Donec lobortis aliquam nibh, vel venenatis arcu vulputate et. Phasellus pretium convallis velit nec blandit. Phasellus fermentum egestas enim. Maecenas at laoreet mi. Curabitur et ipsum non dolor varius lacinia. Pellentesque hendrerit a sapien ut venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eleifend diam orci, vel aliquet tellus malesuada sit amet. Nunc leo turpis, vehicula at mi vestibulum, lacinia consequat arcu. Etiam viverra nisi eu turpis posuere, vitae viverra eros pretium. <br> <br /> <table cellpadding="0" cellspacing="0" border="0" width="150" align="center" bgcolor="#3498db"> <tr> <td style="font-size:14px;font-weight:bold;font-family:Arial,Verdana,Sans-serif;color:#FFFFFF;text-align:center;padding-top:10px;padding-bottom:10px;"> <a href="https://jennamolby.com" style="color:#FFFFFF;text-decoration:none;">Read More</a> </td> </tr> </table> </td> </tr> </table> <!--End Main Content --> </td> </tr> </table> <!-- Start Footer --> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="font-family:Arial,Verdana,Sans-serif;font-size:11px;padding-bottom:20px;padding-top:20px;color:#959595;line-height:22px;text-align:center;"> © 2015 Jenna Molby. All rights reserved. <br /> If you no longer wish to receive these emails you can <a href="#" style="color:#3498db">unsubscribe</a> at any time. </td> </tr> </table> <!-- End Footer --> </td> </tr> </table> </body> </html> |
The Media Queries
Add the Viewport Meta
The viewport meta tag needs to be placed right before the title tag.
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
Add the CSS and the Media Query
2 CSS classes will need to be added to scale down the email on mobile properly
- .device-width: This will be added to the 600px container table and the image.
- .btn-full: This will be added to the table that was created for the button.
1 2 3 4 5 6 |
<style type="text/css"> @media only screen and (max-width: 480px){ .device-width {width:320px !important;height:auto !important;} .btn-full {width:100% !important;} } </style> |
Add the Classes to the Elements
Add the class device-width to the big image and the 600px wide container table. Also add the btn-full class to the table that contains the call-to-action.
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>My Responsive Email</title> <style type="text/css"> @media only screen and (max-width: 480px){ .device-width {width:320px !important;height:auto !important;} .btn-full {width:100% !important;} } </style> </head> <body style="background-color:#e9e9e9;"> <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#e9e9e9"> <tr> <td> <table cellpadding="0" cellspacing="0" border="0" width="600" align="center" bgcolor="#FFFFFF" class="device-width"> <tr> <td> <!-- Start Header --> <table cellpadding="0" cellspacing="0" border="0" width="90%" align="center"> <tr> <td style="padding-top:10px;padding-bottom:10px;text-align:center;"> <img src="logo-placeholder.jpg" width="150" height="51" alt=""/> </td> </tr> </table> <!-- End Header --> <!-- Start Header Image --> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td> <img src="photo.jpg" width="600" height="338" alt="" style="border:0;margin:0;display:block;" class="device-width" /> </td> </tr> </table> <!-- End Header Image --> <!-- Start Main Content --> <table cellpadding="0" cellsapcing="0" border="0" width="90%" align="center"> <tr> <td style="padding-top:25px;padding-bottom:25px;font-family:Arial,Verdana,Sans-serif;font-size:13px;line-height:22px;color:#959595;"> <span style="font-size:18px;text-align:center;color:#444444;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br /><br /> Fusce facilisis accumsan lectus quis aliquam. Donec in nisi vel risus tempus semper a eget dolor. Nulla varius ipsum semper mi suscipit, ut iaculis urna mollis. Nulla vitae bibendum elit. Nulla facilisi. Donec semper leo vel lorem vulputate efficitur. Aliquam in orci a lacus aliquam fermentum. Etiam tincidunt tristique leo at feugiat. Integer luctus eleifend neque, eu convallis nibh malesuada ac. Donec consequat iaculis risus, sed convallis quam finibus sit amet. Donec eget porttitor massa. Vestibulum cursus elit scelerisque tempus tristique. Nam at erat id sem pretium viverra id ac ex. <Br /><br /> Sed vitae tellus ullamcorper, tempus augue ut, interdum lorem. Nam tincidunt quam tortor. Sed bibendum congue luctus. Donec lobortis aliquam nibh, vel venenatis arcu vulputate et. Phasellus pretium convallis velit nec blandit. Phasellus fermentum egestas enim. Maecenas at laoreet mi. Curabitur et ipsum non dolor varius lacinia. Pellentesque hendrerit a sapien ut venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eleifend diam orci, vel aliquet tellus malesuada sit amet. Nunc leo turpis, vehicula at mi vestibulum, lacinia consequat arcu. Etiam viverra nisi eu turpis posuere, vitae viverra eros pretium. <br> <br /> <table cellpadding="0" cellspacing="0" border="0" width="150" align="center" bgcolor="#3498db" class="btn-full"> <tr> <td style="font-size:14px;font-weight:bold;font-family:Arial,Verdana,Sans-serif;color:#FFFFFF;text-align:center;padding-top:10px;padding-bottom:10px;"> <a href="https://jennamolby.com" style="color:#FFFFFF;text-decoration:none;">Read More</a> </td> </tr> </table> </td> </tr> </table> <!--End Main Content --> </td> </tr> </table> <!-- Start Footer --> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="font-family:Arial,Verdana,Sans-serif;font-size:11px;padding-bottom:20px;padding-top:20px;color:#959595;line-height:22px;text-align:center;"> © 2015 Jenna Molby. All rights reserved. <br /> If you no longer wish to receive these emails you can <a href="#" style="color:#3498db">unsubscribe</a> at any time. </td> </tr> </table> <!-- End Footer --> </td> </tr> </table> </body> </html> |
Now if you shrink down the email template, it should detect the screensize and scale the email perfectly.
Questions?
Email me, or send me a tweet @jennamolby.
This is awesome, thank you for making it easy to follow.
Thank you for the break down – it makes it so much easier this way for those trying to get started and for getting your head around responsive email.