search

mailgun / transactional-email-templates

Responsive transactional HTML email templates
http://blog.mailgun.com/transactional-html-email-templates/
MIT License
6.91k stars 1.15k forks source link

formatting issues in iOS gmail app after first in conversation #12

Closed enunciat closed 9 years ago

enunciat commented 9 years ago

Strange issue: In gmail app on iphone, where the first "billing" (slightly modified) email in a conversation renders well, but the 2nd, 3rd, etc (identical) emails in that conversation break down. Screenshots below:

First in conversation: firstt_in_conversation

Second (and 3rd is the same) in conversation: second_in_conversation

leemunroe commented 9 years ago

@enunciat Strange indeed. I wonder is there a tag left open somewhere. Mind sharing the full MIME to take a look? Remember to pull out any private stuff.

enunciat commented 9 years ago

@leemunroe ok here's the mime in plain text:

----==_mimepart_5537f725a3f20_63ff017f5340c21588
Content-Type: text/html;
 charset=UTF-8
Content-Transfer-Encoding: 7bit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0">
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Your XXXX receipt</title>
  </head>
  <body itemscope="" itemtype="http://schema.org/EmailMessage" style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #f6f6f6; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 100%; line-height: 1.6; margin: 0; width: 100% !important" bgcolor="#f6f6f6"><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6;
}
body {
background-color: #f6f6f6;
}
@media only screen and (max-width: 640px) {
  h1 {
    font-weight: 600 !important; margin: 20px 0 5px !important;
  }
  h2 {
    font-weight: 600 !important; margin: 20px 0 5px !important;
  }
  h3 {
    font-weight: 600 !important; margin: 20px 0 5px !important;
  }
  h4 {
    font-weight: 600 !important; margin: 20px 0 5px !important;
  }
  h1 {
    font-size: 22px !important;
  }
  h2 {
    font-size: 18px !important;
  }
  h3 {
    font-size: 16px !important;
  }
  .container {
    width: 100% !important;
  }
  .content {
    padding: 10px !important;
  }
  .content-wrap {
    padding: 10px !important;
  }
  .invoice {
    width: 100% !important;
  }
}
</style>

<table class="body-wrap" style="background: #f6f6f6; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; width: 100%" bgcolor="#f6f6f6"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; vertical-align: top" valign="top"></td>
        <td class="container" width="600" style="box-sizing: border-box; clear: both !important; display: block !important; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0 auto; max-width: 600px !important; vertical-align: top" valign="top">
            <div class="content" style="box-sizing: border-box; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0 auto; max-width: 600px; padding: 20px">
                <table class="main" width="100%" cellpadding="0" cellspacing="0" style="background: #fff; border-radius: 3px; border: 1px solid #e9e9e9; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0" bgcolor="#fff"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="content-wrap aligncenter" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 20px; text-align: center; vertical-align: top" align="center" valign="top">
                            <table width="100%" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="content-block aligncenter" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0 0 20px; text-align: center; vertical-align: top" align="center" valign="top">
                                        <h1 style="box-sizing: border-box; color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 32px; font-weight: 500; line-height: 1.2; margin: 40px 0 0">$237.30 Paid</h1>
                                    </td>
                                </tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="content-block aligncenter" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0 0 20px; text-align: center; vertical-align: top" align="center" valign="top">
                                        <h2 style="box-sizing: border-box; color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; margin: 40px 0 0">Thanks for using XXXX.ca</h2>
                                    </td>
                                </tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="content-block aligncenter" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0 0 20px; text-align: center; vertical-align: top" align="center" valign="top">
                    <a href="http://XXXX-staging.herokuapp.com/orders/50ff208d7567c33365cd8443277a4a2d" style="box-sizing: border-box; color: #348eda; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; text-decoration: underline">Download your files here</a>
                  </td>
                </tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="content-block" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0 0 20px; vertical-align: top" valign="top">
                                        <table class="invoice" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 40px auto; text-align: left; width: 80%"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="alignleft" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; text-align: left; vertical-align: top" align="left" valign="top">Test_Gamma Test<br style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0" />Invoice #56<br style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0" />03:31pm April 22, 2015</td>
                                            </tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; vertical-align: top" valign="top">
                                                    <table class="invoice-items" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; width: 100%"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td style="border-top-color: #eee; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; vertical-align: top" valign="top"><strong style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0">Project #PXXX</strong> ID #287
                                      <br style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0" /><em style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"> Address: </em>Lot 1, 2, 3, 4, 5, 6, 7, 11, 12, 10, 11, RP: 37b, HaXXXXXX-NoXXX, XXXX
                                                                        <br style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0" /><em style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0">Includes 2
                                                                            (Digital + Print)
                                                                         Documents: </em>
                                                                        <strong style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0">Field Note,Rplan</strong>
                                                                </td>
                                                              <td class="alignright" style="border-top-color: #eee; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top"> $75.00 </td>
                                                          </tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td style="border-top-color: #eee; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; vertical-align: top" valign="top"><strong style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0">Project #Jeremy-1111</strong> ID #405
                                        <br style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0" /><em style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0">(no address entered)</em>
                                                                        <br style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0" /><em style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0">Includes 1
                                                                            (Digital + Print)
                                                                         Document: </em>
                                                                        <strong style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0">Rplan</strong>
                                                                </td>
                                                              <td class="alignright" style="border-top-color: #eee; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top"> $75.00 </td>
                                                          </tr><tr class="total" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="alignright" width="80%" style="border-bottom-color: #333; border-bottom-style: solid; border-bottom-width: 2px; border-top-color: #333; border-top-style: solid; border-top-width: 2px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top">Subtotal</td>
                                                            <td class="alignright" style="border-bottom-color: #333; border-bottom-style: solid; border-bottom-width: 2px; border-top-color: #333; border-top-style: solid; border-top-width: 2px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top">$150.00</td>
                                                        </tr><tr class="invoice-items" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; width: 100%"><td class="alignright" width="80%" style="border-top-color: #eee; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top">Print Copies</td>
                              <td class="alignright" style="border-top-color: #eee; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top">$60.00</td>
                            </tr><tr class="invoice-items" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; width: 100%"><td class="alignright" width="80%" style="border-top-color: #eee; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top">Tax</td>
                              <td class="alignright" style="border-top-color: #eee; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top">$27.30</td>
                            </tr><tr class="total" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="alignright" width="80%" style="border-bottom-color: #333; border-bottom-style: solid; border-bottom-width: 2px; border-top-color: #333; border-top-style: solid; border-top-width: 2px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top">Total</td>
                              <td class="alignright" style="border-bottom-color: #333; border-bottom-style: solid; border-bottom-width: 2px; border-top-color: #333; border-top-style: solid; border-top-width: 2px; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; margin: 0; padding: 5px 0; text-align: right; vertical-align: top" align="right" valign="top">$237.30</td>
                            </tr></table></td>
                                            </tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 5px 0; vertical-align: top" valign="top"><strong style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0">Printed copies</strong> will be delivered to Test_Gamma Test, 1-54 Test ave
