We created an experiment to test hiding elements in the desktop and mobile versions of the same email. We set it up so that the desktop version would show the header with a green background, and the mobile version would show the header with a blue background.

Here are the results:

Yahoo shows the mobile version in desktop and Outlook shows the correct desktop version:

Image1

Gmail, however, shows both the desktop AND the mobile version in the same email:

Image2

This goes to show that hiding and showing specific elements can backfire, particularly if you are aiming to show something in the mobile version that isnt in the desktop. While it is possible to hide certain sections that are on the desktop in the mobile version, it may not work on all browsers and email clients.

Solutions:

  • Only hide elements for the mobile version. Hiding for desktop and showing for mobile has issues across multiple email clients

 

Glossary:

Responsive Email Templates – A Quick Guide

Responsive Email Design?- The Basics

Experiment: Hiding Elements on Desktop and Mobile