html & email template
html & email template
- inline style
- build tools
https://templates.mailchimp.com/getting-started/html-email-basics/
HTML Email Basics
This reference assumes you’re a front-end web designer with an intermediate working knowledge of HTML and CSS. You’re comfortable coding in and using HTML tables for structure, and working in coding standards that were state-of-the-art in 1999. Feel free to crank up a little TLC or Goo Goo Dolls to get into the spirit of things.
Best Practices: Design
There are a few things to keep in mind when designing HTML email campaigns.
- Emails should be 600-800 pixels maximum width. This will make them behave better within the preview-pane size provided by many clients.
- Design for simplicity. Use grid-based layers and avoid complicated elements that require HTML floats or positioning.
- Assume images will be initially blocked by email clients, or that certain images—background images, for example—will completely fail to load.
- Don’t design an email that’s essentially one large, sliced-up image. While these kinds of emails look pretty, they perform poorly.
- Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.
- Avoid elements that require Flash or JavaScript. If you need motion in an email, a .gif is your best bet.
- Don’t forget about the mobile experience! Is your email readable at arm’s length on a small screen? Will the images slow its load time on a mobile device? Are your links easy to press with a thumb?
Best Practices: Development
Much like with design, there are best practices to follow when coding HTML email.
- Code all structure using the table element. For more complicated layouts, you should nest tables to build complex structures.
- Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.
- Keep your CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)
- Inline all CSS before sending. (Mailchimp will do this for you automatically.)
- Use only absolute links for images, and host those images on a reliable server. (Mailchimp provides free image hosting.)
- Don’t bother with JavaScript or Flash—those technologies are largely unsupported by email clients.
- Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.
- Test, test, test. Create email accounts across various services, and send emails to yourself. Do this in conjunction with services such as Litmus.
html email templates responsive
https://colorlib.com/wp/responsive-html-email-templates/
https://designseer.com/best-responsive-html-email-templates/
https://speckyboy.com/free-responsive-email-templates/
https://litmus.com/resources/free-responsive-email-templates
https://elements.envato.com/web-templates/email-templates
https://foundation.zurb.com/emails/getting-started.html
https://stripo.email/templates/
online GUI tools
http://digith.com/transaction/transaction/digith_template_builder/index.html
html email template github
https://github.com/topics/email-template
https://github.com/leemunroe/responsive-html-email-template
https://github.com/leemunroe/responsive-html-email-template/blob/master/email.html
https://github.com/mailchimp/Email-Blueprints
https://github.com/charlesmudy/Responsive-HTML-Email-Template
https://github.com/charlesmudy/responsive-html-email-template/blob/master/index.html
https://gist.github.com/Dragoneel/7cde92b5bdf16972fcfb
https://github.com/mailgun/transactional-email-templates
https://github.com/konsav/email-templates
Tutorials
html email basics
https://templates.mailchimp.com/
https://templates.mailchimp.com/getting-started/html-email-basics/
how to email client render email page?
https://stackoverflow.com/questions/1018078/testing-html-email-rendering
https://www.templatemonster.com/blog/render-emails-perfectly-different-email-clients/
https://litmus.com/blog/why-do-email-clients-render-emails-differently
https://mailchimp.com/resources/why-clients-render-email-differently/
https://mailtrap.io/blog/2018-08-30-building-email-template
table & css & email template
https://css-tricks.com/complete-guide-table-element/
https://css-tricks.com/accessible-simple-responsive-tables/
https://css-tricks.com/almanac/properties/t/table-layout/
html & email template的更多相关文章
- 怎么加 一个 hyperlink 到 e-mail template for CRM
Recently I had a client inquire as to how one would insert a hyperlink into a CRM email template. Wh ...
- Accept Job Offer Email Template
Accept Job Offer Email Template <Date> <Hiring Manager’s name> <Company name> < ...
- Use Razor for Email Template outside ASP.NET MVC
原文发布时间为:2011-09-15 -- 来源于本人的百度文章 [由搬家工具导入] http://kazimanzurrashid.com/posts/use-razor-for-email-tem ...
- Modify Dokuwiki Email Template 修改 Dokuwiki 邮件模板
Email Notification Templates There are two places to modify 1) log in as Admin -> configuration ...
- seminar information (Email template)
The following is an email example of seminar information **************** Dear all, It is a plea ...
- Odoo Email Template Problem
Odoo 8.0 的邮件模板是运行自jiajin2沙盒中的阉割版mako,像自定义及 <%%>等功能都无法正常使用. 且for-loop %for %endfor不能嵌套在table中使用 ...
- Ace - Responsive Admin Template
Ace简介: Ace 是一个轻量.功能丰富.HTML5.响应式.支持手机及平板电脑上浏览的管理后台模板,基于CSS框架Bootstrap制作,Bootstrap版本更新至 3.0,Ace – Resp ...
- 使用Apache Commons Email 发生邮件
Apache Commons Email的Maven依赖 <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-e ...
- HTML Email 编写指南
今天,我想写一个"低技术"问题. 话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly.每周收到一封邮件,了解本周的大事. 有一天,我就在想, ...
随机推荐
- 基于java开发的开源代码GPS北斗位置服务监控平台
最近在研究位置服务平台,基于全球卫星定位技术(GNSS).互联网技术.空间地理信息技术(GIS).3G/4G无线通信技术,面向全国公众用户建立大容量.实时.稳定的位置信息服务运营平台.实现管理目标的实 ...
- java通过FreeMarker模板生成Excel文件之.ftl模板制作
关于怎么通过freemarker模板生成excel的文章很多,关键点在于怎么制作模板文件.ftl 网上的办法是: (1)把Excel模板的格式调好,另存为xml文件 (2)新建一个.ftl文件,把xm ...
- 浅谈MySQL字符集
Preface MySQL use character set & collation to organize the different charater.It provid ...
- MySQL另类的备份恢复方法——innodb可传输表空间
Preface There're many ways in backing up or migrating data from one server to another one.Lo ...
- 8-2 开发接口 (入参是json格式)
1.开发入参事json格式的接口 import json import tools import flask from .check_session import check_session serv ...
- 如何解决mysql中读取含表情符号的内容无法识别的问题
当内容中包含有表情符号的时候,写入mysql时一般会设置字段或者表的charset为utf8mb4的形式: ) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicod ...
- rsync同步备份搭建
Rsync 是 Unix/Linux 下的一款应用软 在平常的运维中进常要对一些数据进行备份,以防止意外的服务器故障导致不可避免的后果,tar,cp只能适应一些小范围backup,对于几T甚至几P的数 ...
- Python生成器、装饰器
## 生成器 - 生成器是用来创建Python序列的一个对象 - 通常生成器是为迭代器产生数据的 - 例如range()函数就是一个生成器 - 每次迭代生成器时,它都会记录上一次调用的位置,并返回下一 ...
- 动态代理和AOP
之前说过了我对IOC的理解,这篇文章说以下我对动态代理和基本的对AOP的理解. 所谓动态代理就是,在运行时,动态创建实现了一组指定接口的实现类对象. 比如有: interface A { } inte ...
- 控制器方法重复命名导致nginx 504的问题
由于控制器方法重复命名重启swoole后运行代码导致 504 Gateway Time-out ,查看laravel日志和nginx日志才找原因所在,以后还是要多看错误日志.