Mobile email design – interactive images with CSS

This little CSS trick is the next step in mobile email design. Justin from FreshInbox has posted about creating interactive images. By creating specific CSS rules with media queries it’s possible to create interactive images on mobile. As there is no ‘hover’ option on mobile devices as you don’t have a cursor, tapping an image to interact with it is the next best option.
If you’re into mobile email design, this might be just the thing to offer a client or execute yourself in your next email marketing campaign.
Here’s how Justin explains the inner workings.
Step 1: for the two images, the ‘front’ image is coded as a regular image, while the back image is the background.
Step 2: The tap triggers involve the actual CSS code itself.
Step 3: The mobile media queries: these include the full CSS rules to handle how the image responds to tapping by the recipient.
Step 4: Hover to switch: the actual CSS rules to respond to the hover (tap) action.
mobile-email-design-tap-interactive-images-css-media-queries
The advantages of this approach to mobile email design is the ability to show multiple images in an email without taking up more precious space. It also makes an email more interactive and interesting for the recipient. Lastly, this way of using interactive images only works for iPhone and Android smartphones: but as Justin notes, those make up the majority of mobile email opens. This is further support by the Litmus email client market share research report for 2013 posted earlier.
Be sure to check out the full post at FreshInbox with all the CSS rules and media queries included. Also, you have the option to send yourself a test email to check it out right away. Mobile email design in this day and age has become more and more challenging with all types of email clients and screen resolutions. This CSS trick however allows for getting just that bit more creative with email marketing on mobile devices.
[relatedPosts]

Leave a Reply

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