CODEWITHSUNDEEP
htmlcssemailweb
Avi
Avi

Reputation: 567

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

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.

Upvotes: 3

Views: 3749

Answers (2)

Kumar A.
Kumar A.

Reputation: 330

Roughly I can list few Do's and dont's which may help you

  1. Always use nested tables instead of div to create your HTML
  2. Don't forget to add plain text part together with the HTML so that the mail doesn't get trimmed out where 'View as HTML' is set to NO.
  3. Always use inline CSS

  4. Optimise your images so that they don't exceed 72ppi.

  5. Never use background images.

  6. Never use externally linked CSS.
  7. Don't use a single image for the entire message
  8. While writing HTML for email, consider it different from a web page. Yes, indeed they are different as web browsers are capable enough to render HTML than email clients.

Upvotes: 7

Mia
Mia

Reputation: 233

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: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 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: https://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.

Upvotes: 5

Related Questions