Responsive email design shifting on mobile

Hi Forum.

We are starting to look at responsive email template design and have been using the very helpful guide by campaign monitor.

http://www.campaignmonitor.com/guides/mobile/

However we have been finding a weird issue. Although the template when it hits a mobile (we have been using an iPhone to test) loads the correct mobile content. After loading the whole design shifts over to the left meaning it ends up looking unbalanced.

This happens on even the downloadable template examples in the guide.

Anyone have any idea what is happening?

roshodgekiss roshodgekiss, 4 years ago

Hi there Becca, that's unusual - usually this happens when something in the content pushes out the width of a design. Just to double-check, are you sending with Campaign Monitor? We have previously had reports of similar things happening when other email services have added their own custom header/footer to an email design.

Thanks, becca! By all means post your code here too or contact our team with details - we're always happy to check things out on our end. Have a great week!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
becca-CM, 4 years ago

Hi there! Thanks for the reply.

The code is a minor amended version of one of your example templates(although also happening on others).

Also yes - we are seding out via Campaign Monitor. Code is below - any help would be great.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ABC Widgets Newsletter</title>
<style>
a:hover {
    text-decoration: underline !important;
}
td.promocell p {
    color:#e1d8c1;
    font-size:16px;
    line-height:26px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:14px;
    font-weight:normal;
}
td.contentblock h4 {
    color:#444444 !important;
    font-size:16px;
    line-height:24px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-top:0;
    margin-bottom:10px;
    padding-top:0;
    padding-bottom:0;
    font-weight:normal;
}
td.contentblock h4 a {
    color:#444444;
    text-decoration:none;
}
td.contentblock p {
    color:#888888;
    font-size:13px;
    line-height:19px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-top:0;
    margin-bottom:12px;
    padding-top:0;
    padding-bottom:0;
    font-weight:normal;
}
td.contentblock p a {
    color:#3ca7dd;
    text-decoration:none;
}

img {
    display: block;
}
a.mobileshow, .mobilehide {
    display: none;
    color: #fff; /*for Gmail */
}

/* Mobile stylesheet for iPhone and Android */

@media only screen and (max-device-width: 480px) {

table {
   position: relative;
}

   a[class="mobileshow"], a[class="mobilehide"] {
      display: block !important;
      color: #fff !important;
      background-color: #aaa;
      border-radius: 20px;
      padding: 0 8px;
      text-decoration: none;
      font-weight: bold;
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      font-size: 11px;
      position: absolute;
      top: 25px;
      right: 10px;
      text-align: center;
      width: 40px;
   }
   div[class="article"] {
      display: none;
   }
   a.mobileshow:hover {
      visibility: hidden;
   }
   .mobileshow:hover + .article {
      display: inline !important;
   }

   div[class="header"] {
       font-size: 16px !important;
   }
   table[class="table"], td[class="cell"] {
       width: 300px !important;
   }
    table[class="promotable"], td[class="promocell"] {
      width: 325px !important;
   }
    td[class="footershow"] {
       width: 300px !important;
   }
    table[class="hide"], img[class="hide"], td[class="hide"] {
      display: none !important;
   }
   img[class="divider"] {
      height: 1px !important;
   }
   td[class="logocell"] {
      padding-top: 15px !important;
      padding-left: 15px !important;
      width: 300px !important;
   }
   img[id="screenshot"] {
       width: 325px !important;
       height: 127px !important;
   }
   img[class="galleryimage"] {
       width: 53px !important;
       height: 53px !important;
   }
   p[class="reminder"] {
       font-size: 11px !important;
   }
   h4[class="secondary"] {
       line-height: 22px !important;
       margin-bottom: 15px !important;
       font-size: 18px !important;
   }
}
 @media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) {
   .article {
      display: inline !important;
   }
   a.mobileshow, a.mobilehide {
      display: none !important;
   }
}
</style>
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
  <tr>
    <td bgcolor="#e4e4e4" width="100%">
    
    
    <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
        <tr>
        <td width="600" class="cell"><br>
    
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td bgcolor="#ef3101" nowrap><img border="0" src="images/spacer.gif" width="5" height="1"></td>
                <td width="100%" bgcolor="#ffffff">
                <table width="100%" cellpadding="20" cellspacing="0" border="0">
                    <tr>
                      <td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"><strong><a href="http://google.com" class="link">First heading</a></strong> </h4>
                        <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
                        <div class="article">
                          <p class="bodytext"><img src="images/75.jpg" style="margin: 0 10px 10px 0; float: left;" > Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at nisl tellus, ac ultrices mauris. Vivamus sollicitudin nisi a neque euismod rutrum. Donec blandit varius dui vitae bibendum.</p>
                          <a href="#link" class="readmore" style="font-size: 13px; color: #85bdad; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">Read more...</a> </div></td>
                    </tr>
                </table>
                </td>
              </tr>
            </table>
            <img border="0" src="images/spacer.gif" width="1" height="15" class="divider"><br>
            
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td bgcolor="#ef3101" nowrap><img border="0" src="images/spacer.gif" width="5" height="1"></td>
                <td width="100%" bgcolor="#ffffff"><table width="100%" cellpadding="20" cellspacing="0" border="0">
                    <tr>
                      <td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"> <strong><a href="#link" class="link">Second heading</a></strong> </h4>
                        <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
                        <div class="article">
                          <p class="bodytext"><img src="images/75.jpg" style="margin: 0 10px 10px 0; float: left; " > Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at nisl tellus, ac ultrices mauris. Vivamus sollicitudin nisi a neque euismod rutrum. Donec blandit varius dui vitae bibendum.</p>
                          <a href="#link" class="readmore" style="font-size: 13px; color: #85bdad; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">Read more...</a> </div></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            
            
            <img border="0" src="images/spacer.gif" width="1" height="15" class="divider"><br></td>
        </tr>
      </table>
      
      
      <img border="0" src="images/spacer.gif" width="1" height="25" class="divider"><br>
            
      
      <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f2f2f2">
        <tr>
          <td><img border="0" src="images/spacer.gif" width="1" height="5" class="divider"><br>
            
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
              <tr>
                <td width="600" nowrap bgcolor="#f2f2f2" class="cell">
                
                        <p style="color:#a6a6a6;font-size:12px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:15px;padding-top:0;padding-bottom:0;line-height:18px;" class="reminder">You’re receiving this because you’re an awesome ABC Widgets customer or subscribed via <a href="http://www.abcwidgets.com/" style="color:#a6a6a6;text-decoration:underline;">our site</a>.</p>
                        <p style="color:#c9c9c9;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
                          <preferences style="color:#3ca7dd;text-decoration:none;"><strong>Edit your subscription</strong></preferences>
                          &nbsp;&nbsp;|&nbsp;&nbsp;
                          <unsubscribe style="color:#3ca7dd;text-decoration:none;"><strong>Unsubscribe instantly</strong></unsubscribe>
                        </p>
                        
                 </td>
              </tr>
            </table>
            
            
            <img border="0" src="images/spacer.gif" width="1" height="5" class="divider"><br></td>
        </tr>
      </table></td>
      
      
  </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 4 years ago

