Creating a Simple Responsive HTML Email [Technique 1]--part 3

Creating the Single Column Image

This is a very simple row; we'll simply set an image to be 100% of the width of the email and make sure its height is set to be automatic using CSS.

1 2 3 4 5

<tr>     <td class="innerpadding borderbottom">         <img src="images/wide.png" width="100%" border="0" alt="" />     </td> </tr>

In our CSS:

1	img {height: auto;}

Creating the Final Plain Text Row

Finally we'll add a row of text without the border on the bottom:

1 2 3 4 5

<tr>     <td class="innerpadding borderbottom">     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.     </td> </tr>

Creating the Footer

To create the footer, we'll add a new row with a table inside. One of the rows will contain another table for our social media icons.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<tr>     <td class="footer" bgcolor="#44525f">         <table width="100%" border="0" cellspacing="0" cellpadding="0">             <tr>                 <td align="center" class="footercopy">                     &amp;reg; Someone, somewhere 2013<br/>                     <a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly                 </td>             </tr>             <tr>                 <td align="center" style="padding: 20px 0 0 0;">                     <table border="0" cellspacing="0" cellpadding="0">                         <tr>                             <td width="37" style="text-align: center; padding: 0 10px 0 10px;">                                 <a href="http://www.facebook.com/">                                     <img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" />                                 </a>                             </td>                             <td width="37" style="text-align: center; padding: 0 10px 0 10px;">                                 <a href="http://www.twitter.com/">                                     <img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" />                                 </a>                             </td>                         </tr>                     </table>                 </td>             </tr>         </table>     </td> </tr>

We'll add the requisite styles for our footer to the CSS:

1 2 3

.footer {padding: 20px 30px 15px 30px;} .footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;} .footercopy a {color: #ffffff; text-decoration: underline;}

Optimising Buttons for Mobile

On mobile, it's ideal if the whole button is a link, not just the text, because it's much harder to target a tiny text link with your finger. Because it's not possible to have this work on all desktop clients (padding isn't fully supported on <a> tags), it's something that I add to the mobile version using media queries.

We'll have to strip the colour from the <td> to which it is currently applied, and then apply it back to the <a> tag along with lots of padding.

I will use both max-width and max-device-width in this media query in an attempt to avoid a bug in Outlook.com on IE9.

1 2 3 4

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) { body[yahoo] .buttonwrapper {background-color: transparent!important;} body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;} }

Now when you tap anywhere on the coloured button on mobile, it's a link!

Further Enhancements With Media Queries

If you wanted to, you could now start making enhancements to your layout by applying class names to elements that you wish to control, and then creating the new rules inside the media query we just created above.

As an example, we'll turn our unsubscribe link into a button, by adding a class to the link:

1 2 3 4

<a href="#" class="unsubscribe">     <font color="#ffffff">Unsubscribe</font> </a> <span class="hide">from this newsletter instantly</span>

and adding the following CSS to the media query:

1	body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}

1	body[yahoo] .hide {display: none!important;}

You could also target the .innerpadding, .header and .footer classes to reduce the amount of padding on clients that support media queries.

Test and Go!

Finally, as always, make sure you validate (using the W3C validator — you should only get one error for the proprietary 'yahoo' attribute on the body tag) and test really well using live devices and a web preview service like Litmus or Email on Acid.

Enjoy creating responsive emails that look great in every email client!

Share on Facebook Share on Twitter Share on Google Plus

About Engr. Rokon Khan