What is a best Approach for Responsive Email Design 2016

Responsive is a term now-a-days everybody knows pretty well but sadly not most of the people use it when it comes to email.

There are lots of reasons why most brands are still not using responsive emails and even those who are using, are facing challenges in respect of design, layout and content.

At Hashvash, we were experimenting and implementing the new patches and hacks from time to time for our clients and ultimately got the solution for the exact Approach towards responsive email designing. We are here thus, sharing our experience with you all so that you should be suffering less than us, as responsive email is a pain for those who are trying their hands at it.

CHALLENGES
When it comes to responsive email, there are a lot of challenges which exist and sadly, Apps and E-mail browsers do not seem to add a fix upon this. So here we have a solution to counter it with our code.

Let’s discuss about the major challenges which we faced:

  1. Gmail App was a Real Pain: Biggest setback for us was that the Gmail App where we have tried lots of innovative things and changed our paradigm heavily to achieve the exact design like it is in iOS.
    Android is a most popular mobile OS right now in the market and almost 90% of the Android users use Gmail App to access their mail. So it is extremely important for us to organize our email with it.
  2. Responsive Email do not works on every mobile.
  3. Not every design can turn into Responsive Email, so we need to plan out the design first.
  4. Media Queries also do not respond equally in all supported mailing Apps.

blog_inside

A LITTLE INTRODUCTION ABOUT RESPONSIVE EMAIL
Responsive email uses media queries, also known as @media. Media queries detect the screen size of a device and then “turn on” different sets of rules based on that screen size. Responsive Email Designs require more planning and testing than standard html emails, and they don’t work in all email clients.
It’s a simple implementation of media queries—nothing too advanced was happening. Responsive email, on the other hand, uses media queries to change the layout of emails, adjust the size of text, images, and buttons, and, and in some cases, hide or even swap content between desktop and mobile devices. You add them like this:

@media screen and (max-width: 600px) {
Your awesome style goes here
}

The minimum font size displayed on iPhones is 13 pixels. Keep this in mind when styling text, because anything smaller will be up scaled and could break your layout.

Responsive email design is not supported by below devices:

  • Android Gmail App
  • Android Yahoo! Gmail App
  • Windows mobile 6.1
  • Windows mobile 7
  • Windows mobile 8

OUR APPROACH

As I said, we tried lots of hacks but I will tell you only the one which worked for us.

Recently I came across the Zurb Foundation email framework, I immediately downloaded their few templates and ran some tests after customizing a bit but results were not as I was thinking them to be. So I got back on my earlier code which was working 90% correct for me but not 100%.

During all this we were started losing hopes as testing repeatedly and every time opening email with the hope of fixed design in mobile devices were setting us aback in achieving 100% result, but we didn’t accept our defeat.

So what we did and tried which worked for us in major mobile devices..?
To get your mailer responsive the solution is to use display: “inline –block” with the combination of text-align:”center”: your element will come perfectly in centered position.

Inside your cell use (div) tag with display: inline-block property, this rule follow text-align property on the cell. Below is a sample code for you to test and check the results.

 

<style>
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
table {border-collapse: collapse;}
@media only screen and (max-width: 640px) {
body .deviceWidth {width:440px!important; padding:0;}
body .center {text-align: center!important;}
}
@media only screen and (max-width: 480px) {
body .deviceWidth {width:280px!important; padding:0;}
body .center {text-align: center!important;}
}
</style>

<!– Change Background colors, and text colors as needed–>
<!– Wrapper –>

<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center”>
<tr>
<td width=”100%” valign=”top” bgcolor=”#ffffff” style=”padding-top:20px”>

<!– Start Header–>
<table width=”575″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” class=”deviceWidth”>
<tr>
<td width=”100%” bgcolor=”#ffffff”>

<p>
<!–content here–>
</p>
</table>
<!– End Header –>

<!– One Column –>
<table width=”570″ class=”deviceWidth” border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” >
<tr>
<td valign=”top” style=”padding:0″ bgcolor=”#ffffff”>
<a href=”#”>
<img src=”xyz.jpg”>
</a>
</td>

</tr>
</table>
<!– End One Column –>

<div style=”height:15px”>
</div>

<!– two column –>
<table width=”575″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” class=”deviceWidth” bgcolor=”#FFFFFF”>
<tr>
<td class=”center” style=”padding:10px 0 0 5px”>

<table width=”49%” border=”0″ cellpadding=”0″ cellspacing=”0″ align=”left” class=”deviceWidth”>
<tr>
<td align=”center”>
<!– The paragraph tag is important here to ensure that this table floats properly in Outlook
This fix is used for all floating tables, The margin set to 0 is for Gmail –>

<!–Column 1 – IMG 1–>
<p style=”mso-table-lspace:0;mso-table-rspace:0; margin:0″>
<a href=”#”>
<img src=”” class=”deviceWidth” />
</a>
</p>
</td>
</tr>
<tr>
<td style=”font-size: 12px; color: #000000; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: top; padding: 0px 8px 10px 8px”>

<table>
<tr>
<td valign=”middle” style=”padding:0 10px 10px 0″>
<a href=”#” style=”text-decoration: none; text-align:center; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif”>
abc demo text</a>
</tr>
</table>
<p style=”text-align:center; font-size: 10px; line-height:17px”>
<p>
</td>
</tr>
</table>
<!–Column 1 – END IMG 1–>
<!–Column 1 – IMG 2–>
<table width=”49%” border=”0″ cellpadding=”0″ cellspacing=”0″ align=”left” class=”deviceWidth”>
<tr>
<td align=”center”>
<p style=”mso-table-lspace:0;mso-table-rspace:0; margin:0″>
<a href=”#”>
<img src=”” class=”deviceWidth” />
</a>
</p>
</td>
</tr>
<tr>
<td style=”font-size: 12px; color: #000000; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: top; padding: 0px 8px 0px 8px”>

<table>
<tr>
<td valign=”middle” style=”padding:0 10px 10px 0″>
<a href=”#” style=”text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif “>
</a>
</td>
</tr>
</table>

<p>
Demo Text</p>
</td>
</tr>
</table>

</td>
</tr>
</table>
<!– End Two Column–>
<div style=”height:25px”>
</div>
<!– spacer –>
<!– Footer –>
<table width=”575″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” class=”deviceWidth” >
<tr>
<td style=”vertical-align: middle;font-size:11px;padding:5px;”>
To unsubscribe please click <a href=”#”>
here</a>
</td>
<td style=”vertical-align: top;font-size:12px; padding: 5px;”>
[follow]</td>
</tr>
</table>
<div style=”height:25px”>
</div>
<!– spacer –>

</td>
</tr>
</table>
<!– End Wrapper –>

 

(div) tag is most powerful way to get your mailer responsive in Gmail App, Ymail App, outlook.

CONCLUSION

After following the above Approach we managed to land the same design in the email clients who supports responsive email and others email clients showed the desktop version of the email, which is pretty safe and acceptable by us and by our clients too.

We believe you also gained some good insight out of our experience.
Please comment down with your questions and suggestions.

If you want us to design and code your e-mailer then please write to us at info@hashvash.com, we will be happy to do that.

If you want to know about our company then please visit our website: Hashvash

Spread the love
Peeyush

Peeyush

Email Marketing Expert at Hashvash
Front-end developer, Email enthusiast, music lover and a good friend.
Peeyush

Latest posts by Peeyush (see all)

  • Akshay Chauhan

    Very informative blog. Good going!

  • Nitish

    This code is really helpful for beginners.

    • Peeyush

      Thanks nitish for appreciation.