How can I Create HTML emails to work in all email clients?

469 阅读1分钟
原文链接: stackoverflow.com

I know this is a vague question but I will appreciate any guidance. My customer has an email subscriber list to which he sends HTML emails. The problem is that the emails do not look consistent when viewed by different email clients. For example, an email may look great in Gmail but terrible in Outlook or AOL.

Is there a one size fits all solution for this problem? That is, is there a particular CSS rule I can use, etc? Thanks for your help.

HTML emails by nature will not look exactly the same in every email client because CSS and media query support vary from client to client. However there are steps you can take so that they look fairly consistent and degrade gracefully.

I'd start here: webdesign.tutsplus.com/tutorials/c… this is a great article on building a fluid email template that you can use as a base to create other emails. It also includes the source code for the email.

Once your email is coded you can check it with a service like Litmus, to see what it looks like across many clients/devices. Litmus is also great for troubleshooting email issues.

Finally check out Campaign Monitor's CSS Support list for HTML emails: www.campaignmonitor.com/css/ It's a complete breakdown of the CSS support for the top 10 most popular mobile, web and desktop email clients on the planet.

As for Outlook, it can truly be a pain but make sure to utilize Outlook conditional tags to target Outlook specifically. Check out the first answer in this thread, for a full rundown on conditional tags. Bonus tip: If you are putting styles inside Outlook coditional tags make sure to use !important with a space in front of it.