Mobile Friendly Design.

Regarding this blog post: http://www.campaignmonitor.com/blog/post/3442/mobile-email-design-in-practice/

It's obviously possible to hide stuff using display: none on mobile devices. Does this work the other way round, so we can hide stuff from (for example) Gmail, Yahoo, Outlook, etc?

Cheers,
Alex.

roshodgekiss roshodgekiss, 4 years ago

Hi Alex, yes, using display:none; is possible in many email clients, at least last time we checked. In Gmail, you need to use:

display: none !important;

Note that Outlook (and others) don't appreciate display: none; so you may have to use other CSS classes to conceal the element. Here's an example of some other measures we used to hide a CSS animation not so long ago:

.animation {
        position: absolute;
    top: -50px;
    z-index: 0;
    height: 1px !important;
}

All the best! :D


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

Unfortunately, this doesn't work on Android devices. Even if we have the width set to 700 pixels.

roshodgekiss roshodgekiss, 4 years ago

Hi Alex, could you kindly elaborate - is this in the Android default, or Gmail client? How does the width affect things? By all means post a screenshot, I'm very curious :)


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

I'm also waiting for Alex's reply. :)

Alex I., 4 years ago

Sorry, what an awful job of explaining what I meant!
What I mean is, media tags. On every android I tested on thus far, they don't seem to register.
On a HTC phone they don't register in the Yahoo mail client, the standard one or the Gmail app.

Diana Diana, 4 years ago

Alex,

Hmm. @media tags aren't supported in the Gmail client, but they should be working in the Email client. Is the Yahoo client you're testing an app? It's not one I've tested with on my phone previously.

If you could post your full code I'm happy to test it out on my phone(s). I've got a few here running a few variants of Android, it's an addiction that helps with testing ;).


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Alex I., 4 years ago

Thanks for the reply Diane.

I'm still working on the code/design at the moment. I need to check with my boss how happy he is with me giving out our code aswell! (haha).
I'm sure he won't mind but just need to double check, it'd be great for you to test it though thanks!

Alex.

Alex I., 4 years ago

Sorry for the double post but
.animation {
        position: absolute;
    top: -50px;
    z-index: 0;
    height: 1px !important;
}
Doesn't work either.

Cheers,
Alex.

Alex I., 4 years ago

Triple post, doh!

It works great in some mobile mail clients, awful in others with media queries. I guess this is as good as it gets for now? Interested to see a list of phones that do and don't support 'em!

Cheers.

Alex I., 4 years ago

Could you test this please? I feel rude for asking but is there the possibility of screen grabs? :3

<html>
    <head>
        <title>50 Free prints just for you</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
    @media only screen and (max-device-width: 480px) {
         div[class="header"] {
              font-size: 16px !important;
         }
         table[class="bigtable"], td[class="cell"] {
              width: 320px !important;
         }
         table[class="mediumtable"], td[class="mediumcell"], img[class="mediumtable"] {
             width:320px !important;
         }
        
        
        table[class="hide"], img[class="hide"], td[class="hide"] {
              display: none !important;
         }
         img[class="divider"] {
              height: 1px !important;
         }
         td[class="sidebar"] {
            display:none !important;            
         }        
         img[id="logo"], cell[id="logo"] {
                 width:212px !important;
                height:41px !important;
         }    
         img[class="hero"] {
                 width:320px !important;
         }
             
         img[id="offer"], cell[id="offer"] {
                 width:108px !important;
                height:42px !important;
         }        
         td[class="spacer"] {
                 width:10px !important;
         }
         cell[class="bodyTable"] {
                 width:200px !important;
         }
         td[class="footershow"] {
              width: 205px !important;
              max-width:204px !important;
              background-color:#FFFFFF !important;
         }
         td[class="tablet"] {
                 width:107px !important;
                background-color: #fbab13 !important;
         }
         img[class="split"], td[class="split"] {
                 width:10px !important;
         }
         td[class="split2"], table[class="split2"] {
                 width:300px !important;
         }
         td[class="split3"] {
                 width:300px !important;
                
         }
         img[class="bar1"], td[class="bar1"], table[class="bar1"] {
                 width:320px !important;
         }
         img[class="dummy"] {
                 width:80px !important;
         }
         td[class="bar5"], table[class="bar5"] {
                 width:240px !important;
         }
         td[class="bar6"] {
                 width:80px !important;
                background-color:#FFFFFF !important;
         }
         img[class="button"] {
                 width:120px !important;
         }
         td[class="shrinker"] {
                 font-size:12px !important;
         }
          td[class="shrinker2"] {
                 font-size:13px !important;
         }
         td[class="xp1"], img[class="xp1"], table[class="xp1"] {
             width:106 !important;
             font-size:12px !important;
         }
         td[class="px1"] {
             font-size:9px !important;
            
         }
         img[class="z1"] {
             width:106 !important;
             height:98 !important;
         }
         img[class="W1"], img[class="x1"] {
             width:106 !important;
             height:16 !important;
         }
         img[class="bum"] {
             width:1px;
         }
        
    }
    </style>
    </head>
