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.
You did suggest the option to use the same image view in the mobile and desktop.
For ex.. I m using an image in the email template with a 600px; If I have to see the same image quality at mobile I don't see the same one. it will reduce the quality of the image If I use MAx-width:600px; for a mobile view. So plzz suggest me instead of Max-width what will be the best option.
Not sure what you are asking. The same image across any view is fine. The reality is that nearly all mobile devices have a 1.5x – 3x screen density, so a 600px wide image scaled down to 375px viewport is great because a 375px wide image would look poor in those higher density screens. Also, regardless of showing and hiding images based on viewport, if you use 2, both are downloaded – consuming time and data cost.
I am going with Charles on this. Another example I can give is, if your desktop design is 700px, you are resizing your hero image on iPhone 5 which has a screen size of 320px.
Technically you are viewing 2x image as its resized to be 320 pixels with original image being 700px. Let me know if this made sense.
Swapping an image for mobile is very easy and requires very little code. Here's some example code... the important thing is to hide your mobile image from Windows Outlook using the "if not Microsoft Outlook" tag, setting it to display:none, and overwriting that with a media query when you are in mobile view. If you use a percent based layout, you can slightly retool the width values to adapt this code to your needs.