8 Replies Latest reply on Sep 13, 2017 11:10 PM by Dave Roberts

    Email Rendering - Mobile Responsive Showing on some Desktop?

    Nikki Aurelio

      Hi - looking for some advice on an issue we're having with our email rendering. I am aware of different renderings across different devices and clients, but we're having an anomaly issue where sometimes emails being delivered on desktops are shrinking to show a left aligned version, almost like the mobile version for the header graphic.  Here is our current situation:

      • Recently built out a master Marketo email template with about 10 different modules for our emails to be designed in Editor 2.0
      • Test every email on Email on Acid and with samples directly to our team prior to sending an email.
      • Email appears fine on all tests and in within Email on Acid.
      • My company is running Office 365 with Microsoft Outlook 2016 - so we're all on the same client.
      • Some executives are receiving the emails with the graphic and headline rendered as a cropped version to the left. It almost is as though some of the mobile formatting is being applied when they open on their desktop. It is happening both when they have images turned on and off.
        • I've attached a few screengrabs of how the emails are supposed to look as well as the way they are receiving them with images on/off.
        • It is only happening to the module that has a background image with text overlay, and it occurs if that module is in any location within the email.

       

      I'm sure there is something in the code that can correct this, but I can't identify it since it's only happening on a few PCs with Office 365 with Microsoft Outlook 2016 and not universally on one client or device.

       

      Here is the code for that module, and happy to share additional CSS if someone has ideas! Thank you!

       

       

      <table class="deviceWidth mktoModule" id="banner-1bb67b845-ca21-4207-aff2-8adfd0cb0c05" mktoname="Banner 1" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin:0 auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">

                    <tbody>

                      <tr>

                        <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${Banner-BG-color1};background-image: url('${Banner-BG-image1}');background-size: cover; background-repeat: no-repeat;" background="${Banner-BG-image1}" bgcolor="${Banner-BG-color1}" valign="top">

                          <!--[if gte mso 9]>

                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">

             <v:fill type="frame" src="${Banner-BG-image1}" color="${Banner-BG-color1}" />

             <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

                <![endif]-->

                          <table class="deviceWidth" style="width: 500px; margin: 0 auto; text-align: center; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="500">

                            <tbody>

                              <tr>

                                <td>

                                  <div id="banner1-textbb67b845-ca21-4207-aff2-8adfd0cb0c05" class="mktoText" mktoname="Banner1 Text">

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

                                      <!-- Extra space -->

                                      <tbody>

                                        <tr>

                                          <td style="vertical-align: top; font-family: arial,helvetica,sans-serif; font-size: 36px; color: #8f8f8f; mso-line-height-rule: exactly; line-height: 40px; text-align: center;" valign="top">

                                            <div>

                                              <span style="color: #ffffff;"><strong><span style="font-size: 36px;"><br> <br><br>  <br>Thank You for <span style="color: #f0ab00;">Attending! </span> <br></span></strong></span>

                                              <span style="color: #ffffff;"><strong><span style="font-size: 36px;">  </span></strong></span>

                                            </div> </td>

                                        </tr>

                                        <tr>

                                          <td style="line-height: 1px; font-size: 1px; text-align: center;" height="10"><span style="color: #ffffff;"><strong> </strong></span></td>

                                        </tr>

                                        <tr>

                                          <td style="vertical-align: top; font-family: arial,helvetica,sans-serif; font-size: 14px; color: #ffffff; mso-line-height-rule: exactly; line-height: 20px; text-align: center;" valign="top"><br></td>

                                        </tr>

                                        <!-- Extra space -->

                                      </tbody>

                                    </table>

                                  </div> </td>

                              </tr>

                              <!--CTA button starts-->

                              <tr>

                                <td valign="top">

                                  <div id="banner1-CTAbb67b845-ca21-4207-aff2-8adfd0cb0c05" class="mktoText" mktoname="Button CTA"></div> </td>

                              </tr>

                              <!--CTA button ends-->

                              <!-- Extra space -->

                              <tr>

                                <td class="phne_height" style="line-height: 1px; font-size: 1px;" height="50"> </td>

                              </tr>

                            </tbody>

                          </table>

                          <!--[if gte mso 9]>

                            </v:textbox>

                            </v:rect>

                            <![endif]--> </td>

                      </tr>

                    </tbody>

                  </table>

        • Re: Email Rendering - Mobile Responsive Showing on some Desktop?
          Gerard Donnelly

          Hi Nicole,

           

          Are you able to provide a full copy of one of the faulty emails with all the code and media queries etc.

           

          Thanks,

           

          Gerard

          • Re: Email Rendering - Mobile Responsive Showing on some Desktop?
            Dave Roberts

            Hey Nikki-

             

            I looked thru the screenshots you attached and they all seem to have the common thread that the bg-image is just a little wider on each side than the content that's "on top" of it in that banner section. This tells me that Outlook is filling the background image based on the width of the content. One thing that jumps out at me is that your inner table is set to a width of 500 and has a margin: 0 auto; -- you might try setting that to 600px and then nesting a table inside with 50px <td> spacers in place of the left/right margin. These leave less room for Outlook to interpret the width of that section, and the less you ask of Outlook, the happier everyone is

             

            You might try replacing this:

            <table class="deviceWidth" style="width: 500px; margin: 0 auto; text-align: center; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="500">

                                  <tbody>

                                    <tr>

                                      <td>

                                        <div id="banner1-textbb67b845-ca21-4207-aff2-8adfd0cb0c05" class="mktoText" mktoname="Banner1 Text">

            with this:

            <table class="deviceWidth" style="width: 600px; margin: 0 auto; text-align: center; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">

                                  <tbody>

                                    <tr>

                                        <!-- left "margin" -->

                                        <td width="50" style="width:50px;"> </td>

                                      <td width="500" style="width:500px;">

                                        <div id="banner1-textbb67b845-ca21-4207-aff2-8adfd0cb0c05" class="mktoText" mktoname="Banner1 Text">

                                     ...

                                        </div>

                                         <!-- right "margin" -->

                                       <td width="50" style="width:50px;"> </td>

             

             

            I also saw that you mentioned that it might have something to do with image scaling. Here's a little nugget of code that I include immediately after the <head> element on the template that talks to Outlook and asks it not to make images any bigger than 96dpi. I use it more-so for the 120dpi Outlook settings, but it might work here if you're seeing inconsistent displays of similar code.

             

            <!--[if gte mso 9]><xml>

            <o:OfficeDocumentSettings>

              <o:AllowPNG/>

              <o:PixelsPerInch>96</o:PixelsPerInch>

            </o:OfficeDocumentSettings>

            </xml><![endif]-->

             

            At the end of the day, we normally recommend against using background images in email b/c it's a proven show-stopper and they're difficult to maintain. You might want to check to be sure that your images are sized exactly to spec for desktop - I've seen images that are too large/small cause erratic display issues like this before. Under the hood, Outlook is doing some "magic" when code hits the inbox and there's some 'fuzzy math' that happens with px values are converted into pc and then back into px for display/rendering. I've also seen situations with bg-images in Outlook where adding a height to the container w/ the image and content (being as explicit about sizing as possible, everywhere) has actually helped to increase the width of that image. I mention that b/c it looks like you're ending up with a "squeezed" image in the screenshots.

             

            The vml code can also be a bit buggy, you've got to remember you're asking a non-native Microsoft document to "speak" MSO and sometime things get lost in translation. This is another thing I try to avoid b/c even when I've thought I've had a "bulletproof" solution, it's ended up back in my inbox enough times for me to abandon the practice.

             

            Hope some of this leads to a solution!

            -Dave