试图让电子邮件在使用Zurb基金会的响应式列点处崩溃 [英] Trying to get email to collapse at responsive column points using Zurb Foundation
问题描述
我试图在移动设备和桌面设备上对此电子邮件进行响应。当我在Gmail移动应用程序上测试时，电子邮件不会崩溃。该列保持6乘6格，而不是每格12格。任何人都可以帮我弄清楚是什么问题？我已经使用Zurb inliner将我的CSS内联了。但是网格问题还没有解决。
任何人都可以让我知道他们会建议在开发过程中测试响应电子邮件的电子邮件测试人员。
这是一个链接到Codepen上的电子邮件模板
http://codepen.io/anon/pen/JEBVWK
下面是一个例子其中一列应为12列宽，6列时为6列，但在Gmail应用程序中并排保留2 x 6列
< table class =rowstyle =border-spacing：0; border-collapse：collapse; vertical-align：top; text-align：left; width：100％; position ：relative; display：table; padding：0;>
< tbody>
< tr align =leftstyle =vertical-align：top; text-align：left; padding：0;>
< li> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。你可以在这里找到你想要的东西。 Lorem ipsum dolor坐在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 =leftstyle =vertical-align：top; text-align：left; padding：0;>
< td>< / td>
< / tr>
< / table>
< / th>
< li> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 < / li>< / li>
< / ul>
< table style =border-spacing：0; border-collapse：collapse; vertical-align：top; text-align：left; width：100％; padding：0;>
< tr align =leftstyle =vertical-align：top; text-align：left; padding：0;>
< td>< / td>
< / tr>
< / table>
< / th>
< / tr>
< / tbody>
< / table>
我发现Zurb模板也很烦人。您使用的模板是建立在混合前期。该代码严重依赖媒体查询，这些查询仅适用于iOS和Android 4.4及更低版本。尝试混合编码方法。如果您还没有听说过混合动力，那么它是唯一允许所有设备显示电子邮件的响应版本（甚至是Gmail，Gmail应用和三星设备）的方法。
我编写了一步一步的方法（最初在SO文档中，现在在下面显示），您可以立即使用它来构建自己的模板。如果您的标题中包含CSS，您可以在线使用内联网站来将您的CSS内联。请让我知道你是否需要我帮助以任何方式创建一个完整的模板。
使用的编码方法：混合/ Spongy
介绍Outlook条件语句
Outlook条件语句对于呈现电子邮件或显示特定内容对于展望。
<！ - [if（gte mso 9）|（IE）]>
<！[endif] - >
如果大于microsoft outlook 9或IE p>
Outlook 2000 - 版本9
Outlook 2002 - 版本10
Outlook 2003 - 版本11
Outlook 2007 - 版本12
Outlook 2010 - 版本14
Outlook 2013 - 版本15
列出条件语句的版本。
启动混合电子邮件模板
步骤已经解释过，对于具有基本HTML知识的人来说应该很容易理解。
首先我们从一个封装表开始，它将跨越所有路屏幕和一类容器。
< table width =100％border =0cellspacing = 0cellpadding =0>
< tbody>
< tr>
< td> [内容进入此处]< / td>
< / tr>
< / tbody>
< / table>
之后，我们为电子邮件客户端添加一个媒体查询，它不读取最大宽度但读取CSS标题。媒体查询将以所有屏幕为目标，并以700像素宽度显示容器。
@media仅屏幕和（最大宽度：700px）{
.container {width：700px;}
}
接下来，我们添加一个outlook条件语句，该语句使表（使用类容器）的宽度为700像素。
<！ - [if（gte mso 9）|（IE）]>
< table width =700align =centercellpadding =0cellspacing =0border =0>
< tr>
< td align =leftvalign =topwidth =700>
<！[endif] - >
< tbody>
< tr>
< td valign =topbgcolor =＃FFFFFFstyle =padding：0px; text-align：center; vertical-align：top; font-size：0px;> [CONTENT GOES HERE ] LT; / TD>
< / tr>
< / tbody>
< / table>
<！ - [if（gte mso 9）|（IE）]>
< / td>
< / tr>
< / table>
<！[endif] - >
上面的代码现在应该在700px宽的Outlook中保存模板。
现在为列。下面的代码将在模板上创建两个相等的列，宽度均为350px。
<！ - [if（gte mso 9 ）|（IE）] GT;
< table width =700align =centercellpadding =0cellspacing =0border =0>
< tr>
< td align =leftvalign =topwidth =350>
<！[endif] - >
< div style =width：350px; display：inline-block; vertical-align：top;>
< table width =100％border =0cellspacing =0cellpadding =0>
< tbody>
< tr>
< td> [栏目内容]< / td>
< / tr>
< / tbody>
< / table>
< / div>
<！ - [if（gte mso 9）|（IE）]>
< / td>< td align =leftvalign =topwidth =300>
<！[endif] - >
< div style =width：350px; display：inline-block; vertical-align：top;>
< table width =100％border =0cellspacing =0cellpadding =0>
< tbody>
< tr>
< td> [栏目内容]< / td>
< / tr>
< / tbody>
< / table>
< / div>
<！ - [if（gte mso 9）|（IE）]>
< / td>
< / tr>
< / table>
<！[endif] - >
此限制仅限于您的想象力或设计师。设计完成后，重要的是要参与线框架阶段，所以一旦设计处于编码阶段就没有惊喜。
注意： strong>
- 视网膜图像需要在元素级别设置图像而不是其样式
- 您仍然可以选择做内嵌的CSS，或者你可以选择仅CSS头如果所有客户端都支持CSS。
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.
这篇关于试图让电子邮件在使用Zurb基金会的响应式列点处崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
