Email clients ignoring internal style sheet

时光总嘲笑我的痴心妄想 提交于 2019-12-06 11:10:53

HTML emails are an entirely different beast. You need to code them like it is 1999. Use a very limited set of tags and make sure all or your styles are inline. Use tables for your layouts.

To make use of media queries you need to do both.

What I recommend doing is to first create your email with all inline styles. Then when you are happy with it you can add support for mobile.

To add support for mobile add the media queries to the head tag and use !important to override any inline styles.

Here is an example: Optimizing for mobile email

Here is a helpful chart that details which css support for email clients. http://www.campaignmonitor.com/css/

I don't think they work inline like that, you would probably have to embed the stylesheet in the HTML email template itself (e.g. <style>@media {...}</style>).

Even that seems like a VERY dodgy thing to rely on. HTML emails are a huge pain in the ass because standards and CSS support are about a decade behind and there is massive variation among popular email clients in terms of which properties and types of styling are supported.

In general keeping it simple and using old school table based layouts with all inline CSS is the way to go. Campaign Monitor has a great chart of support for various CSS properties in major email clients and devices.

A common workaround to the problem of HTML not rendering correctly in email clients is to do the best you can and have a prominent link at the top that says: "Email not displaying correctly? View it in your browser."

Ray Kurzweil's weekly newsletter blast does this, and it's very well formed, and well done, and I always read it. (It's a brilliant blend of content and presentation).

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!