xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > 编写指南,在Email中防御性地使用HTML5和CSS3的指南

编写指南,在Email中防御性地使用HTML5和CSS3的指南

发布时间:2019-04-18 08:42编辑:计算机尝试浏览(178)

    在Email中防止性地行使HTML伍和CSS三的指南

    2015/04/20 · CSS编写指南,在Email中防御性地使用HTML5和CSS3的指南。, HTML5 · 1 评论 · Email

    本文由 伯乐在线 - fzr 翻译,黄利民 校稿。未经许可,禁止转发!
    英文出处:litmus.com。欢迎参与翻译组。

    “在Email中不能够选拔HTML5或CSS三”。

    是因为它们“有限”的补助,那已成为邮件设计行当的二个科学普及共同的认识。但是,大家明日能够说它是一个通通荒唐的说教。

    就算扶助还不是尤其通用的,但多数主流电邮客户端已经得以支撑HTML5和CSS三了。实际上,电邮总体市集的3/六都帮衬HTML5和CSS。前中国共产党第五次全国代表大会电邮客户端中也有叁家开头支持它们了。对于特定顾客,可支撑的内容可能会更加多。

    可是,那个还不可能支撑那些高端功用的客户端会怎么着呢?你的邮件在如此的订阅者的邮箱中该怎么显示?当那一个涉及到邮箱,就总结为2个:为订阅者提供杰出的体验。然则,那也不代表你的邮件必须在每一家客户端中都展现的同样——只须要让您的享有订阅者都能易得易取。

    自小编喜悦的两位邮件设计师——Jonathan Kim 和 Brian Graves——就可怜重申应用分歧的情势完毕:堤防性邮件设计和渐进式加强。

    防卫性邮箱设计

    大抵两年前, Jonathan Kim在大家的 Mobile Master 文章展上建议了“Pushing the Limits of Email”的概念。在说话中,乔恩athan发明了一个新词来申明当前的电邮设计情况,即防范性邮件设计。

    他表达说,由于部分信箱客户端对CSS的扶助少数,使得邮件设计者们陷入了破旧的规划景况。他倡导邮件设计者们事先为那二个援助网络渲染引擎的客户端设计,进而促进邮件设计行业前行。

    渐进式加强

    由此及彼,在201肆年的邮箱设计大会上,DEG的UI设计师, Brian Graves,,建议了“赢得在各样荧屏上设计的战斗”。他的言语的重要在于渐进式巩固,关于在支撑的条件上提供高等功用。他也强调了优雅降级的主要。优雅降级意味着,尽管订阅者的邮箱客户端不能够支撑某项特定效能,你也要能为他们提供愉悦的用户体验。

    对获得Brian的总体展现感兴趣?幻灯片和录制现在都有提供了。

    自动楼梯便是实际生活中3个渐进式加强和古雅降级的通盘例子。已逝世正剧歌星Mitch Hedberg开玩笑说,“自动扶梯恒久不会出故障:因为它能够只是一个楼梯。你应该永世也不会看出‘自动扶梯权且故障’的标牌,只是‘自动扶梯暂且为阶梯’,不便于方便。”不论环境如何,自动扶梯都能保证本身的效益。

    为HTML五和CSS三落实渐进式巩固

    动用渐进式加强是消除邮件设计的最实用方式。大家都精晓的是,在邮箱中使用传统的HTML伍和CSS叁会在分化客户端之间引起广大渲染难题。向后的包容性10分分裂样——一些HTML和CSS有稳固的向后包容性而任何的却并不曾。对此,区别的客户端应用了差别选项。使用正规的HTML5和CSS三急需越来越多的测试,而且会潜移默化开垦速度。所以,到底怎么才是在邮箱中落到实处渐进式加强的最佳方式?

    在电邮中动用HTML伍和CSS三不必太困难。它不须求在奇特的邮箱客户端上浪费多量时辰排除故障(说的正是Outlook邮箱)。它所急需做的便是用二个十三分的框架来连忙实践HTML5和CSS三而不用烦恼和忧郁发生渲染难点。而且,万分幸运的是,大家有那样的框架。

    上边正是邮件设计者们和开垦者们提供的1行首要的代码:

    XHTML

    @media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles here */ }

    1
    2
    3
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      /* Insert styles here */
    }

    这些媒体询问只针对援救WebKit的邮箱客户端——对HTML5和CSS三有疑虑的支持度。那么些媒体询问允许你选用当代技艺例如HTML5摄像、CSS三动画片、web字体以及更加多。

    那么些主意也将今世邮件客户端和旧式客户端的邮箱开荒分为两片段。你能够在动用Safari或Chrome浏览器为支撑WebKit的客户端测试开垦现代本领的还要,使用Firefox为旧式浏览器提供诸如外观之类的基雷公炮炙论验。

    这么消除电邮开采难点能够将越多的材料调控进度转移到浏览器方面而不是电邮客户端。那给予邮件设计者以愈来愈多的权限,调控力,和自信去开垦两个能在具有邮箱客户端之间优雅渲染的电邮。

    下载这么些Litmus测试结果,突显了就媒体询问对WebKit的支撑。值得注意的是,Gmail——既是贰个web邮箱客户端,也是四个移动App——并不支持媒体询问,所以那一个测试对那多少个显示屏截图无效。

    您也得以本着Gecko(Firefox)渲染这一个媒体询问:

    XHTML

    @-moz-document url-prefix() { /* Insert styles here */ }

    1
    2
    3
    @-moz-document url-prefix() {
      /* Insert styles here */
    }

    很少有客户端应用Gecko(Firefox)作为渲染引擎,那也是为啥最佳就补助WebKit的邮箱提供你的加强版。可是,使用媒体询问为WebKit渲染引擎加多同样的机能就轻松的多了,对Thunderbird之类的客户端来说。

    除开这几个措施,还有别的在电邮中贯彻HTML5和CSS3的法子呢?有。但大家深信那一个格局是开荒的最急速的点子——也是最安全的。它缩短了为尤其邮箱客户端支出外观之类供给的职业量,而且集中于依照浏览器的测试。

    小结:渐进式巩固的建议

    问询您的受众

    订阅者在哪儿展开你的邮件?他们会采取对HTML和CSS帮助的很好的如One plus和AppleMail之类的客户端吗?你能够运用Litmus’ Email Analytics测试工具检测出订阅者中最流行的邮箱App。

    听说所取得的信息,你能够垄断(monopoly)是还是不是渐进式巩固会对您的办事有救助。例如,假诺你的受众中多方面施用WebKit,可以很好的支撑高档效率,那么也许尝试创新性的本事,比如HTML5摄像,会是1个科学的想法!

    确立3个主导经验

    用对HTML和CSS帮衬有限的信箱App——如Outlook和Gmail,在你为其余客户端优化邮件此前,为订阅者建立1个着力经验。渐进式巩固不应该让其余用户爆发次优体验。

    尽只怕优化

    假若您曾经济建设立3个基和剂方局验,就开头为其余用户优化体验。你可以选用CSS三,摄像,交互,可缩放向量图形(SVG),以及web字体。记住,尽管是对HTML和CSS帮衬的可比好的Email客户端也有它们分别的特殊之处,照旧供给测试哪些才是行得通的。

    实战:邮件中的渐进巩固例子

    我们先看看一些在邮件中央银行使渐进式加强的开创性例子。为了展现对那一个邮件的优化,你不可能不利用1个如Chrome或Safari同样以WebKit为引力的浏览器。

    201四邮件设计大会以HTML5录像为背景的邮件

    为了播报201四邮件设计大会,笔者们决定认真地以HTML伍摄像为背景达成渐进式巩固。尽管那种专项工夫只可以在Apple邮箱和Outlook 2011(Mac版)上中国人民解放军海军事工业程高校业作,但那二种客户端达到接收特定邮件的用户五分之二左右。

    View the full email here

    对于不支持录制的电邮客户端,HTML伍录像仅仅只是退化为一刘震云态背景图片。大家的结果却是令人惊异的——而且回报也是危言耸听的!

    B&Q 交互式旋转圆盘邮件

    那一年中最酷的邮件之壹是B&Q的交互式旋转圆盘邮件。对于Web基特客户端,该邮件蕴涵了二个转悠热门,供用户点击查看不一致的1对。

    View the full email here

    总体邮件中最令人印象深入的有的,恐怕是它为非WebKit邮箱使用的备用方案——一个美观的转动木马网格布局,没有藏匿也从未复制任何内容!

    图片 1

    您能够在 Firefox 或 Internet Explorer 浏览器中开发该邮件查看备用设计。

    Litmus Builder(邮件开采工具)交互之旅邮件

    为了引进大家的新邮件代码编辑器,Litmus Builder,在这封邮件中体现了大量的可点击交互。同样,该技巧也只能在Apple邮箱和Outlook 201一(Mac版)中央银行事,而这多个却占了小编们的消费者的大举。(注:邮件必要显示屏至少800像素宽手艺浏览。)

    该展览仅仅只是退化为叁个静态背景图片,而且会调用接口跳转到登入页面。那邮件取得了伟大的功成名就,其出品在最初步的几天里扩充了无数的用户。

    View the full email here

    想尝尝一下 Litmus Builder?注册后 ,你就足以起头使用HTML5和CSS三测试你的邮件!

    3个创新邮件设计框架

    CSS

    @media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles here */ }

    1
    2
    3
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      /* Insert styles here */
    }

    其一红娘查询为邮件设计师提供了三个简短的创新框架。咱们得认为有着今世邮箱客户端的那一大学一年级些订阅者提供更加好的感受。

    最棒的防范即是进攻。今后该是进攻的时候了。在邮件设计中央银行使这么些红娘查询初始更新,推动邮件前进。

    为了订阅者去品味。为了大家的行业,为了 对邮件的厚爱。

    现已十万火急想看看我们会同步建立出哪些了。

    假若你用的是那种措施——也许支付你自身的更加尖端的本子——在您的邮件中,也许一旦你对那种方式有别的的疑问,请在底下的评论和介绍中贴出,大概用越来越好的方式,去Litmus社区!

    察觉你的受众 测试你的设计

    对于能够初步应用高等技巧像HTML伍和CSS三来促进邮件发展,是或不是认为很激动?确定保障识别出订阅者们最喜爱的邮箱应用软件,然后测试你新规划的邮件。

    通过邮件分析,你能够领会订阅者平日在何地打开邮件,那样您就足以集中精力在渐进式巩固(以及优雅降级!)上了。

    测试设计也是开拓进度中相当关键的一步。在二1玖个以上邮箱客户端和应用程式之间的包容性测试,能够确认保障订阅者们无论用什么邮箱张开邮件都能平常得到你的邮件。

     

    赞 收藏 1 评论

    HTML 邮件内容就算也是 HTML,不过和我们在网页上选取的 HTML 分裂,因为安全原因,各大邮箱服务商及邮件客户端都会对邮件内容展开自然程度上的拍卖,不会安份守己你写的本原 HTML 彰显。

    初稿地址

    行内样式表

    至于小编:fzr

    图片 2

    微博:@fzr-fzr) 个人主页 · 作者的稿子 · 26

    图片 3

    在桌面和活动端渲染电子邮件大概有上百万种差别的整合格局。

    前几天,小编想写三个"低本领"问题。

    1 <html>
    2     <head>
    3           <title>行内样式表</title>
    4     </head>
    5     <body>
    6         <p style="color:blue;font-size:10px;">aaaaaaa</p>
    7     </body>
    8 </html>    
    

    越是是鼎鼎大名的 OutLook,从 OutLook200柒 初叶便选取 Word HTML 引擎实行渲染,为了它的安全性从而使得全体邮件倒退回了 2000年前,为了邮件的包容性你只可以动用过多废弃的竹签、属性,并且这一景观将会维持无数个
    新春,因为即便整个终有尽头,但 OutLook 始终存在。

    话说自个儿订阅了过多了新闻邮件(Newsletter),比如JavaScript Weekly。周周收到壹封邮件,精晓本周的盛事。

     

    因为微软平素地特立独行,使得 OutLook 成为了最难啃的骨头。因为 OutLook 帮助的标签和总体性少得那多少个,所以只要包容了 OutLook,别的邮箱客户端基本都不会有怎么着难题。

     

    内嵌样式表

    使用tableb布局

    那大概是 HTML 邮件与常见 HTML 页面最大的差别,因为各种邮箱对 div css 那1套布局的解析问题十分大(如 float / position 等 CSS 都会被过滤,甚至 margin: 0 auto; 都不起功用),基本各大邮箱都会分析混乱,所以老式的 table 布局是优等之选。那就意味着 HTML 邮件中大致唯有那多少个因素——table / tr / td / span / img / a,尽量幸免使用 div / p 或是其余标签。

    与此同时并不是装有邮箱都援助 colspan / rowspan 属性,所以具有布局都急需使用 table 嵌套化解。

    有一天,作者就在想,是否自家也能做3个这么的邮件?

     1 1 <html>
     2 2     <head>
     3 3           <title>内嵌样式表</title>
     4 4     </head>
     5       <style>
     6             p{
     7                   color:blue;
     8                   font-family:"宋体";
     9                }
    10       </style>
    11 5     <body>
    12 6         <p >aaaaaaa</p>
    13 7     </body>
    14 8 </html>    
    

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:编写指南,在Email中防御性地使用HTML5和CSS3的指南

    关键词: 日记本 CSS php bwin开户

上一篇:有时候比

下一篇:没有了