I’m trying to make this email responsive on both mobile and desktop. When I test this on Gmail mobile app the email does not collapse. The columns hold the 6 by 6 grid instead of forming into full with 12 grids each. Can anyone help me figure out what the issue is? I’ve already inlined my CSS using Zurb inliner. But the issue with the grids not collapsing is still there.
Also can anyone let me know of an email tester they would recommend to test responsive emails during development.
Here is a link to the email template on Codepen
http://codepen.io/anon/pen/JEBVWK
Below is an example of one of the columns that should be 12 column width when on small and 6 by 6 column when on large, but remains 2 x 6 columns side by side even in Gmail app
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; padding: 0;">
<tbody>
<tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
<th align="left" class="small-12 large-6 columns" style="width: 274px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; line-height: 1.3; font-size: 16px; margin: 0 auto; padding: 0 8px 16px 16px;">
<ul class="disc">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales sapien aliquam arcu egestas dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales</li>
</ul>
<table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; padding: 0;">
<tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
<td></td>
</tr>
</table>
</th>
<th align="left" class="small-12 large-6 columns last" style="width: 274px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; line-height: 1.3; font-size: 16px; margin: 0 auto; padding: 0 16px 16px 8px;">
<ul class="disc">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales sapien aliquam arcu egestas dignissim.</li>
</ul>
<table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; padding: 0;">
<tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
<td></td>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
I have found the Zurb template to be annoying as well. The template you are using was built pre-hybrid period. The code is heavily dependent on media queries which will only work on iOS and Android 4.4 and below. Try the hybrid method of coding. If you haven't heard of hybrid, it's the only method that allows all devices to show a responsive version of an email (even Gmail, Gmail app and Samsung devices).
I wrote a step by step method (originally in SO Documentation, now shown below) that you can use to build your own template in no time. You can use inliner websites online to inline you CSS if you have them in your header. Please let me know if you need my help in creating a full template in any way.
Coding method used: Hybrid/Spongy
It has been forever a myth that div's can not be used in emails. There are email clients (unlike outlook) that can render div's properly. The example below will illustrate how an email can be coded that will work on Gmail app (with updates not rolled out yet), Samsung device's and other email clients that don't read media queries.
Introducing Outlook conditional statements
Outlook conditional statements are very useful when it come to rendering emails or showing something specific like fall backs for outlook.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
The above code reads if greater than microsoft outlook 9 or IE
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
Versions for conditional statements listed.
Starting a hybrid email template
Each step has been explained in a way that it should be easy for anyone with basic HTML knowledge to understand.
First we start with a wrapper table which will span all the way across the screen and with a class of container.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
After that we add in a media query for email clients that dont read max width but read the CSS in the header. The media query will be targeting all screens and showing the container at 700 pixels width.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
Next we add an outlook conditional statement that keeps the table (with class container) to be at a width of 700 pixels.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
The above code should now hold your template in outlook at 700px wide.
Now for the columns. Below code will create two equal columns on the template both at 350px wide.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
After this the limit is only your imagination or the designer. When designs are done it is important to be involved in the wire framing stage so there are no suprises once the design is in coding stage.
Note:
- Retina images will need images set at the element level not on its style
- You can still choose to do in-line CSS or you can choose to CSS in head only if all your clients support CSS in the head.
