程序员经验分享-hwhale

适用于移动设备的响应式订单确认电子邮件？

2024-05-18

我从未见过令人惊叹的订单确认/发票电子邮件。即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件（有时是纯文本）。我相信这是因为发票通常需要使用表格来显示购买的物品，这在移动设备上实现起来非常困难。

我发现了一些让手机上的表格更易于管理的技巧：http://css-tricks.com/examples/ResponsiveTables/responsive.php http://css-tricks.com/examples/ResponsiveTables/responsive.php，但对于订单确认电子邮件，这种方法对于发票表来说并不实用。

有没有其他方法可以让订单确认电子邮件在移动设备上看起来更美观？在发送订单确认电子邮件时，您应该远离餐桌吗？


像这样的事情怎么样？这使用了适用于所有主要客户端的流体/液体技术，包括那些不支持媒体查询的客户端（Gmail 等...）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    table td {border-collapse: collapse;}
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#CCCCCC" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center">


<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td align="left" valign="middle" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 24px; color: #353535; padding:3%; padding-top:40px; padding-bottom:40px;">
      Invoice
    </td>
  </tr>
  <tr>
    <td align="center">
      <table width="94%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="70%" align="left" bgcolor="#252525" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #EEEEEE; padding:10px; padding-right:0;">
            Item
          </td>
          <td width="30%" align="right" bgcolor="#252525" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #EEEEEE; padding:10px; padding-left:0;">
            Price
          </td>
        </tr>
        <tr>
          <td width="70%" align="left" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
            Nike Shoes
          </td>
          <td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            $100
          </td>
        </tr>
        <tr>
          <td width="70%" align="left" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
            Spy Sunglasses
          </td>
          <td width="30%" align="right" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            $120
          </td>
        </tr>
        <tr>
          <td width="70%" align="left" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
            Buffalo Jeans
          </td>
          <td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            $80
          </td>
        </tr>
        <tr>
          <td width="70%" align="left" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
            Seiko Watch
          </td>
          <td width="30%" align="right" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            $260
          </td>
        </tr>
        <tr>
          <td width="70%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            <b>TOTAL</b>
          </td>
          <td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            <b>$560</b>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="left" valign="middle" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 14px; color: #353535; padding:3%; padding-top:40px; padding-bottom:40px;">
      Thanks for shopping with&nbsp;us! <!-- using &nbsp; will prevent orphan words -->
    </td>
  </tr>
</table>


</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table></body></html>

请注意，调整浏览器窗口大小时，此模板不会流畅运行。然而，它适用于所有主要的电子邮件客户端。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

email

Mobile

适用于移动设备的响应式订单确认电子邮件？ 的相关文章

随机推荐

  • 加快网络抓取速度

    我正在使用一个非常简单的网络抓取工具抓取 23770 个网页scrapy 我对 scrapy 甚至 python 都很陌生 但设法编写了一个可以完成这项工作的蜘蛛 然而 它确实很慢 爬行 23770 个页面大约需要 28 小时 我看过scr

  • 如何以编程方式设置 TextBlock 前景十六进制颜色

    我必须实用地使用文本块的前景色十六进制颜色 它不起作用 请帮助我 我试过这个例子 txtHome Foreground new SolidColorBrush Colors Red 但我想使用十六进制颜色代码而不是使用 Color red

  • 我们可以拥有一台只用寄存器作为内存的计算机吗？ [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 寄存器是计算机中最快的存储器 那么如果我们想构建一台只有寄存器甚至没有缓存的计算机 可能吗 我什至考虑用寄存器代替磁盘 尽管它们本质上是易

  • 增加在 Azure 上运行的 Dockerized ASP.NET Core 站点的最大上传大小限制？

    以下是应用程序的架构 使用 ASP NET Core 编写的 Web API Dockerfile 使用以下命令构建 Web 应用程序microsoft dotnet 2 1 sdk并使用执行 APImicrosoft dotnet asp

  • WPF TabControl，用C#代码更改TabItem的背景颜色

    嗨 我认为这是一个初学者的问题 我搜索了所有相关问题 但所有这些都由 xaml 回答 但是 我需要的是后台代码 我有一个 TabControl 我需要设置其项目的背景颜色 我需要在选择 取消选择和悬停时为项目设置不同的颜色 非常感谢你的帮助

  • 如何获取nodejs程序中的nodejs版本？

    In a Node js 的调试器 https github com rocky trepanjs 有一个命令显示V8版本和调试器包版本 如何获取nodejs版本 我想我基本上可以运行命令node version or nodejs ver

  • 如何在 Perl 中复制整个目录？

    我需要将整个目录复制到某个位置 最好的方法是什么 File Copy正如我所见 仅逐个文件复制 顺便说一句 我在Windows下工作 感谢帮助 也许调查一下文件 复制 递归 http metacpan org pod File Copy R

  • javascript 是否有等效的 __repr__ ？

    我最接近Python的东西repr这是 function User name password this name name this password password User prototype toString function r

  • 如何使整个跨度落入新行？

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a

  • IntelliJ 和 Maven - 找不到 mvn 命令

    我正在尝试构建一个使用 IntelliJ 创建的放置向导项目 当我跑步时 mvn package I get bash mvn command not found 我使用的是 Mac 并且正在遵循本教程 http www dropwizar

  • 警告消息 - 来自 dummies 包的 dummy

    我正在使用 dummies 包为分类变量生成虚拟变量 其中一些变量具有两个以上类别 testdf lt data frame A as factor c 1 2 2 3 3 1 B c A B A B C C C c D D E D D E

  • 呃！尝试将包发布到 npm 时出现 403

    我正在尝试将包发布到 npm 您可以在此处查看存储库 https github com biowaffeln mdx state https github com biowaffeln mdx state 我登录到 npmnpm login

  • Jupyter Notebook 找不到 Python 模块

    不知道发生了什么 但每当我使用 ipython 氢 原子 或 jupyter 笔记本时都找不到任何已安装的模块 我知道我安装了 pandas 但笔记本说找不到 我应该补充一点 当我正常运行脚本时 python script py 它确实导入

  • 如何使 QImage 或 QPixmap 半透明 - 或者为什么 setAlphaChannel 过时？

    4 7 并喜欢在 qgraphicsview 上叠加两个图像 顶部的图像应是半透明的 以便能够透过它看到 最初 两个图像都是完全不透明的 我期望存在一些为每个像素设置全局 alpha 值的函数 但似乎没有这样的函数 最接近的是 QPixma

  • Spring-Data-JPA 参数化 NativeQuery 参数错误？

    我在 spring boot v1 5 1 应用程序中有这个 JPA 实体 Entity Table name score public class Score implements Serializable Id GeneratedVal

  • 剪切评级栏中的图像

    我制作了自己的评级栏 花朵图像有 4 种尺寸 xdpi hdpi 等 从 24px24px 到 64x64px

  • Hibernate HQL：将对值作为 IN 子句中的参数传递

    我面临一个问题 如何使用 IN 子句将查询中的成对值的参数传递给 HQL 例如 select id name from ABC where id reg date in x y 并且参数是不同的数据类型string id 和reg date

  • Qt moc 在头文件中实现？

    是否可以告诉 Qt MOC 我想声明该类并在单个文件中实现它 而不是将它们拆分为 h 和 cpp 文件 如果要在 cpp 文件中声明并实现 QObject 子类 则必须手动包含 moc 文件 例如 文件main cpp struct Sub

  • 合并 url 中的 2 个输入值

    我有这样的形式

  • 适用于移动设备的响应式订单确认电子邮件？

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理

热门标签