android命名惯例
In part one of this ‘Best Practice Email’ series we talked about email layouts. In part two we focused on email content. In this final installment of “Rules for Best Practice in Email” we get under the hood, and look at the best coding practices.
在“最佳做法电子邮件”系列的第一部分中,我们讨论了电子邮件布局 。 在第二部分中,我们重点介绍了电子邮件内容 。 在“电子邮件最佳实践规则”的最后一部分中,我们深入了解了最佳编码实践。
Now that you know how to create a well-designed graphic email that accommodates differences in email clients and web browsers, it’s time to make your emails work in every inbox.
既然您知道如何创建设计合理的图形电子邮件,以适应电子邮件客户端和Web浏览器中的差异,那么现在该使您的电子邮件在每个收件箱中都能工作了。
As we mentioned in Part 1, a graphic email might look and feel like a webpage, but is it coded just like a webpage? Well sure – if that webpage was coded in the 1990s.
正如我们在第1部分中提到的,图形电子邮件看起来和感觉都像一个网页,但是它的编码是否像网页一样? 可以肯定 -该网页是否在1990年代编码。
Writing markup for email takes HTML back to the old school. These tips will help those of you who don’t recall the days of flannels, pagers, and the Discman, or who think of tables only as something to eat off or store data in.
为电子邮件编写标记将HTML带回了过去。 这些技巧将为那些不记得法兰绒,传呼机和Discman时代的人们提供帮助,或者将那些仅视为吃饭或存储数据的人。
1)使用表格进行布局 (1) Use tables for layout)
To ensure that your layout renders correctly across all inboxes, use tables–lots of tables–all nested together. This tip defies modern-day web development, in that tables are now primarily used for tabular data–not for webpage layout.
为了确保您的布局在所有收件箱中都能正确呈现,请使用表格-很多表格-全部嵌套在一起。 该技巧无视现代Web开发,因为表现在主要用于表格数据,而不是用于网页布局。
Since CSS became a suitable and more flexible way to layout webpages, using tables – the old-school way of coding webpages – has been rightfully railed against by web developers. However this isn’t the case when marking up HTML for a graphic email where tables are not only acceptable but still the preferable method.
自从CSS成为一种合适且更灵活的网页布局方式以来,使用表格-老式的网页编码方式-已遭到Web开发人员的反对。 但是,当为图形电子邮件标记HTML时,情况并非如此,其中表格不仅可以接受,而且还是首选方法。
As much as our instincts might tell us otherwise, the sobering facts are that tables seem to be the only surefire way to get multicolumn layouts working across all likely inboxes.
就像我们的直觉告诉我们的那样,清醒的事实是,表格似乎是使多列布局在所有可能的收件箱中都能正常工作的唯一保证。
Using divs for very simple layouts can work well, but test the divs thoroughly to ensure they behave as intended. Outlook, Yahoo and Hotmail don’t offer great support for position and float, so it’s wise to make sure that your other CSS properties don’t fail in different clients.
将div用于非常简单的布局可以很好地工作,但是要对div进行彻底的测试以确保它们的行为符合预期。 Outlook,Yahoo和Hotmail对位置和浮动不提供很好的支持,因此确保其他CSS属性在不同的客户端中不会失败是明智的。
Tables offer the most consistent support across all clients and have long-since been the standard for coding emails. However outdated or unfamiliar they might feel when being employed in laying out templates, it is likely you will achieve the best results in all inboxes using tables over divs or other methods.
表格在所有客户中提供了最一致的支持,并且长期以来一直是电子邮件编码的标准。 无论他们在布局模板时可能感到过时或不熟悉,都可能会使用div上的表格或其他方法在所有收件箱中获得最佳效果。
2)将样式内联 (2) Bring your styles inline)
Gmail and other email clients, inevitably strips some (if not all) of the CSS out of the tag in HTML documents. For this reason–plus the fact that external stylesheets are not an option in email—place your CSS styles inline.
Gmail和其他电子邮件客户端不可避免地会从HTML文档的标记中剥离一些(如果不是全部)CSS。 因此,再加上外部样式表不是电子邮件中的选项,将CSS样式内联。
This makes for a lot of repetitive styles applied to each element and completely eliminates the luxury and convenience of classes, but it will offer the most consistency and preserve a well-designed template. Some email service providers like MailChimp and CampaignMonitor now offer conversion tools to bring your CSS inline and relieve the headache of having to repeat styles for each element.
这使得大量的重复的样式应用到每个元素完全消除类的豪华和便利,但它会提供最一致性和维护一个精心设计的模板。 现在,一些电子邮件服务提供商(例如MailChimp和CampaignMonitor)提供了转换工具,以使您CSS内联,并减轻了为每个元素重复样式的麻烦。
The exception to this rule: Media queries aimed at layouts for mobile devices. Media queries are always written as topline CSS and contain classes, when supported they enable a different experience for mobile users to view email designs on smaller screens.
此规则的例外:针对移动设备布局的媒体查询。 媒体查询始终以顶层CSS编写,并且包含类,如果支持,它们将为移动用户提供不同的体验,以便他们在较小的屏幕上查看电子邮件设计。
3)始终避免使用速记CSS (3) Always avoid shorthand CSS)
When coding email there aren’t a lot of shortcuts to make life easier, and unfortunately using shorthand CSS does not seem to be an exception.
在编写电子邮件代码时,没有很多捷径可以使生活更轻松,不幸的是,使用速记CSS似乎也不例外。
Support for shorthand CSS in font, padding and defining hexvalues is generally inconsistent (although using the shorthand format with borders does sometimes work). As is always the rule with coding email: If you are going to try it, test it–everywhere. Make sure that shorthand properties behave the way you intend them to, and do not rely on default values – define them.
对字体,填充和定义十六进制值的速记CSS的支持通常是不一致的(尽管有时使用带边框的速记格式确实可行)。 一如往常,对电子邮件进行编码的规则是:如果要尝试,请在任何地方进行测试。 确保速记属性的行为符合预期的方式,并且不依赖默认值,请定义它们。
In short, the benefit of shaving a few characters off your CSS is unlikely to be worth the new rendering headaches it creates.
简而言之,从CSS上删除几个字符的好处不太值得它带来的新的渲染麻烦。
4)将背景色包装在自己的表中 (4) Wrap your background color in its own table)
Similar to stripping out style tags, some email clients will strip out the body tag as well. For this reason, it is wise to define the background color in a separate table wrapped around the rest of the template and set the width to 100%.
与剥离样式标签类似,某些电子邮件客户端也会剥离正文标签。 因此,明智的做法是在围绕模板其余部分的单独表格中定义背景颜色,并将宽度设置为100%。
By default, most email clients display messages on a white background. The amount of background displayed varies across clients, and other factors such as banner ads, toolbars and menus can affect the message pane’s overall size.
默认情况下,大多数电子邮件客户端在白色背景上显示消息。 显示的背景数量因客户端而异,横幅广告,工具栏和菜单等其他因素也会影响消息窗格的整体大小。
Another good approach to ensure that an email template displays clearly within the message view pane: add a border either around the whole template or to the template’s sides. If the content within the template appears on a white background, this will enclose the design and create some space between the message and the pane.
确保电子邮件模板在消息视图窗格中清晰显示的另一种好方法:在整个模板周围或模板的侧面添加边框。 如果模板中的内容显示在白色背景上,则将封闭设计并在消息和窗格之间创建一些空间。
5)切片图像 (5) Slice your images)
Images are key to a great email design and usually link to a webpage or several.
图片是出色电子邮件设计的关键,通常链接到一个或多个网页。
Unfortunately, image maps are not well supported everywhere (and may not link your images at all). Once again, taking the long road is the best solution: Slice all those images, and link each one separately. This will enable you to verify that each link works, and will also download smaller images faster.
不幸的是,图像地图并非在所有地方都得到很好的支持(并且可能根本无法链接您的图像)。 再一次,走很长的路是最好的解决方案:切片所有这些图像,并将每个图像分别链接。 这将使您能够验证每个链接是否有效,并且还将更快地下载较小的图像。
While the list of constraints may seem daunting, email clients have come a long way, and will continue to change and grow. Once upon a time, there was simply no CSS support at all for email, and markup required a lot of empty cells and spacer gifs to get the padding just right.
尽管限制的列表似乎令人生畏,但电子邮件客户端已经走了很长一段路,并且将继续变化和增长。 曾几何时,电子邮件根本没有CSS支持,并且标记需要大量空白单元格和spacer gif才能正确填充。
Lately, achieving standardization of HTML for email has become an internationally recognized goal.The Email Standard Workgroup, a W3 group, will meet in September to discuss a new HTML syntax standard for long-term use.
最近,实现电子邮件HTML的标准化已成为国际公认的目标。W3小组电子邮件标准工作组将于9月开会,讨论可长期使用的新HTML语法标准。
Email has a proud history and a long legacy, but it is shuffling in the right direction.
电子邮件拥有悠久的历史和悠久的历史,但它正朝着正确的方向发展。
翻译自: https://www.sitepoint.com/rules-best-practice-email-design-coding-practices/
android命名惯例