3
Hello,
I’m making a HTML for email and, I realized that they are lately tabulated, but my question is whether that is still necessary.
There’s some kind of risks if I do not do in tables and the css not for inline, because I just tested sending it to Gmail and it was normally.
Thank you
7
The Gmail is just one client, there are several like Thunderbird (Desktop), outlook.com (web), mail.yahoo.com (web) and each email system can render in a way, one of the biggest headaches of developers is undoubtedly Outlook for Desktop.
Some important details to get better compatibility between email clients:
It is necessary to use inline styles, so:
<div style="color: #fc0;">Exemplo</div>
In Outlook for desktop even in the latest version does not recognize HTML5, so tags should be the same as HTML4.01, so instead of tags like section use only <div>, <span>
In outlook it is also necessary to declare DOCTYPE to HTML4 as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Remember, for it to work there can be no kind of space before it, nor breaks lines.
Still in Outlook for Desktop it is necessary to eventually use the tag <meta http-equiv="X-UA-Compatible" content="IE=edge"> for better compatibility, since it uses the same HTML rendering engine
Emails sometimes disable CSS properties like position:;, then preferably never make your layouts based on this
Do not use advanced CSS3 properties to create any specific effect, it is likely that it will not work on all email clients
Test on every possible email client and if you still have problems, even if the indicated use tables.
Tables and HTML5 are not two different things, sites made in HTML4 are not made in tables, actually tables was a way to make layouts a "little wrong" from the beginning, their goal is to be used for tabular data, both in HTML4 and HTML5.
HTML5 only inserted new tags and attributes and removed others and a more simplified and "unified" way of creating HTML, before we had several DOCTYPES And we still had XHTML, now it’s pretty much all one thing. Today HTML5 supports several things (not to say everything) that XHTML supported, basically it can be HTML or XHTML, just by adjusting the content-type
<link href="http://...">, external styles will be blocked<script>, This doesn’t work at allCreate an alternate version of the message in text format, this helps more obsolete email readers who cannot read html or sometimes serve as "fallback", PHPMailer and System.Net.Mail already do this (I believe), manually the structure would be something like:
Mime-Version: 1.0
Date: Sat, 03 Dec 2016 12:46:10 +0000
Content-Type: multipart/mixed;
boundary="----=MAIN"
Subject: teste
------=MAIN
Content-Type: multipart/alternative;
boundary="----=INNER"
------=INNER
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 7bit
Olá, mundo!
------=INNER
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div style="color: #fc0;">
Olá, <strong>mundo</strong>!
</div>
</body>
</html>
------=MAIN--
0
No problem people usually do so more for compatibility, depending on the email reader may not be compatible, some even send also the plain text version if the reader does not read html.
remembering only that the css as you spoke needs to be inline.
I leave here too link to supplement my answer
While this link may answer the question, it is best to include the essential parts of the answer here and provide the link for reference. Replies per link only can be invalidated if the page with the link is changed. - From Review
but the link is totally expendable, since I put only as alternative source...
Browser other questions tagged html css emailing
You are not signed in. Login or sign up in order to post.
Then my reference is based on the reader that will read the email, be it Gmail, Outlook and etc. Correct? If yes, these guys give some document explaining what they accept?
– Pedro Soares
I meant referring to the way I should write the HTML targeting who will read my code, the recommended would be to make as adaptable as possible so that it does not generate inconvenience to the user.
– Pedro Soares
@Pedrosoares this same, because the user will not know the reason and there are still many Outlook users for Desktop, the best is to simplify HTML, use HTML4, do not use advanced CSS effects, do not use external fonts of letters, will have to use images, use the edge metatag and not use the property
position:;of the CSS.– Guilherme Nascimento
This then, I thank you for the answer, I assure you will help many people who will want to remove this doubt.
– Pedro Soares