How to hide Mobile content in the Desktop email client for responsive EDM's

If you’re looking for a quick tip on optimising your direct email marketing (EDM’s) campaigns, then read on.

In a responsive HTML Email, it can be difficult to hide an element in the desktop version and show it in mobile - unlike with a responsive website where you can just use "display:none".

The reason for this is that every mailing client reads your markup differently.

For example, if you place a class on your td/table/image and then add display:none in your media query, it will not be recognised in Gmail, because Gmail strips out the head section of your code and adds in their own.

This means it they won't read any of the styles in your media query. To fix this your styles need to be inline, and still be able to be overridden in mobile mailing clients (such as an iPhone).

Without the following styles your element/image - which should be hidden for desktop clients - will show twice in Gmail.

1. HOW TO HIDE ELEMENTS IN DESKTOP CLIENTS (TD,TABLE,UL,P,SPAN,H1,DIV)

Add the following inline styles to your element.

<td class="reset" style="display: none;font-size: 0px; max-height:0;">Hide me for desktop</td>

2. THEN RESET THE ABOVE TO SHOW IN MOBILE

@media screen and (max-width: 480px) {
	display: block !important;
	font-size: 14px !important;
	max-height: none !important;
}

3. HOW TO HIDE IMAGES IN DESKTOP CLIENTS

To hide mobile images in desktop clients use the following css styles.

eg)

<img src="my-image.jpg" class="resetImage" style="max-height:0;width:0" />

4. RESET

@media screen and (max-width: 480px) {
	.resetImage {
		max-height: none !important; 
	 	width: auto !important; 
	}
}


***

Recommended reading:

• Release the website you need, not the website you want.
• Book Club: Clean Code

 

***

Our team of highly experienced User Experience Designers and Developers can help you research, design and build your next digital project. Got an idea in the works? Get in touch.