Hey there Becca, I reviewed the code as well as the original progressive disclosure demo code and the fault here is entirely mine. It looks like I didn't set a couple of widths correctly, which caused the jumpiness, as well as the articles not spanning the full width of the iPhone screen, as they should. Consequently, I've updated the demo and will be uploading the new files to our site shortly, but you can download them here first.

I'm really sorry for this shoddy work, but hopefully you'll have better luck with the above code! Oh, I've also added some usage notes to the code comments too, covering some other issues I'm yet to work on.

If there's anything else I can help explain, be sure to let me know :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
becca-CM, 4 years ago

Hi Rosanne

Thanks for having a look into the code and supply a new version!
I will download this and have a play to see if the problem is now sorted (cross fingers!).

Designing emails so they are more readable on mobiles is definitely an area i think needs addressing!

I'll let you know if we encounter any more "glitches"! :)

becca-CM, 4 years ago

Hi Rosanne.

Just to let you know - this new code seems to work fine. Although you do have an image align problem with the cat images and copy on the right when it hits outlook 2010!

Becca

becca-CM, 4 years ago

Hi! one last question :)

Have you done testing with picking up emails received into outlook on a blackberry?
We have been testing with this and noticed that the background-image replacement hasn't processed. (not shown in this example code)

Cheers

roshodgekiss roshodgekiss, 4 years ago

Hey there Becca, thanks for checking out the updated code :) Ah, that's the one thing I forgot to add to the images - align="left". If you get a moment, just update the cat pictures like so:

<img src="http://placekitten.com/75/75" align="left" style="margin: 0 10px 10px 0; float: left;">

I'll have that sorted in my next revision ;)

Admittedly, I haven't had a chance to test Outlook/Blackberry, I'm sorry to say. It's likely that background-image CSS aren't supported, just as they normally are not in Outlook 2007/2010. If it turns out to be a major player next time we run our email client popularity stats, we'll be sure to do more research into this email client/device combo.

Thanks, Becca! Really appreciate you giving us the momentum to update our code, it's much appreciated :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
becca-CM, 4 years ago

Hi Rosanne

