KR3
Replacing Images for Mobile
Hey guys,
With all the changes going on in Gmail and the continuos developments, I was wondering if anybody has a simple solution for replacing images when viewed on mobile. We are currently using this hideeous line of inline css on every element that we want to hide on desktop (font-size: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; display: none; line-height: 0; padding-right: 0px; max-height: 0px; width: 0px; mso-hide: all), but I am hoping that there is a simpeler way to do this.
I hope you guys have a good idea,
Kevin
First, ‘desktop’ and ‘mobile’ should be replaced by ‘people’. Email is for humans, not screens. There is rarely a compelling use case for creating disparity in content simply on the basis of screen size. If the content is important enough to include, why hide it for some views?
In the rare exceptions where there is a compelling use case to support disparity and you need to hide content, unfortunately some variation of your CSS is necessary. You don’t need to set padding values to zero unless the element you are using is a heading h1–h6 or a p that has default padding values in the user agent style sheet.
I use this with or without a media query to target a specific view to exclude:
This is supported everywhere except Android 5.1 & 6 (native/OEM) Email.
I personally tried the codes and instructions of Charles and it worked. Thanks man!
Hi Charles,
Thanks for your reply. The reason we want to hide certain content is because we use banners in our newsletter in which we have specific banners for desktop and mobile. That's why we want to hide the desktop version and show the mobile version of the banner in our mobile view of the mail. :) Hope this clarifies things.
Good point Kevin, actually I share the same reason as yours that is why I tried using the codes shared by Charles.
When you say ‘specific banners’, I have to assume that you mean static ad units of different size. In that case, toggling the display of one size for another based on viewport is valid. An unfortunate omission of this line of ‘mobile’ and ‘desktop’ thinking is tablets. Let’s say you wanted to show an App Store download button in an email. It seems to make sense that it would be best to hide that from a desktop view. However, if you use viewport alone to solve that, you just excluded tablet views from having the app link. Even more important is remembering that a human receives this email, not a device. Humans switch between devices 150 times a day.
My point is that using a media query to hide something from a specific viewport range is a development solution. Before using it, make sure there is actually a problem.