Testown Test Province
TES-EST within 7-10 business days</td>
                        </tr></table></td>
                                </tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="content-block aligncenter" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0 0 20px; text-align: center; vertical-align: top" align="center" valign="top">
                                        XXXX Ltd. 9-25 Example Avenue, AB<br style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0" />K9Z 9ZK (555) 555-5555
                                    </td>
                                </tr></table></td>
                    </tr></table><div class="footer" style="box-sizing: border-box; clear: both; color: #999; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 20px; width: 100%">
                    <table width="100%" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0"><td class="aligncenter content-block" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; margin: 0; padding: 0 0 20px; text-align: center; vertical-align: top" align="center" valign="top">Questions? Reply or email us <a href="mailto:info@XXXX.ca" style="box-sizing: border-box; color: #999; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; margin: 0; text-decoration: underline">info@XXXX.ca</a></td>
                        </tr></table></div></div>
        </td>
        <td style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; vertical-align: top" valign="top"></td>
    </tr></table></body>
</html>

----==_mimepart_5537f725a3f20_63ff017f5340c21588--
lembitk commented 9 years ago

@enunciat I personally feel/predict that the HTML from your last reply should render OK on iOS Gmail app – when displayed on its own, i.e as a standalone message (cannot be sure though, but a quick copy+paste "test" renders it as reasonably similar to the initial 'inlined/billing.html' template in my browsers). Most probably the display issues are due Gmail injecting some extra, dynamic HTML when you view the same message inside the Gmail's conversation view (2nd etc. messages sharing an identical subject line).

I've known for some time that there are various display issues with my HTML emails in Gmail's conversation view, no matter what particular Gmail client I'm testing – most prominently, in browser-based Gmail the conversation view tends to clip (hide) parts of messages, and color some/all text purple (indicating "quoted" text).

I haven't never really dug into this, just have learned to avoid using the same subject line during repeated email testing, so Gmail wont group the test emails into a conversation. Interestingly, when googling about this now, I was hoping to find some tips from the "usual suspects" like e.g Litmus, MailChimp, Email On Acid etc. but no luck. You might want to have a look at this Stack Overflow thread though.

enunciat commented 9 years ago

@lembitk ....interesting, seems like just putting an invoice # in the subject heading is a pragmatic work-around then.

lembitk commented 9 years ago

@enunciat Yes. And more broadly, I wouldn't worry that much about the display quirks of my HTML email deeper down in Gmail conversation view, as they're more or less out of email coder's control. I might be wrong, and I certainly would appreciate if someone would look deeper into this, but for now I would consider the situation somewhat similar to email forwarding – my HTML will break and there's not much I can do about it.

Thus, IMHO we're not looking at an issue with the template(s) here.