相关疑难解决方法(0)

有哪些HTML电子邮件设计指南？

您可以为电子邮件中的丰富HTML格式提供哪些指导,同时在许多客户端和基于Web的电子邮件界面中保持良好的视觉稳定性

关于Stack Overflow问题的一个不相关的答案表明:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

其中包含以下准则:

放置样式表<body>而不是<head>
某些电子邮件客户端会将CSS从头部剥离,但如果样式块(无效)在正文中,则保留它.
尽可能使用内联样式
Gmail将删除任何样式表,无论是在<head>或中<body>,还是使用该style=""属性分配的荣誉内联样式
返回表格
由于Outlook 2007使用Microsoft Word渲染引擎,近年来电子邮件标准实际上已经倒退了一大步.在没有样式表的情况下,忘掉您学习的大部分定位.
不要依赖
图像除非用户明确要求显示图像,否则大多数客户端和大多数基于Web的电子邮件客户端都不会显示图像.

我也有一些"未经证实"的事实,我不记得我在哪里阅读它们.

不要在表中使用两个以上的嵌套级别
这是真的吗.如果我这样做会发生什么？是否有任何特定的客户/客户窒息？
小心在单元格/表格中嵌套背景图像
据我所知,您可能会遇到背景图像完全重新应用于降序表格/单元格中的情况,而不仅仅是"闪耀".再次,真的与否？哪个客户？

我想从战壕中获得更多的指导和经验,充实这份清单.

你能提供进一步的建议吗？

更新:我特别要求HTML中的设计部分指南和一致性.有关避免垃圾邮件过滤器的一般准则以及常见礼节的问题已经在SO上.

html email

kaa*_*kaa

2017 05-23

99
推荐指数

3
解决办法

4万
查看次数

编写HTML电子邮件时的最佳实践和注意事项

我已经开发了十多年的网站了,但很快就发现,在为电子邮件客户开发时,我开发网络的许多习惯都没用.这让我感到非常沮丧,所以我想我会提出一个问题,希望能够为像我这样的人发现最佳实践和必要的考虑因素,这些人可能会不时地设计gmail,outlook等.

示例: <style>...</style> vs内联CSS.

简而言之:什么从网络世界转移到电子邮件世界,什么没有.

html css html-email

Sam*_*son

2014 05-16

81
推荐指数

3
解决办法

4万
查看次数

在outlook html电子邮件中,float不起作用

我想要这个布局,我有一个矩形框.在左边的框中有一个文本,在右边有一个图像.这在浏览器中看起来很好,但是当作为html电子邮件发送时,在outlook中,浮动权利似乎不起作用.它将图像放在文本下面的下一行.关于如何使这项工作的任何想法？(我试图避免使用表格.)

<div style="width: 100%;border-style:solid;overflow: hidden;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>

Run Code Online (Sandbox Code Playgroud)

css outlook-2007

Foo*_*Foo

lucky-day

34
推荐指数

5
解决办法

8万
查看次数

在android nexus 5(4.4.2)本机邮件应用程序上响应html电子邮件

我有一个测试布局,它使用表格显示两列和媒体查询,它们将两列堆叠在支持媒体查询的电子邮件客户端上.我坚持使用表而不是div,因为我们还需要支持Outlook :(.布局在Android 4.3及以下版本中工作得很好(列叠加)但在Nexus 5(Android 4.4.2)上爆炸.两列第二列完全被挤压后仍然显示在彼此旁边.似乎4.4.2不支持td的显示块.有没有其他人经历过这个？如果是的话,有没有解决这个问题？顺便说一下,看起来只有显示块和显示:Nexus 5不支持内联块,如果我在我的媒体查询中将tds设置为display:none,它们将隐藏在屏幕上.下面是一个基本的html电子邮件模板,它不会工作:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0;width:device-width">
    <!-- So that mobile webkit will display zoomed in -->
    <title>Email template</title>
    <!-- disable auto telephone linking in iOS -->
    <meta name="format-detection" content="telephone=no">
    <style type="text/css">
        @media screen and (max-width:640px) {
            table[class="container"] {
                width: 100%!important;
            }

            td[class="cell"] {
                background-color: #cc3333;
                width: 100%!important;
                display: block!important;
            }
        }
    </style>
</head>
<body>
    <table width="640" align="center" cellpadding="0" cellspacing="0" class="container">
        <tr>
            <td …

Run Code Online (Sandbox Code Playgroud)

html email android responsive-design

Sac*_*hin

2014 01-14

7
推荐指数

1
解决办法

6055
查看次数

在Outlook 2007及更高版本中强制使用电子邮件中的html并排表格

我刚刚遇到Outlook破坏我的HTML电子邮件时遇到的第一个挫折感.

我有一个640像素宽的容器表.在它是两个320px表,一个左对齐,一个右对齐.它们并排在除Word Engined Outlook(2007及更高版本)之外的所有电子邮件客户端中.

这是重要的部分.我有代码在手机上查看时使包含表变为320px宽.这会强制两个表一个在另一个之上.这完全按照计划用于移动设备.

但桌面上的Outlook会渲染左对齐的表格,然后在它下方呈现左侧下方的右侧表格,但仍然向右对齐,在左侧桌子下面创建一个大间隙,在右侧桌子上面形成一个大间隙.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    img 
    {display:block;}
    a 
    {text-decoration:none;}
    a:hover
    {text-decoration: underline !important;}
    td.contentblock p { 
        color:#FFFFFF;
        font-size:16px;
        font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
        margin-top:0;
        margin-bottom:12px;
        padding-top:0;
        padding-bottom:0;
        font-weight:normal;
    }
    td.contentblock p a { 
        color:#e45808;
        text-decoration:none;
    }
    .heading {
        font-size:24px;
        font-weight:bold;
    }
    @media only screen and (max-device-width: 480px) {
         table[class="table"], td[class="cell"] {
              width: 320px !important;
         }
        td[class="footershow"] {
              width: 320px !important;
         }
        table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] …

Run Code Online (Sandbox Code Playgroud)

outlook html-table alignment html-email

Alm*_*er9

2017 06-27

3
推荐指数

2
解决办法

1万
查看次数

强制Thunderbird中的html电子邮件在容器中浮动元素

我有一个问题,Thunderbird没有根据父宽度清除内部表.

在此输入图像描述

顶部图像显示了它应该如何显示,底部显示它在Thunderbird中的外观.

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top"> 

        <table cellpadding="0" cellspacing="0" border="0" align="center" style="max-width: 600px; width: 100%; table-layout: fixed; background:  red;">
            <tr>
                <td valign="top">

            <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>

          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background: …

Run Code Online (Sandbox Code Playgroud)

html css email thunderbird html-email

Joh*_*lia

2013 12-02

2
推荐指数

1
解决办法

1488
查看次数