CODEWITHSUNDEEP
htmlcssemail
chaonextdoor
chaonextdoor

Reputation: 5139

how to make html email look exactly the same as previewed just in browser?

I'm working on a HTML email template and I noticed that the preview I got in browser is a little bit different from what I really got in my email inbox. Like sometimes you may make two tables line up with each other in browser but in the email you got, they may not line up anymore and there is some small difference.

So I just want to know if it's possible to make the html email previewed in browser exactly the same as what you got in your inbox. I know this definitely has something to do with each individual email service provider, which has its own default css or sth like that for email, and also the browser and operating system you're using. But is it possible to make sure at least in one email service, such as gmail, that every time what you preview is exactly what you get in your inbox regardless of what browser or operating system you're using? How hard is it?

Upvotes: 4

Views: 2759

Answers (2)

CodeOwl
CodeOwl

Reputation: 672

I've seen robust MailChimp templates and they are basically just 1998-style documents full of table elements. The markup is ugly as all heck, but they work. Just hold your nose and use tables. At least with emails there's not as much pressure to write semantically meaningful markup.

Upvotes: 0

Forrest Bice
Forrest Bice

Reputation: 602

To answer your question briefly:

No, I do not believe it is possible to preview an HTML email in a browser and have it display as if it were being rendered in a specific email client such as Microsoft Outlook or Gmail for example. While this isn't a solution, the most analogous feature I can think of would be the ability to use the User Agent of another web browser within Google Chrome's developer tools.

UPDATE (5/31/13): The following may also provide as useful guides when approaching HTML email.

  1. http://rodriguezcommaj.com/blog/The-Little-Guide-To-HTML-Email

  2. http://rodriguezcommaj.com/modern-html-email

A more detailed answer with context and useful resources:

This is a very challenging and often frustrating problem to solve. It largely resembles the cross browser compatibility issues web developers deal with continually. However, there are some main differences:

  • While there are just over five main stream browsers, there are over 20 popular email clients.

  • Additionally the W3C has greatly helped browsers standardize themselves. This process has been slow but is moves at a much faster pace than any standardization seen thus far within email clients.

For example, this article discusses a large setback for email client standardization in 2007 which still effects us today. It also sums up the issue succinctly:

"While the IE team was soothing the tortured souls of web developers everywhere with the new, more compliant Internet Explorer 7, the Office team pulled a fast one, ripping out the IE-based rendering engine that Outlook has always used for email, and replacing it with … drum roll please … Microsoft Word".

The above article also refers to a tool provided by Microsoft: 2007 Office System Tool: Outlook HTML and CSS Validator. Microsoft also has provided the following documentation to assist designerns and developers with the task of supporting Outlook's poor standard support:

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 Part 1
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 Part 2.

Short of sending your test HTML email to your own email client (web or desktop based), the best way to test out almost all of the popular email clients is to use one of the following email services. Each offers the ability to preview email templates in around 20 or so email clients. In no particular order, they are:

GetResponse
Litmus
Mail Chimp
Campaign Monitor
Email on Acid

If you're looking for a free option there is Premailer which provides a preview by simply stripping out tags as most email clients have limited CSS support. To my knowledge, Gmail, for example, completely strips out both inline and externally referenced CSS.

Additionally, if you're wondering which clients have the most market share here are two quick estimates:

Litmus Email Client Stats
Campaign Monitor Email Client Stats

Good luck and I hope this this helps!

Upvotes: 6

Related Questions