html & email template

  1. inline style
  2. 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.

https://litmus.com/


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://htmlemail.io/

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://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

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的更多相关文章

  1. 怎么加 一个 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 ...

  2. Accept Job Offer Email Template

    Accept Job Offer Email Template <Date> <Hiring Manager’s name> <Company name> < ...

  3. Use Razor for Email Template outside ASP.NET MVC

    原文发布时间为:2011-09-15 -- 来源于本人的百度文章 [由搬家工具导入] http://kazimanzurrashid.com/posts/use-razor-for-email-tem ...

  4. Modify Dokuwiki Email Template 修改 Dokuwiki 邮件模板

    Email Notification Templates   There are two places to modify 1) log in as Admin -> configuration ...

  5. seminar information (Email template)

      The following is an email example of seminar information   **************** Dear all, It is a plea ...

  6. Odoo Email Template Problem

    Odoo 8.0 的邮件模板是运行自jiajin2沙盒中的阉割版mako,像自定义及 <%%>等功能都无法正常使用. 且for-loop %for %endfor不能嵌套在table中使用 ...

  7. Ace - Responsive Admin Template

    Ace简介: Ace 是一个轻量.功能丰富.HTML5.响应式.支持手机及平板电脑上浏览的管理后台模板,基于CSS框架Bootstrap制作,Bootstrap版本更新至 3.0,Ace – Resp ...

  8. 使用Apache Commons Email 发生邮件

    Apache Commons Email的Maven依赖 <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-e ...

  9. HTML Email 编写指南

    今天,我想写一个"低技术"问题. 话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly.每周收到一封邮件,了解本周的大事. 有一天,我就在想, ...

随机推荐

  1. HDU2837 Calculation(扩展欧拉定理)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  2. 1237: [SCOI2008]配对

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1789  Solved: 715[Submit][Status][Discuss] Descripti ...

  3. Delphi7程序调用C#写的DLL解决办法(转)

    近来,因工作需要,必须解决Delphi7写的主程序调用C#写的dll的问题.在网上一番搜索,又经过种种试验,最终证明有以下两种方法可行:    编写C#dll的方法都一样,首先在vs2005中创建一个 ...

  4. Servlet学习笔记07——什么是cookie,session?

    7)cookie的路径问题 a.什么是cookie路径问题? 浏览器在向服务器上的某个地址发送请求时, 会查看cookie的路径是否与该地址匹配,只有 匹配的cookie才会被发送. b.cookie ...

  5. Jenkins搭建CI/CD

    所需Jenkins插件: Maven Integration pluginPublish Over SSHSSH plugin 1.配置全局工具 配置JDK: 配置Git: 配置maven: 2.创建 ...

  6. 使用myeclipse创建servlet后输入地址无法访问

    问题: 使用myeclipse创建servlet后输入地址无法访问 1.首先,路径的访问地址是在web.xml里设置的,一般会自动生成(但是可能会和你自己输入的有出入) 你必须按照<url-pa ...

  7. Python 对象(type/object/class) 作用域 一等函数 (慕课--Python高级,IO并发 第二章)

    在python中一共有两种作用域:全局作用域和函数作用域全局作用域:在全局都有效,全局作用域在程序执行时创建,在程序执行结束时销毁:所有函数以外的区域都是全局作用域:在全局作用域中定义的变量,都属于全 ...

  8. 英文缩写SFR

    英文缩写为SFR,是Special Function Register(特殊功能寄存器)的缩写.

  9. [BZOJ1009][HNOI2008]GT考试(KMP+DP)

    [不稳定的传送门 Solution dp[i][j]表示前i个字符当前匹配到不吉利串的第j个,即当前方案的后缀等于不吉利串前缀 然而由于n过大,不能直接转移,用矩阵优化 Code #include & ...

  10. 关于DIV内文字垂直居中的写法

    最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...