Issue 12076044: General base template for html emails (Closed)
|
Created:
11 years, 9 months ago by ana.balica Modified:
11 years, 7 months ago Reviewers:
thomas.j.waldmann, waldi Visibility:
Public. |
DescriptionSince we are delivering notifications using HTML, this base file will be useful to any other HTML mails.
For reference I have used http://htmlemailboilerplate.com/ , mailchimp and campaignmonitor tips.
Also I have tested the rendered template (with some content in it) using https://litmus.com/ which sends the email to the big majority of web/mobile/desktop mail clients and take a screenshot of each. Also it analyses the code and informs about potential problems. The issues announced are related to some mail clients that don't support margin or padding.
Nevertheless (even without some margin/padding) the content looks ok in all major clients.
If you wish I can attach a link to a zip with all screenshots taken by limus.
Patch Set 1 #
Total comments: 6
Patch Set 2 : Fix typo order to border #Patch Set 3 : Add comments for original source of html mail code #
Total comments: 7
Patch Set 4 : MIT licensed #Patch Set 5 : Remove content-type meta #MessagesTotal messages: 10
https://codereview.appspot.com/12076044/diff/1/MoinMoin/templates/mail/html_b... File MoinMoin/templates/mail/html_base.html (right): https://codereview.appspot.com/12076044/diff/1/MoinMoin/templates/mail/html_b... MoinMoin/templates/mail/html_base.html:2: <html xmlns="http://www.w3.org/1999/xhtml"> I must admit that I do not know which kind of html is best for email clients. If it was for a browser I would have said "use html5" ... waldi: do you know? otherwise: did you research about html4 vs. xhtml vs. html5 IN EMAIL? https://codereview.appspot.com/12076044/diff/1/MoinMoin/templates/mail/html_b... MoinMoin/templates/mail/html_base.html:16: </style> in case you found this all on the web, maybe document where you got it from (esp. if there is some explanation given why this should be like that). https://codereview.appspot.com/12076044/diff/1/MoinMoin/templates/mail/html_b... MoinMoin/templates/mail/html_base.html:27: </html> btw: did you validate the html generated from this?
Sign in to reply to this message.
https://codereview.appspot.com/12076044/diff/1/MoinMoin/templates/mail/html_b... File MoinMoin/templates/mail/html_base.html (right): https://codereview.appspot.com/12076044/diff/1/MoinMoin/templates/mail/html_b... MoinMoin/templates/mail/html_base.html:2: <html xmlns="http://www.w3.org/1999/xhtml"> On 2013/07/30 16:35:35, Thomas.J.Waldmann wrote: > I must admit that I do not know which kind of html is best for email clients. If > it was for a browser I would have said "use html5" ... > otherwise: did you research about html4 vs. xhtml vs. html5 IN EMAIL? I wrote in the issue description that as a reference I used http://htmlemailboilerplate.com/ The author uses xhtml, same does http://www.emailology.org/#1 and mailchimp. However I didn't find anything on this topic here - http://www.w3.org/TR/1998/NOTE-HTMLThreading-0105 or here - http://www.w3.org/2007/05/html-mail/html-email-standards If we take a look in Appendix B (http://www.w3.org/TR/1998/NOTE-HTMLThreading-0105#Appendix B) the sample mail uses simply html. I assume most mail client actually strip out such tags as html/head (some even don't consider the doctype). So the usage of xhtml is useful for browser testing (this is just a guess), since it doesn't allow any broken markup code. https://codereview.appspot.com/12076044/diff/1/MoinMoin/templates/mail/html_b... MoinMoin/templates/mail/html_base.html:16: </style> On 2013/07/30 16:35:35, Thomas.J.Waldmann wrote: > in case you found this all on the web, maybe document where you got it from > (esp. if there is some explanation given why this should be like that). Yes, this is taken from here http://htmlemailboilerplate.com/ Where can I document it? We should not insert html comments in the mail template, because it can end up in spam. Jinja2 comments create empty lines in the markup. https://codereview.appspot.com/12076044/diff/1/MoinMoin/templates/mail/html_b... MoinMoin/templates/mail/html_base.html:27: </html> On 2013/07/30 16:35:35, Thomas.J.Waldmann wrote: > btw: did you validate the html generated from this? good idea. doing it now.
Sign in to reply to this message.
> I wrote in the issue description that as a reference I used A right, sorry, have overlooked that. > > in case you found this all on the web, maybe document where you got it from > > (esp. if there is some explanation given why this should be like that). > > Yes, this is taken from here http://htmlemailboilerplate.com/ > Where can I document it? > We should not insert html comments in the mail template, because it can end up > in spam. Jinja2 comments create empty lines in the markup. I'ld go for a jinja2 comment. If empty lines are an issue: put it into the commit comment.
Sign in to reply to this message.
https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... File MoinMoin/templates/mail/html_base.html (right): https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... MoinMoin/templates/mail/html_base.html:2: {# Check http://htmlemailboilerplate.com/ for more information #} He licenses this under MIT license, maybe mention that.
Sign in to reply to this message.
https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... File MoinMoin/templates/mail/html_base.html (right): https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... MoinMoin/templates/mail/html_base.html:6: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> The content-type of the mail should already set this value. https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... MoinMoin/templates/mail/html_base.html:7: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> Reference to a standard? https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... MoinMoin/templates/mail/html_base.html:21: <table border="0" cellpadding="0" cellspacing="0" width="100%" id="backgroundTable"> No table without tabular data.
Sign in to reply to this message.
https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... File MoinMoin/templates/mail/html_base.html (right): https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... MoinMoin/templates/mail/html_base.html:6: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> On 2013/07/31 14:53:45, waldi wrote: > The content-type of the mail should already set this value. It does, and it's also useful to keep it here for validation purposes. https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... MoinMoin/templates/mail/html_base.html:7: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> On 2013/07/31 14:53:45, waldi wrote: > Reference to a standard? http://dev.w3.org/csswg/css-device-adapt/ Viewport meta tag is used for mobile devices. https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... MoinMoin/templates/mail/html_base.html:21: <table border="0" cellpadding="0" cellspacing="0" width="100%" id="backgroundTable"> On 2013/07/31 14:53:45, waldi wrote: > No table without tabular data. Could you please rephrase that.
Sign in to reply to this message.
On 2013/07/31 15:18:13, ana.balica wrote: > https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... > File MoinMoin/templates/mail/html_base.html (right): > > https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... > MoinMoin/templates/mail/html_base.html:6: <meta http-equiv="Content-Type" > content="text/html; charset=utf-8" /> > On 2013/07/31 14:53:45, waldi wrote: > > The content-type of the mail should already set this value. > It does, and it's also useful to keep it here for validation purposes. Not really. If it does not match the behavior is undefined. If it matches it is useless. https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... > MoinMoin/templates/mail/html_base.html:7: <meta name="viewport" > content="width=device-width, initial-scale=1.0"/> > On 2013/07/31 14:53:45, waldi wrote: > > Reference to a standard? > http://dev.w3.org/csswg/css-device-adapt/ > Viewport meta tag is used for mobile devices. It is a editors draft. Please show that this is actually used by mail clients. https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... > MoinMoin/templates/mail/html_base.html:21: <table border="0" cellpadding="0" > cellspacing="0" width="100%" id="backgroundTable"> > On 2013/07/31 14:53:45, waldi wrote: > > No table without tabular data. > Could you please rephrase that. A table needs to have at least two rows and two columns. Otherwise it is no table at all.
Sign in to reply to this message.
On 2013/08/01 13:28:19, waldi wrote: > It is a editors draft. Please show that this is actually used by mail clients. http://www.w3.org/TR/mwabp/#bp-viewport And the viewport meta is also described here https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag?red... and here https://developer.apple.com/library/safari/#documentation/AppleApplications/R... > https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... > > MoinMoin/templates/mail/html_base.html:21: <table border="0" cellpadding="0" > > cellspacing="0" width="100%" id="backgroundTable"> > > On 2013/07/31 14:53:45, waldi wrote: > > > No table without tabular data. > > Could you please rephrase that. > > A table needs to have at least two rows and two columns. Otherwise it is no > table at all. http://www.w3.org/TR/html401/struct/tables.html "Each row group [in this case TBODY] must contain at least one row, defined by the TR element." I didn't find anything else on minimum number required for rows or columns. In the HTML mail the background table serves as a general content div, but because div tag is not well supported it is not used for resetting.
Sign in to reply to this message.
On 2013/08/01 16:53:20, ana.balica wrote: > On 2013/08/01 13:28:19, waldi wrote: > https://codereview.appspot.com/12076044/diff/12001/MoinMoin/templates/mail/ht... > > A table needs to have at least two rows and two columns. Otherwise it is no > > table at all. > http://www.w3.org/TR/html401/struct/tables.html > "Each row group [in this case TBODY] must contain at least one row, defined by > the TR element." > I didn't find anything else on minimum number required for rows or columns. > In the HTML mail the background table serves as a general content div, but > because div tag is not well supported it is not used for resetting. Please explain how a table with exactly one row and column would show something useful. This is called a layout table and the answer is simple "no".
Sign in to reply to this message.
On 2013/08/12 13:11:52, waldi wrote: > Please explain how a table with exactly one row and column would show something > useful. > This is called a layout table and the answer is simple "no". A layout table is useful for setting the width of the email to 100%. I have checked several different templates from campaignmonitor and mailchimp and all of them use the same nested structure: background table > tr > td (a single tr and a single tr, which already contain all the other data, i.e. nested tables). Unfortunately there are no standards, that would point to the exact way of doing it. That's why I was researching on the basis of platforms that provide HTML mails as a service and follow the guides made by them, which i assume are based on experience with lots of mail clients. For reference you can take a look at some examples from here: http://www.campaignmonitor.com/templates/
Sign in to reply to this message.
|
