Customize Your Email for the New Xoom, Kindle Fire, and iPad Tablets!


electronic christmas treeTis the season over here at Email on Acid and we have tons of shiny, new devices on our desks just begging for a test drive. Fortunately for every computer lover on the planet, the Kindle Fire, Xoom, iPad, and iPhone are up front and center this holiday season and we are anticipating record sales from Amazon, Motorola, Apple and several more mobile & tablet carriers.

So what does that mean for email developers? Well, there’s good news and bad news. Since it’s a happy time of year, let’s start with the good news first: Each provide awesome support for HTML and CSS. The bad news? More email clients to contend with – not only with respect to native email clients but also from mobile apps and mobile web versions of popular web based email clients.

This year, we offer a gift that keeps on giving. Give your customers something they will never forget by customizing their email for each of the most popular devices.

Here are a few media query gems to get the ball rolling:

<style type="text/css">
/* PLEASE NOTE: this has only been tested in native device 
email clients, not in device web browsers */

/* Here are the device dimensions:
Iphone:  320px X 480px 
Smartphones: Vary from 240×320 to 720×1280
Android Phone (most popular): 350px X 480px
Additional Android Phones: 480×800 or 540×960
Xoom: 1280×800
Kindle Fire: 1024 x 600
iPad: 768 x 1024 */

    /* iphone, android, and most common smartphones --------*/
    @media only screen and (max-device-width: 480px) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #ai { display:block !important}	
        body[yahoo] #smartphone { display:block !important}	
    }  		
    
    /* iphone only --------*/
    @media only screen and (device-width: 320px) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #iphone{ display:block !important}	
    }  		
    
    /* kindle and iPad (portrait and landscape) --------*/				
    @media only screen and (min-device-width: 590px) and 
    (max-device-width:1024px){
        body[yahoo] #desktop { display:none}
        body[yahoo] #ki { display:block !important} 
    } 			
    
    /* kindle, iPad, and Xoom (portrait and landscape) --------*/				
    @media only screen and (min-device-width: 590px) and 
    (max-device-width: 1280px){
        body[yahoo] #desktop { display:none}
        body[yahoo] #kix { display:block !important} 
    } 								
    
    /* kindle (portrait) only ==> landscape is the default, 
    the portrait conditional is not supported.  If this device is 
    in landscape view, it will pick up on the iPad media 
    queries below---------- */
    @media only screen and (device-width: 594px) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #kindle{ display:block !important}	
    }  										
    
    /* iPad only (landscape & portrait)----------- */										
    @media only screen and (min-device-width: 768px) 
    and (max-device-width: 1024px){         
        body[yahoo] #desktop { display:none}
        body[yahoo] #ipad { display:block !important}
    }   
    
    /* iPad (landscape only) ----------- */
    @media only screen and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #ipad_landscape { display:block !important}
    }
     
    /* iPad (portrait only) ----------- */
    @media only screen and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #ipad_portrait { display:block !important}
    }	
            
    /* xoom only*/
    @media only screen and (min-device-width: 1280px) 
    and (max-device-width: 1280px){
        body[yahoo] #desktop { display:none}
        body[yahoo] #xoom { display:block !important}
    } 				
</style>

...

<body yahoo="fix">
    <div id="kindle" style="display:none">Kindle Fire</div>
    <div id="ipad" style="display:none">iPad</div>       
    <div id="ipad_portrait" style="display:none">iPad Portrait</div>
    <div id="ipad_landscape" style="display:none">iPad Landscape</div>
    <div id="iphone" style="display:none">iPhone</div>
    <div id="xoom" style="display:none">Xoom</div> 
    <div id="ai" style="display:none">iPhone & Android</div>    
    <div id="ki" style="display:none">Kindle & iPad</div>        
    <div id="kix" style="display:none">Kindle & iPad & Xoom</div>
    <div id="android" style="display:none">Android</div>   
    <div id="smartphone" style="display:none">Smartphone</div>
    <div id="desktop">This is the desktop view</div>       
</body>

Note: in the above example we have implemented the Yahoo fix to ensure that the above styles are not picked up by Yahoo.

We recommend that you use media queries to re-purpose your images, showing and hiding divs as we’ve shown above has its limitations in Gmail and Outlook 2007/2010. The above example was inteded to showcase test samples, not nesessarily as a boilerplate and media queries for HTML emails should be handled with care.

Season’s Greetings everyone! Here’s wishing you an abundance of friends, laughter, prosperity, and family fun this holiday season from each and every one of us at Email on Acid!

Author: Alex Ilhan

4 thoughts on “Customize Your Email for the New Xoom, Kindle Fire, and iPad Tablets!”

  1. This blog has more information about how to code “display:none” type effects for gmail. Scroll to option 2, “Completely replace your image(s).”

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies