hack a hack for better adaptive designs

by kirk r gray

every email marketer knows that real estate on mobile devices is at a premium. we have limited space to successfully communicate the what and how of our messages. limited screen real estate means you can boil down your messages to the first rule of buying a home -- location, location, location... thinking about this and how i hacked a hack for better adaptive design resulted in this post. this is a great one for marketers who have a list full of outlook users to keep in their back-pockets.

 a few posts back i posted a the code for hack that will display background images in outlook. this code is extremely helpful for coding emails that have a brand-consistent look and feel. not only can this hack be used for a background image but also for css styled buttons. but by hacking this raw code you can also use it to save real estate in your mobile adaptive designs, especially for outlook users.

rendering of the button across all clients,
regardless of mobile or desktop.

you can find a version of that hack just for buttons at campaign monitors's bullet-proof buttons.

the basic hack exists in several different formats, and if you are like me and don't feel comfortable using div's in emails, just google "using background images and html email in outlook" or use the code from that older post above.

these hacks all use a microsoft schema to display the background and inline css to render the button. here is campaign monitor's code for the above button:

<div>
<!--[if mso]>
     <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://blog.browserspencer.com" style="height:40px; v-text-anchor:middle; width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
     <v:fill type="tile" src="http://i.imgur.com/0xPEf.gif" color="#556270" />
     <w:anchorlock/>
     <center style="color:#ffffff; font-family:sans-serif; font-size:13px; font-weight:bold;">Show me the button!</center>
     </v:roundrect>
     <![endif]-->

     <a href="http://blog.browserspencer.com" style="background-color:#556270; background-image:url(http://i.imgur.com/0xPEf.gif); border:1px solid #1e3650; border-radius:4px; color:#ffffff; display:inline-block; font-family:sans-serif; font-size:13px; font-weight:bold; line-height:40px; text-align:center; text-decoration:none; width:200px; -webkit-text-size-adjust:none; mso-hide:all;">Show me the button!</a>
</div>

but by changing out the code, you can make it display a different message for the desktop outlook version -- where attention spans are longer and real estate is less scarce -- and for the mobile version.

here is the code, with the variable that you need to change highlighted in yellow:

<div>
<!--[if mso]>
     <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://blog.browserspencer.com" style="height:40px; v-text-anchor:middle; width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
     <v:fill type="tile" src="http://i.imgur.com/0xPEf.gif" color="#556270" />
     <w:anchorlock/>
     <center style="color:#ffffff; font-family:sans-serif; font-size:13px; font-weight:bold;">Show me the button!</center>
      </v:roundrect>
      <![endif]-->

      <a href="http://blog.browserspencer.com" style="background-color:#556270; background-image:url(http://i.imgur.com/0xPEf.gif); border:1px solid #1e3650; border-radius:4px; color:#ffffff; display:inline-block; font-family:sans-serif; font-size:13px; font-weight:bold; line-height:40px; text-align:center; text-decoration:none; width:200px; -webkit-text-size-adjust:none; mso-hide:all;">Show Me!</a>
</div>


by changing this one bit of code, the button now renders with the words "show me!" in all clients, including emails to mobile devices when they are rendered on mobile devices. (the blue highlight illustrates the text that renders in the desktop outlook version).

rendering of the button in all clients,
except desktop versions of outlook.

now this isn't ground breaking by any stretch of the imagination, but it will allow you to quickly communicate a call to action to mobile users of outlook and a longer more detailed call to action on their desktop client, when they have more time time to read your eamil. it allows you to play with different cta actions for mobile users and desktop users, especially in the b2b world. if you don't know how many mobile readers you have, you could even go as far as putting in a redirected url for the outlook section and the original url for all users, to help gauge where traffic is coming from and the number of outlook users versus mobile "outlook" readers.

changing the call to action based on environment could help you refine your message or at least provide you with some valuable stats about your list make up. it's not fancy by any stretch of the imagination but it one of those cool hacks that could show your boss that you're thinking outside the box to gain valuable data.