Email Marketing Design Tip #2 - Image Swapping

Try this New Image Swapping Technique for Mobile Friendly Emails

Right off the bat, I'm going to say this is more of an intermediate to advanced trick which does require some HTML coding knowledge.

But, if you can take the time to master it, it may be a trick worthwhile knowing as it allows you to display one image for desktop and another for mobile.

Being able to switch images for mobile is a handy trick to have for a number of reasons. You can use it to show a cropped version of an image for mobile users or show one offer to desktop users and another for mobile users.

In the desktop version we have a wider horizontal banner with text content in the far left.  When this image is reduced for mobile, it's not that appropriate anymore as the text is really hard to read.  So now we've swapped out the image for a more vertically appropriate image. See the example images below or click HERE for a live preview

Desktop Version

Mobile Version

Below is the code for the image switch technique. This swap should work for all mobile devices in their native apps, as well as all desktop and webmail clients. Gmail ignores the style block (and all media queries), so all Gmail users will see the "desktop" or default image.

Let's start with the image itself.

The below code needs to be placed in the top paragraph component where the desktop banner will display.  You need to select the 'source code' icon to copy and paste the below code. You need to update the "http://mymail.ezemsgs.com/download/files/00396/1786898/CrazyThursdayDesktop.jpg" url with the url of your uploaded image into the EzyMsg Files and Images manager.

<span id="switcher"><img alt="CrazyThursdays" height="350" id="houdini" src="http://mymail.ezemsgs.com/download/files/00396/1786898/CrazyThursdayDesktop.jpg" width="660"> </span>

Next is the CSS.

The code below can also sit in the same Source code area where you just pasted the above code.  You need to update the "http://mymail.ezemsgs.com/download/files/00396/1786904/CrazyThursdayMobile_.jpg" with the url of the mobile image which you've also uploaded into the EzyMsg Files & Images Manager.

A few other things you'll need to change.

For '@media only screen and (max-width: 599px)' you need to make the 599px whatever the width of your chosen email design is, less 1 pixel.  So if the email you are editing is 650px wide, make this setting 649px.  For the width and height settings below; make these the same dimensions as your mobile image.

@media only screen and (max-width: 599px) {
    span[id=switcher] {
      display:block !important;
      margin: 0 auto !important;
      background-image: url(http://mymail.ezemsgs.com/download/files/00396/1786904/CrazyThursdayMobile_.jpg) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 350px !important;
      height: 280px !important;
    }
    img[id=houdini] {display: none !important;}
}

See the image below for the entire source code in the top Paragraph component where the header image sits.

The above media query will trigger once the emailed is viewed on a smartphone or similar mobile device.  The settings above will turn off the original desktop image with the id "houdini" and then display the mobile image which is sitting there as a background image.

Swapping Linked Images

This gets a bit trickier when you want to show/hide images without losing your hyperlink. When you hide a linked image with display:none, it will also hide the hyperlink. Technically it's not gone, but the area becomes too small to click and impossible to touch. I used a span in my example because you can wrap a link around it with no problem, thus preserving an area for touchable links on mobile devices. Check out the code with the link added, below.  You will need to update the href="http://www.ezymsg.com" with your link.

<a href="http://www.ezymsg.com"><span id="switcher"><img alt="CrazyThursdays" height="350" id="houdini" src="http://mymail.ezemsgs.com/download/files/00396/1786898/CrazyThursdayDesktop.jpg" width="660"> </span></a>

And that's it! The perfect image swap, or at least as perfect as it can be with Gmail around.