Thanks for the feedback and glad i could help highlight some bits! I think its great that people are at last starting to look at best approach for mobile email coding.

On the Blackberry/Outlook front - yes i had concluded that the background-image probably wasn't actually supported given outlooks tendencies to be behind the times!

I will keep an eye on any further updates you find out!
Becca

roshodgekiss roshodgekiss, 4 years ago

Thanks, Becca - happy sleuthing! Have a great weekend :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mjlloyduk mjlloyduk, 4 years ago

Hi there,

I've also been looking at progressive disclosure template (and am really impressed by it too!).  I too, though, have been having an issue testing it on a couple of Android devices. I've had a look at in the native email client on and HTC One S and a Nexus, neither of which seemed to pick up the media query specific CSS. 

My first thought was that it was the increased screen resolution on these devices, but even when I've adjusted the max-width to account for this, the CSS seems to be ignored.

Given it was on two different device produced by different manufacturers, I'd considered discounting the idea that it might be some manufacturer-specific enhancement to the native mail app, but I did also wonder whether the native Android mail app had moved closer to the mobile GMail app in terms of underlying spec and consequent behaviour when dealing with media queries.

Or (more likely) is there something obvious I'm missing in trying to get the progressive disclosure template to work on the newer Android devices?  Have you encountered any problems testing the template on them yourself?

Sorry a lot of 'wonderings' and questions there :)  Any help you could give would be greatly appreciated.

Regards
Mark

roshodgekiss roshodgekiss, 4 years ago

Hey there Mark, thank you for writing in about the progressive disclosure template - it's definitely worth staying curious! We always include a couple of caveats in regards to designing for Android devices, which is why we put together this blog post on potential issues and challenges.

While we don't have any insight specifically into the native app on the HTC One S and Nexus, it would be disappointing to find out that media queries were not being supported. Previously, tests on our Google Nexus S (Samsung) have been fruitful, even with the default max-device-width: 480px media query.

Like you, I suspect that either a different media query is required, or both clients don't feature media query support. To determine which is the case, can I recommend testing, using one of the following declarations instead?

@media only screen and (-webkit-device-pixel-ratio:.75){
    /* Put CSS for low density (ldpi) Android layouts in here */
}

@media only screen and (-webkit-device-pixel-ratio:1){
    /* Put CSS for medium density (mdpi) Android layouts in here */
}

@media only screen and (-webkit-device-pixel-ratio:1.5){
    /* Put CSS for high density (hdpi) Android layouts in here */
}

By making the declaration independent of screen size, we should be able to find out if media queries are indeed supported - if so, then it's the declaration that needs to be tweaked. Thanks, Mark - let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mjlloyduk mjlloyduk, 4 years ago

Hi Rosanne,

Thanks for the suggestion (apologies for the delay in responding, btw - long holiday weeked in the UK always throw things off-kilter!).

I added those media queries and tested them, but to no avail, I'm afraid (at least on my HTC One S).  I'm going to try a few other media queries and will post any positive results I get, but at does seem as the native Android mail app is behaving like the GMail app and ignoring the media queries :(

Regards
Mark

roshodgekiss roshodgekiss, 4 years ago

Thanks Mark, keep us posted as to how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mjlloyduk mjlloyduk, 4 years ago

Hi,

I just wanted to follow up with a couple of other things I've discovered about this.

1) Whilst a single tap on a link within the collapsed/hidden region doesn't work, a long press does, certainly on links off to external URLS.  Phone numbers, on the iPhone at least, didn't work. It's not the most intuitive way to link, but I wasn't sure if it was known that links did work, albeit after a fashion!

2) The Android native app media query issue seems to be related to use of Exchange.  Whilst looking into it, I came across this article on Stack Overflow

http://stackoverflow.com/questions/7668553/android-email-css-media-queries-outlook-exchange

where users were having no joy with Android and media queries (but with no problems on iPhone). 

Having read this I sent the same email to different addresses using the same mail app on my Android phone, one using Exchange ActiveSync, one using a normal POP account.  In the Exchange version, the media queries were ignored, in the POP version they worked fine. 

(I should also add that the Exchange version did not strip out the entire HTML style block, the CSS declarations outside of the media query appeared to work, although I haven't tested that extensively as yet.)

I haven't been able to determine whether it's Exchange ActiveSync or the Exchange server itself that's the cause of the media query issue - that's a whole other can of worms - but I guess at least now it's a bit more of a known unknown!

Regards
Mark

roshodgekiss roshodgekiss, 4 years ago

Hi Mark, thank you so much for sharing this! I hadn't heard about this Android/Exchange issue before, but it certainly is very curious. Let us know if you have any further updates along the way - I'm quietly fascinated here :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098