Responsive emails

  • Profile Image
    michiganawesome
    Asked on April 11, 2018 at 11:34 AM

    I am inputting responsive HTML emails (code below) in the autoresponder but all the styles making it responsive are stripped by your editor. Is there anything that can be done to keep those styles intact so the emails show up properly on mobile devices?

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Your Good Ink Printing Quote</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style type="text/css">

        /* CLIENT-SPECIFIC STYLES */

        #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */

        .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */

        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */

        body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */

        table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */

        img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */


        /* RESET STYLES */

        body{margin:0; padding:0;}

        img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}

        table{border-collapse:collapse !important;}

        body{height:100% !important; margin:0; padding:0; width:100% !important;}


        /* iOS BLUE LINKS */

        .appleBody a {color:#68440a; text-decoration: none;}

        .appleFooter a {color:#999999; text-decoration: none;}


        /* MOBILE STYLES */

        @media screen and (max-width: 525px) {


            /* ALLOWS FOR FLUID TABLES */

            table[class="wrapper"]{

              width:100% !important;

            }


            /* ADJUSTS LAYOUT OF LOGO IMAGE */

            td[class="logo"]{

              text-align: left;

              padding: 20px 0 20px 0 !important;

            }


            td[class="logo"] img{

              margin:0 auto!important;

            }


            /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */

            td[class="mobile-hide"]{

              display:none;}


            img[class="mobile-hide"]{

              display: none !important;

            }


            img[class="img-max"]{

              max-width: 100% !important;

              height:auto !important;

            }


            /* FULL-WIDTH TABLES */

            table[class="responsive-table"]{

              width:100%!important;

            }


            /* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */

            td[class="padding"]{

              padding: 10px 5% 15px 5% !important;

            }


            td[class="padding-copy"]{

              padding: 10px 5% 10px 5% !important;

              text-align: center;

            }


            td[class="padding-meta"]{

              padding: 30px 5% 0px 5% !important;

              text-align: center;

            }


            td[class="no-pad"]{

              padding: 0 0 20px 0 !important;

            }


            td[class="no-padding"]{

              padding: 0 !important;

            }


            td[class="section-padding"]{

              padding: 40px 15px 40px 15px !important;

            }


            td[class="section-padding-bottom-image"]{

              padding: 40px 15px 0 15px !important;

            }


            /* ADJUST BUTTONS ON MOBILE */

            td[class="mobile-wrapper"]{

                padding: 10px 5% 15px 5% !important;

            }


            table[class="mobile-button-container"]{

                margin:0 auto;

                width:100% !important;

            }


            a[class="mobile-button"]{

                width:80% !important;

                padding: 15px !important;

                border: 0 !important;

                font-size: 16px !important;

            }

            *[class="gmail-fix"] {

                display: none !important;

            }


        }

    </style>

    </head>

    <body style="margin: 0; padding: 0;">

    <div class="gmail-fix" style="letter-spacing: 596px; line-height: 0; mso-hide: all">&nbsp;</div>


    <!-- HEADER -->

    <table border="0" cellpadding="0" cellspacing="0" width="100%">

        <tr>

            <td bgcolor="#143354">

                <!-- HIDDEN PREHEADER TEXT -->

                <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">

                    We've received your quote request (#{quoteId}) and will be in touch soon!

                </div>

                <div align="center" style="padding: 0px 15px 0px 15px;">

                    <table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">

                        <!-- LOGO/PREHEADER TEXT -->

                        <tr>

                            <td style="padding: 20px 0px 30px 0px;" class="logo">

                                <table border="0" cellpadding="0" cellspacing="0" width="100%">

                                    <tr>

                                        <td bgcolor="#143354" width="100" align="left"><img src="https://goodink.com/sites/all/themes/good_ink_rapid/email/logo.jpg" width="300" style="display: block; font-family: Helvetica, Arial, sans-serif; color: #666666; font-size: 16px; margin:0 auto;" border="0"></td>

                                    </tr>

                                </table>

                            </td>

                        </tr>

                    </table>

                </div>

            </td>

        </tr>

    </table>


    <!-- ONE COLUMN SECTION -->

    <table border="0" cellpadding="0" cellspacing="0" width="100%">

        <tr>

            <td bgcolor="#FFFFFF" align="center" style="padding: 60px 15px 80px 15px;" class="section-padding">

                <table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">

                    <tr>

                        <td>

                            <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                <tr>

                                    <!-- HERO IMAGE -->

                                    <td class="padding-copy" align="center">

                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                            <tr>

                                                <td></td>

                                                <td align="center">

                                                    <img src="https://goodink.com/sites/all/themes/good_ink_rapid/email/campaign-2.png" width="80" height="118" border="0" alt="Order Shipped" style="display: inline-block; padding: 0; color: #266e9c; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; margin:0 auto;" class="img-max">

                                                </td>

                                                <td></td>

                                            </tr>

                                        </table>

                                    </td>

                                </tr>

                                <tr>

                                    <td>

                                        <!-- COPY -->

                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                            <tr>

                                                <td align="center" style="font-size: 36px; font-family: Helvetica, Arial, sans-serif; color: #043a72; padding-top: 20px;" class="padding-copy">We're working on your quote!</td>

                                            </tr>

                                        </table>

                                    </td>

                                </tr>

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <!-- COPY -->

                            <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                <tr>

                                    <td align="left" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #666666; font-weight:normal; padding-top: 20px; padding-bottom: 10px; line-height:24px;" class="padding-copy">

                                        <p>Hello!</p>

                                        <p>Thank you for considering Good Ink for your custom apparel needs! We're working on finalizing your quote and you'll be hearing from us soon.</p>

                                        <p>If anything looks off about the quote below, please do not hesitate to contact us by <a target="_blank" href="mailto:hello@goodink.com" style="color:#2dcc70;">replying to this email</a> or calling (616) 294-8884.</p>

                                    </td>

                                </tr>

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td>

                          <!-- COPY -->

                          <table width="100%" border="0" cellspacing="0" cellpadding="0">

                              <tr>

                                  <td align="center" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #666666; font-weight:normal; padding: 20px; background-color: #F8F8F8; line-height:24px;">

                                    <p style="font-size: 18px; color: #043a72; font-weight: bold; margin-top:0;">Quote Summary:</p>

                                    <p style="margin-top: 4px; margin-bottom: 4px;">Quote Number: {quoteId}</p>

                                    <p style="margin-top: 4px; margin-bottom: 4px;">{garmentQty} x {garment}</p>

                                    <p style="margin-top: 4px; margin-bottom: 4px;">Front Inks: {frontInks} | Back Inks: {backInks}</p>

                                    <p style="margin-top: 4px; margin-bottom: 4px;"><strong>Cost Per Shirt</strong>: ${totalPerShirt}</p>

                                    <p style="margin-top: 4px; margin-bottom: 4px;"><strong>Total</strong>: ${total}</p>

                                  </td>

                              </tr>

                          </table>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <!-- COPY -->

                            <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                <tr>

                                  <td align="center" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #666666; font-weight:normal; padding-top: 10px; line-height:24px;" class="padding-copy">

                                      <p style="font-style:italic; color:#929395;">P.S. Did you know that you can fundraise with custom shirts for free?! <a target="_blank" href="https://goodink.com/how-it-works?utm_source=jotform&utm_medium=email&utm_campaign=customer-quote" rel="nofollow noopener" style="color:#2dcc70;">Find out how it works here.</a></p>

                                  </td>

                                </tr>

                            </table>

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

    </table>



    <!-- FOOTER -->

    <table border="0" cellpadding="0" cellspacing="0" width="100%">

        <tr>

            <td bgcolor="#F8F8F8" align="center" style="padding: 20px 0px;">

                <!-- UNSUBSCRIBE COPY -->

                <table width="500" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">

                    <tr>

                        <td align="center" valign="middle" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">

                            <span class="appleFooter" style="color:#666666;">GoodInk.com LLC | 12330 James St, Suite H030 | Holland, MI, 49424</span><!--<br>

                            <a class="original-only" style="color: #666666; text-decoration: none;">Unsubscribe</a><span class="original-only" style="font-family: Arial, sans-serif; font-size: 12px; color: #444444;">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span><a style="color: #666666; text-decoration: none;">View this email in your browser</a>-->

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

    </table>


    </body>

    </html>


  • Profile Image
    Brody_S
    Answered on April 11, 2018 at 12:30 PM

    I have set up an autoresponse email on a test form using your custom HTML, this is the result on mobile:

    1523464008testscreenshot.png

    Here's a quick guide to help you set it up:

    1523464051stepone.png

    1523464070steptwo.png

    1523464089stepthree.png

    Note: Delete everything from the Email content box, only paste the code inside of the source code editor!

    1523464111finalstep.png

    Hopefully, this will help you resolve any issues you may have.

    If you have any further questions feel free to let us know!

    Best regards. 

  • Profile Image
    michiganawesome
    Answered on April 11, 2018 at 12:38 PM

    Thanks for your response. While it looks ok in the Gmail app on Android, other clients do not behave that way. iOS mail app preview attached below. I would like to know if the responsive styles that I have input in the email body can be maintained and not stripped out by the editor somehow.

    1523464674IMG_94063DCBDAD8-1.jpeg

  • Profile Image
    Brody_S
    Answered on April 11, 2018 at 12:45 PM

    In this case, the problem is with the HTML code itself (if the editor was stripping the CSS then it wouldn't work on Android either).

    I will take a look at the code and get back to you shortly!

  • Profile Image
    michiganawesome
    Answered on April 11, 2018 at 12:54 PM

    The code I provided, when used in other email service providers is responsive in all mobile mail clients. The issue is that the styles in the <head> are being stripped out by the JotForm email editor (examples below). I believe, and could be mistaken, that the Gmail app on Android will attempt to make non-responsive emails responsive.

    PRIOR TO PASTING IN TO JOTFORM'S EDITOR:

    <head>

    <title>Your Good Ink Printing Quote</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style type="text/css">

        /* CLIENT-SPECIFIC STYLES */

        #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */

        .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */

        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */

        body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */

        table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */

        img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */


        /* RESET STYLES */

        body{margin:0; padding:0;}

        img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}

        table{border-collapse:collapse !important;}

        body{height:100% !important; margin:0; padding:0; width:100% !important;}


        /* iOS BLUE LINKS */

        .appleBody a {color:#68440a; text-decoration: none;}

        .appleFooter a {color:#999999; text-decoration: none;}


        /* MOBILE STYLES */

        @media screen and (max-width: 525px) {


            /* ALLOWS FOR FLUID TABLES */

            table[class="wrapper"]{

              width:100% !important;

            }


            /* ADJUSTS LAYOUT OF LOGO IMAGE */

            td[class="logo"]{

              text-align: left;

              padding: 20px 0 20px 0 !important;

            }


            td[class="logo"] img{

              margin:0 auto!important;

            }


            /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */

            td[class="mobile-hide"]{

              display:none;}


            img[class="mobile-hide"]{

              display: none !important;

            }


            img[class="img-max"]{

              max-width: 100% !important;

              height:auto !important;

            }


            /* FULL-WIDTH TABLES */

            table[class="responsive-table"]{

              width:100%!important;

            }


            /* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */

            td[class="padding"]{

              padding: 10px 5% 15px 5% !important;

            }


            td[class="padding-copy"]{

              padding: 10px 5% 10px 5% !important;

              text-align: center;

            }


            td[class="padding-meta"]{

              padding: 30px 5% 0px 5% !important;

              text-align: center;

            }


            td[class="no-pad"]{

              padding: 0 0 20px 0 !important;

            }


            td[class="no-padding"]{

              padding: 0 !important;

            }


            td[class="section-padding"]{

              padding: 40px 15px 40px 15px !important;

            }


            td[class="section-padding-bottom-image"]{

              padding: 40px 15px 0 15px !important;

            }


            /* ADJUST BUTTONS ON MOBILE */

            td[class="mobile-wrapper"]{

                padding: 10px 5% 15px 5% !important;

            }


            table[class="mobile-button-container"]{

                margin:0 auto;

                width:100% !important;

            }


            a[class="mobile-button"]{

                width:80% !important;

                padding: 15px !important;

                border: 0 !important;

                font-size: 16px !important;

            }

            *[class="gmail-fix"] {

                display: none !important;

            }


        }

    </style>

    </head>

    <body style="margin: 0; padding: 0;">

    <div class="gmail-fix" style="letter-spacing: 596px; line-height: 0; mso-hide: all">&nbsp;</div>


    AFTER PASTING IN TO JOTFORM EDITOR:

    <div class="gmail-fix" style="letter-spacing: 596px; line-height: 0; mso-hide: all;">&nbsp;</div>

  • Profile Image
    david
    Answered on April 11, 2018 at 01:29 PM

    Our email editor does not allow for creating a full HTML page in the email.  Paragraph, table and other various tags can be used and can be styled using inline styling.  The email editor would remove Class declarations and style sheet CSS will be stripped.