<body bgcolor="#01577A" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;-webkit-text-size-adjust:none;">
<table bgcolor="#01577a" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td valign="top" align="center" width="100%">
            <table width="840" align="center" bgcolor="#01577a" border="0" cellspacing="0" cellpadding="0" class="bigtable">
                <tr>
                    <td width="100" class="sidebar"></td>
                    <td width="640" bgcolor="#01577a" class="mediumcell">
                        <table width="640" border="0" cellspacing="0" cellpadding="0" class="mediumtable">
                            <tr>
                                <td width="424" valign="top" class="logo"><img src="http://uploadlibrary.com/emosaic/alextest/images/logo.jpg" alt="TRUPRINT" width="424" height="83" border="0" id="logo" style="display:block"></td>
                                
                                <td width="214" align="left" class="offer"><img src="http://uploadlibrary.com/emosaic/alextest/images/offer.jpg" id="offer" alt="TRUPRINT" width="213" height="84" border="0" style="display:block"></td>
                            </tr>
                        </table>
                    </td>
                    <td width="100" class="hide"></td>
                </tr>
            </table>
            
            <table width="840" align="center" bgcolor="#01577a" border="0" cellspacing="0" cellpadding="0" class="bigtable">
              <tr>
                    <td width="100" class="sidebar"></td>
                    <td width="640" valign="top" bgcolor="#01577a" class="mediumcell">
                        <img src="http://uploadlibrary.com/emosaic/alextest/images/hero.jpg" alt="50% off Collage Photo Gifts" width="640" border="0" class="hero" style="display:block">
                </td>
                    <td width="100" class="hide"></td>
              </tr>
            </table>
            <table width="840" align="center" bgcolor="#01577a" border="0" cellspacing="0" cellpadding="0" class="bigtable">
                <tr>
                    <td width="100" class="sidebar"></td>
                    <td width="640" bgcolor="#01577a" class="mediumcell">
                        <table width="640" border="0" cellspacing="0" cellpadding="0" class="mediumtable">
                            <tr>
                                <td width="425" valign="top" class="bar1"><img src="http://uploadlibrary.com/emosaic/alextest/images/bar1.jpg" alt="TRUPRINT" width="425" border="0" class="bar1" style="display:block"></td>
                                <td width="1px" class="hide"></td>
                                <td width="214" class="hide" valign="top"><img src="http://uploadlibrary.com/emosaic/alextest/images/bar2.jpg" class="hide" alt="*" width="214" border="0" style="display:block"></td>                           
                            </tr>
                        </table>
                    </td>
                    <td width="100" class="hide"></td>  
                 </tr>
             </table>     
             <table width="840" align="center" bgcolor="#01577a" border="0" cellspacing="0" cellpadding="0" class="bigtable">
                <tr>
                    <td width="100" class="sidebar"></td>
                    <td width="640" bgcolor="#01577a" class="mediumcell">
                        <table width="640" border="0" cellspacing="0" cellpadding="0" class="mediumtable">
                            <tr>
                                <td width="425" height="200" valign="top" align="left" class="bar5" bgcolor="#FFFFFF">
                                    <table width="425" border="0" cellspacing="0" cellpadding="0" class="bar1">
                                        <tr>
                                            <td width="20" class="split"></td>
                                            <td width="985" class="split2" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
                                            <span style="color:#FF0000">Dear {~firstname~}</span><br><br>
                                            
                                            Collage gifts are perfect for when you just can't pick your favourite photo. Right now you can get ALL our collage gifts half price.
                                            </td>
                                            <td width="20" class="split"></td>                                           
                                        </tr>
                                        <tr>
                                            <td width="20" class="split"></td>
                                            <td width="385" class="split3" style="font-size:14px; font-family:Arial, Helvetica, sans-serif" height="20">
                                            </td>
                                            <td width="20" class="split"></td>                                           
                                        </tr>
                                        <tr>
                                            <td width="20" class="split"></td>
                                            <td width="385" class="split2" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
                                                <table width="385" class="split2" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td width="5%"></td>
                                                        <td width="45%" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif"><strong>Normal price:</strong></td>
                                                        <td width="5%"></td>
                                                        <td width="45%" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#FF0000"><strong>Offer price</strong></td>
                                                        
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4" height="10"></td>
                                                    </tr>
                                                    <tr>
                                                        <td width="5%"></td>
                                                        <td width="45%" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td valign="top" class="shrinker" width="55%" align="left" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;">Posters from</td>
                                                                    <td width="5%"></td>
                                                                    
                                                                    <td width="40%" valign="middle" align="left" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;"><img src="http://uploadlibrary.com/emosaic/alextest/images/price1.jpg" alt="3.99" width="39" border="0" style="display:block"></td>
                                                                </tr>
                                                            </table>
                                                            
                                                        </td>
                                                        <td width="5%"></td>
                                                        <td width="45%" class="shrinker2" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#FF0000">&pound;1.99</td>
                                                        
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4" height="10"></td>
                                                    </tr>
                                                    <tr>
                                                        <td width="5%"></td>
                                                        <td width="45%" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td valign="top" class="shrinker" width="55%" align="left" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;">Canvas from</td>
                                                                    <td width="5%"></td>
                                                                    
                                                                    <td width="40%" valign="middle" align="left" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;"><img src="http://uploadlibrary.com/emosaic/alextest/images/price2.jpg" alt="24.99" width="47" border="0" style="display:block"></td>
                                                                </tr>
                                                            </table>
                                                            
                                                        </td>
                                                        <td width="5%"></td>
                                                        <td width="45%" class="shrinker2" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#FF0000">&pound;12.49</td>
                                                        
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4" height="10"></td>
                                                    </tr>
                                                    <tr>
                                                        <td width="5%"></td>
                                                        <td width="45%" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td valign="top" class="shrinker" width="55%" align="left" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;">Mugs from</td>
                                                                    <td width="5%"></td>
                                                                    
                                                                    <td width="40%" valign="middle" align="left" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;"><img src="http://uploadlibrary.com/emosaic/alextest/images/price3.jpg" alt="7.99" width="40" border="0" style="display:block"></td>
                                                                </tr>
                                                            </table>
                                                            
                                                        </td>
                                                        <td width="5%"></td>
                                                        <td width="45%" class="shrinker2" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#FF0000">&pound;3.99</td>
                                                        
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4" height="10"></td>
                                                    </tr>
                                                    <tr>
                                                        <td width="5%"></td>
                                                        <td width="45%" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td valign="top" class="shrinker" width="55%" align="left" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;">Mousemats</td>
                                                                    <td width="5%"></td>
                                                                    
                                                                    <td width="40%" valign="middle" align="left" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;"><img src="http://uploadlibrary.com/emosaic/alextest/images/price4.jpg" alt="6.99" border="0" style="display:block"></td>
                                                                
                                                            </table>
                                                            
                                                        </td>
                                                        <td width="5%"></td>
                                                        <td width="45%" class="shrinker2" align="left" valign="top" style="font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#FF0000">&pound;3.49</td>
                                                        
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4" height="20"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="20" class="split"></td>                                           
                                        </tr>
                                        <tr>
                                            <td width="20" class="split"></td>
                                            <td width="385" class="split2" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
                                            <strong>Just <unsubscribe>enter</unsubscribe> the code 50COLLAGE12 at the checkout before midnight 26th March 2012</strong>
                                            </td>
                                            <td width="20" class="split"></td>                                           
                                        </tr>
                                        <tr>
                                            <td width="20" class="split"></td>
                                            <td width="385" class="split3" style="font-size:14px; font-family:Arial, Helvetica, sans-serif" height="20">
                                            </td>
                                            <td width="20" class="split"></td>                                           
                                        </tr>
                                      
                                        
                                    </table>
                                </td>
                                <td width="1px" class="hide" valign="top"></td>
                                <td width="214" class="hide" valign="top" bgcolor="#fbab13">
                                    <table width="214" class="hide" border="0" cellpadding="0" bgcolor="#fbab13" cellspacing="0">                       <tr>
                                            <td width="14" class="hide"></td>
                                            <td width="185" class="hide" align="center" valign="top"><Img src="http://uploadlibrary.com/emosaic/alextest/images/gifts.jpg" alt="Your gifts" border="0" style="display:block" class="hide"></td>
                                            <td width="15" class="hide"></td>
                                       </tr>
                                       <tr>
                                               <td height="20" class="hide" colspan="3"></td>
                                       </tr>
                                       <tr>
                                               <td width="14" class="hide"></td>
                                            <td width="185" class="hide" align="left" valign="top" style="font-size:14px; color:#333333; font-family:Arial, Helvetica, sans-serif" height="30">Simple to use</td>
                                            <td width="15" class="hide"></td>
                                       </tr>
                                       <tr>
                                               <td height="5" valign="middle" class="hide" colspan="3"><img src="http://uploadlibrary.com/emosaic/alextest/images/split.jpg" border="0" alt="*" style="display:block" class="hide"></td>
                                       </tr>
                                       <tr>
                                               <td width="14" class="hide"></td>
                                            <td width="185" class="hide" align="left" valign="middle" style="font-size:14px; color:#333333; font-family:Arial, Helvetica, sans-serif" height="40">Personal and unique!</td>
                                            <td width="15" class="hide"></td>
                                       </tr>
                                       <tr>
                                               <td height="5" valign="middle" class="hide" colspan="3"><img src="http://uploadlibrary.com/emosaic/alextest/images/split.jpg" border="0" alt="*" style="display:block" class="hide"></td>
                                       </tr>
                                       <tr>
                                               <td width="14" class="hide"></td>
                                            <td width="185" class="hide" align="left" valign="middle" style="font-size:14px; color:#333333; font-family:Arial, Helvetica, sans-serif" height="40">No hidden costs</td>
                                            <td width="15" class="hide"></td>
                                       </tr>
                                       <tr>
                                               <td height="5" valign="middle" class="hide" colspan="3"><img src="http://uploadlibrary.com/emosaic/alextest/images/split.jpg" border="0" alt="*" style="display:block" class="hide"></td>
                                       </tr>
                                       <tr>
                                               <td width="14" class="hide"></td>
                                            <td width="185" class="hide" align="left" valign="middle" style="font-size:14px; color:#333333; font-family:Arial, Helvetica, sans-serif" height="40">Send direct to recipient</td>
                                            <td width="15" class="hide"></td>
                                       </tr>
                                       
                                    </table>
                                </td>                                   
                            </tr>
                        </table>
                    </td>
                   <td width="100" class="sidebar"></td>
                </tr>
             </table>
              <table width="840" align="center" bgcolor="#01577a" border="0" cellspacing="0" cellpadding="0" class="bigtable">
                <tr>
                    <td width="100" class="sidebar"></td>
                    <td width="640" bgcolor="#01577a" class="mediumcell">
                        <table width="640" border="0" cellspacing="0" cellpadding="0" class="mediumtable">
                            <tr>
                                <td width="425" valign="top" align="left" class="bar5" bgcolor="#FFFFFF">
                                    <table width="425" border="0" cellspacing="0" cellpadding="0" class="bar1">
                                        <tr>
                                            <td width="20" class="split"></td>
                                            <td width="385" class="split2" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
                                            <Img src="http://uploadlibrary.com/emosaic/alextest/images/button.jpg" class="button" alt="Order now" width="148" border="0" style="display:block">
                                            </td>
                                            <td width="20" class="split"></td>                                           
                                        </tr>   
                                    </table>
                                </td>
                                <td width="1px" class="hide" valign="top"></td>
                                <td width="214" class="hide" valign="top" bgcolor="#fbab13">
                                    <table width="214" class="hide" border="0" cellpadding="0" bgcolor="#fbab13" cellspacing="0">                       <tr>
                                            <td width="14" class="hide"></td>
                                            <td width="185" class="hide" align="left" valign="top"><Img src="http://uploadlibrary.com/emosaic/alextest/images/button2.jpg" alt="Find out more" width="180" height="34" border="0" class="hide" style="display:block"></td>
                                            <td width="15" class="hide"></td>
                                       </tr>                                   
                                       
                                    </table>
                                </td>                                   
                            </tr>
                        </table>
                    </td>
                   <td width="100" class="sidebar"></td>
                </tr>
             </table>
             <table width="840" align="center" bgcolor="#01577a" border="0" cellspacing="0" cellpadding="0" class="bigtable">
                <tr>
                    <td width="100" class="sidebar"></td>
                    <td width="640" bgcolor="#01577a" class="mediumcell">
                        <table width="640" border="0" cellspacing="0" cellpadding="0" class="mediumtable">
                            <tr>
                                <td width="425" valign="top" class="bar1"><img src="http://uploadlibrary.com/emosaic/alextest/images/bar3.jpg" alt="TRUPRINT" width="425" height="19" border="0" class="bar1" style="display:block"></td>
                                <td width="1px" class="hide"></td>
                                <td width="214" class="hide" valign="top"><img src="http://uploadlibrary.com/emosaic/alextest/images/bar4.jpg" alt="*" width="214" border="0" class="hide" style="display:block"></td>                           
                            </tr>
                        </table>
                    </td>
                    <td width="100" class="hide"></td>  
                 </tr>
             </table>
             
             <table width="840" align="center" bgcolor="#01577a" border="0" cellspacing="0" cellpadding="0" class="bigtable">
                  <tr>
                    <td width="100" class="sidebar"></td>
                    <td width="640" valign="top" bgcolor="#01577a" class="mediumcell">
                        <img src="http://uploadlibrary.com/emosaic/alextest/images/giftideas.jpg" alt="Other great gift ideas" width="640" border="0" class="hero" style="display:block">
                     </td>
                    <td width="100" class="hide"></td>
                  </tr>
            </table>
            
            <table width="840" align="center" border="0" cellspacing="0" cellpadding="0" class="bigtable">
                <tr>
                    <td width="100" class="sidebar"></td>
                    <td width="640" class="mediumcell">
                        <table width="640" class="mediumtable" cellspacing="0" cellpadding="0" border="0">
                            <tr>
                                <td width="213" valign="top" class="xp1">
                                    <table width="213" class="xp1" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td valign="top" class="xp1"><img src="http://uploadlibrary.com/emosaic/alextest/images/xp1.jpg" alt="*" width="213" border="0" class="x1" style="display:block"></td>
                                        </tr>
                                        <tr>
                                            <td valign="top" class="z1"><img src="http://uploadlibrary.com/emosaic/alextest/images/xp11.jpg" alt="Photo Books" width="213" border="0" class="z1" style="display:block"></td>
                                        </tr>
                                        <tr>
                                            <td height="10" valign="top" align="center" bgcolor="#c0d72d" width="213" class="xp1"></td>
                                        </tr>
                                         <tr>
                                            <td class="hide">
                                                <table width="213" bgcolor="#c0d72d" class="hide" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                         <td width="30"></td>                                                     
                                                        <td valign="top" class="px1" align="center" bgcolor="#c0d72d" width="213" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#333333;">Perfect keepsake<br>for your<br>favourite memories</td>
                                                        
                                                        <td width="30"></td>
                                                   </tr>
                                               </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="10" valign="top" align="center" bgcolor="#c0d72d" width="213" class="xp1"></td>
                                        </tr>
                                          <tr>
                                            <td>
                                                <table width="213" bgcolor="#c0d72d" class="xp1" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                         <td width="20" class="hide"></td>                                                     
                                                        <td height="30" valign="top" class="px1" align="center" bgcolor="#c0d72d" width="134" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#333333;"><a style="text-decoration:none; color:#00597B" href="#"><strong>Order Photo Books</strong> <img src="http://uploadlibrary.com/emosaic/alextest/images/arrow.jpg" width="16" height="10" border="0" alt="*" /></a></td>
                                                     
                                                        <td width="15" class="hide"></td>
                                                   </tr>
                                               </table>
                                            </td>
                                        </tr>
                                       
                                    </table>
                                </td>
                                <td width="1" align="left" valign="top" bgcolor="#003e57"></td>
                                <td width="213" valign="top" class="xp1">
                                    <table width="213" class="xp1" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td valign="top" class="xp1"><img src="http://uploadlibrary.com/emosaic/alextest/images/ui1.jpg" alt="*" width="213" border="0" class="x1" style="display:block"></td>
                                        </tr>
                                        <tr>
                                            <td valign="top" class="z1"><img src="http://uploadlibrary.com/emosaic/alextest/images/xp3.jpg" alt="Prints" width="213" border="0" class="z1" style="display:block"></td>
                                        </tr>
                                        <tr>
                                            <td height="10" valign="top" align="center" bgcolor="#c0d72d" width="213" class="xp1"></td>
                                        </tr>
                                         <tr>
                                            <td class="hide">
                                                <table width="213" bgcolor="#c0d72d" class="hide" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                         <td width="30"></td>                                                     
                                                        <td valign="top" class="px1" align="center" bgcolor="#c0d72d" width="213" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#333333;">Don't hide them<br>away, print your<br>memories today</td>
                                                        
                                                        <td width="30"></td>
                                                   </tr>
                                               </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="10" valign="top" align="center" bgcolor="#c0d72d" width="213" class="xp1"></td>
                                        </tr>
                                       <tr>
                                            <td>
                                                <table width="213" bgcolor="#c0d72d" class="xp1" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                         <td width="20"></td>                                                     
                                                        <td valign="top" height="30" class="px1" align="center" bgcolor="#c0d72d" width="134" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#333333;"><a style="text-decoration:none; color:#00597B" href="#"><strong>Order Prints</strong> <img src="http://uploadlibrary.com/emosaic/alextest/images/arrow.jpg" width="16" height="10" border="0" alt="*" /></a></td>
                                                     
                                                        <td width="15"></td>
                                                   </tr>
                                               </table>
                                            </td>
                                        </tr>
                                        
                                    </table>
                                </td>
                                <td width="1" bgcolor="#003e57"></td>
                           <td width="212" valign="top" class="xp1">
                                    <table width="212" class="xp1" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td valign="top" class="xp1"><img src="http://uploadlibrary.com/emosaic/alextest/images/xp2.jpg" alt="*" width="212" border="0" class="W1" style="display:block"></td>
                                        </tr>
                                        <tr>
                                            <td valign="top" class="z1"><img src="http://uploadlibrary.com/emosaic/alextest/images/xp4.jpg" alt="Prints" width="212" border="0" class="z1" style="display:block"></td>
                                        </tr>
                                        <tr>
                                            <td height="10" valign="top" align="center" bgcolor="#c0d72d" width="213" class="xp1"></td>
                                        </tr>
                                         <tr>
                                            <td class="hide">
                                                <table width="212" bgcolor="#c0d72d" class="hide" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                         <td width="30"></td>                                                     
                                                        <td valign="top" class="px1" align="center" bgcolor="#c0d72d" width="212" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#333333;">Don't hide them<br>away, print your<br>memories today</td>
                                                        
                                                        <td width="30"></td>
                                                   </tr>
                                               </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="10" valign="top" align="center" bgcolor="#c0d72d" width="212" class="xp1"></td>
                                        </tr>
                                       <tr>
                                            <td>
                                                <table width="212" bgcolor="#c0d72d" class="xp1" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                         <td width="20"></td>                                                     
                                                        <td valign="top" height="30" class="px1" align="center" bgcolor="#c0d72d" width="134" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#333333;"><a style="text-decoration:none; color:#00597B" href="#"><strong>Order Prints</strong> <img src="http://uploadlibrary.com/emosaic/alextest/images/arrow.jpg" width="16" height="10" border="0" alt="*" /></a></td>
                                                     
                                                        <td width="15"></td>
                                                   </tr>
                                               </table>
                                            </td>
                                        </tr>
                                        
                                    </table>
                                </td>
                            </tr>
                        </table>
                       
                    
                    
                    
                    </td>
                    <td width="100" class="sidebar"></td>
                </tr>
            </table>
             <table width="840" border="0" cellspacing="0" cellpadding="0" class="bigtable">
                            <tr>
                                <td width="100" class="sidebar"></td>
                                  <td width="640" valign="top" class="mediumtable">
                                    <table width="640" border="0" cellspacing="0" cellpadding="0" class="mediumtable">
                                        <tr>
                                             <td valign="top" width="213" class="xp1"><img src="http://uploadlibrary.com/emosaic/alextest/images/b1.jpg" alt="*" width="213" border="0" class="xp1" style="display:block"></td>
                                <td valign="top" width="1" bgcolor="#004059"></td>
                                <td valign="top" width="213" class="xp1"><img src="http://uploadlibrary.com/emosaic/alextest/images/b2.jpg" alt="*" width="213" border="0" class="xp1" style="display:block"></td>
                                <td valign="top" width="1" bgcolor="#004059"></td>
                                <td valign="top" width="212" class="xp1"><img src="http://uploadlibrary.com/emosaic/alextest/images/b3.jpg" alt="*" width="212" border="0" class="xp1" style="display:block"></td>
                                           </tr>
                                        <tr>
                                            <td class="mediumcell" colspan="5"><img src="http://uploadlibrary.com/emosaic/alextest/images/shadow.jpg" border="0" alt="*" style="display:block" class="hero"></td>
                                        </tr>
                                      
                                   </table>
                                </td>
                                <td width="100" class="sidebar"></td>
                            </tr>
            </table>
               <table height="200">
                <tr>
                    <td></td>
                </tr>
            </table>
             
             
            
            
                
        </td>
    </tr>
</table>
<img src="http://uploadlibrary.com/emosaic/alextest/images/shadow.jpg" width="30" editable="yes" alt="">
    </body>
</html>
Diana Diana, 4 years ago

Hey Alex,

What specifically is it that isn't working for you?

On Android the "Email" client supports @media tags, but the Gmail client (which every Android user I know tends to use over Email) does not. So anything you're using @media for you can only expect 1 of the 2 default Android email clients to support (maddening that there are 2 default email clients, but that's how it goes).

I tested your email really quickly on a couple of phones in both the Email and Gmail clients and the main difference I saw was the whole email is scaled down in size in Email, but not in Gmail (due to ignoring those @media tags).

Gmail:
http://i42.tinypic.com/acswn8.png

Email:
http://i40.tinypic.com/hs6v54.png

Hope that helps!


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Alex I., 4 years ago

Thanks a bunch Diane! I'm really happy with how it worked out :-)

I'd like to thank you guys for the help! :D

Alex.

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