HTML Email . Design

Helping Campaign Monitor and Mailchimp customers with their custom template coding needs

Achieving correctly proportioned, responsive images within the Gmail app (when a fixed height has been applied)

NOTE: This technique is only relevant to responsive images and fluid hybrid templates in Campaign Monitor at this time.

UPDATE (DEC 19th): After posting my initial findings, I was contacted by Justin Khoo and Remi Parmentier  to let me know that they believed Gmail strips the <style> tag on mobile, regardless of whether you use attribute selectors or not, and so this technique should not technically work. I thus decided to carry out some further research, and fully agree: after additional tests, the Gmail app does indeed appear to strip the <style> tag. 

Because of this I was confused however, as all my tests in Email on Acid and Litmus appeared to be showing that this was working correctly and retaining my image proportions in my fluid hybrid template, despite the image having a fixed height defined.

I jumped back into my Campaign Monitor account and decided to preview my campaign in the browser: when I resized my window, the image was indeed scaling up and down responsively, so the attribute selector was working, however when I checked the source code of my campaign to see what Campaign Monitor had inlined, I noticed that it had inlined all my CSS classes and id declarations except my attribute selector.

My campaign’s image tag appeared as:

<img src="my-image.jpg" alt="Does this work?" width="600" height="399" title="gmail-fix" class="image" style="border-width: 0; display: block;">

The border-width: 0; display: block; inlined CSS was coming from my .image class in my stylesheet, but my attribute selector declarations of width: 100%; max-width: 600px; height: auto; had not been inlined from:

* [title="gmail-fix"] {
width: 100% ;
max-width: 600px ;
height: auto;
}

Interesting.

Because Campaign Monitor is not inlining this particular CSS, this thus means the image will most likely only be responsive in email clients which support the <style> tag, and so will not be fully responsive in clients like Lotus Notes 6/7, Gmail (web), and the Gmail app, etc.

Having said this however, this isn’t necessarily a bad thing.

By defining your CSS within an attribute selector like the above in your Campaign Monitor template, it appears you’re able to prevent Campaign Monitor from inlining this specific CSS, which may actually come in handy. 

This potentially allows you to target and add CSS for all email clients which do support <style>, and exclude CSS for those which don’t. Think of it as a way to target and apply hacks to everything but the Gmail app or Lotus Notes 6/7 for instance: if you want to exclude specific CSS from working in the Gmail app in your Campaign Monitor template, then include it in an attribute selector.

As to my image in the Gmail app, it was displaying proportionally simply because it was using the default width and height values on the html image tag, namely width=“600” and height="399”. There was no inlined width: 100%; max-width: 600px; height: auto; to stretch the image in the Gmail app, and because I had not also included a hack to prevent the Gmail app from optimising my campaign for mobile, as per:

<div style="background-color: #FFFFFF; display:none; white-space:nowrap; font:15px courier; color:#FFFFFF;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>

Plus as my image was not wide enough to trigger the desktop version, then the Gmail app was just simulating a regular fluid hybrid campaign, when in actual fact it was showing the Gmail app's optimised version. Because fluid hybrid holds up so well (it's designed to ensure your emails look good even in clients which don’t support media queries, after all), then it was difficult to tell the difference.

So there you have it.

While this technique wasn’t implemented exactly the way I had hoped, it does still technically prevent editable images from being stretched in template-based Campaign Monitor campaigns within the Gmail app, plus, we also have the added benefit of now knowing how to exclude CSS from the Gmail app and Lotus Notes 6/7, etc, within a Campaign Monitor template (for now, at least), by including the CSS you want to hide from email clients which don’t support <style> in an attribute selector, instead of a regular class or id :)

My original article is below:



Responsive images

As we know, it’s possible to achieve responsive images in many email clients by using CSS to set an image’s width to 100%, a max-width to match the image’s native width (or whatever you prefer), and the height of the image to 'auto'. 

An example of this may be:

.responsive-image img {
width: 100%;
max-width: 600px;
height: auto;
}

The height :auto; declaration is key here (kudos to Courtney Fantinato who helped pioneer this within Nicole Merlin's  fluid hybrid technique ), as this ensures that when the image is automatically resized, not only is its width adjusted, but its height is proportionally resized as well, meaning that the image does not become distorted.


The Gmail app issue 

Another important consideration in ensuring this technique works correctly is to avoid including a fixed height value on the image tag itself, and defining a width only:

<img src=“my-image.jpg” width="600" alt=“responsive image” />

By leaving the height off, this ensures that the Gmail app can correctly resize the image proportionally, because behind-the-scenes, the Gmail app will sneakily convert your lovely height: auto; declaration to min-height: auto; thus causing it to obey any height value set on your image. 

This results in your images becoming distorted and stretched in the Gmail app, as while the Gmail app will resize the width of your image, the height will remain fixed.

Okay, fine, so just leave the height off then, Stephen. Problem solved!

Quite, however unfortunately you don’t always have a choice over whether a height value is applied to an image tag.

For instance, some ESPs like Campaign Monitor will automatically add an image’s height to a template-based campaign’s editable image for you (which, to be fair, is good practise), but this does then mean that these images won't display correctly in the Gmail app.
 

The solution

As it’s not possible to remove the fixed height added to an editable image in Campaign Monitor (and some other ESPs) at this time, then the solution needs to be applied to Gmail’s end specifically here.

After trying every hack I could think of, I remembered Justin Khoo’s fantastic research into using CSS attribute selectors in Gmail, and this gave me an idea: perhaps I could use an attribute selector to ensure that height: auto; was obeyed in Gmail, and was not overridden or converted to min-height: auto, so I eventually cobbled together the following:

* [title="gmail-fix"] {
width: 100% ;
max-width: 600px ;
height: auto;
}

Along with the following Campaign Monitor template tag:

<img editable src="my-image.jpg" alt="responsive image" width="600" title="gmail-fix”>

As Justin notes, Gmail will not strip attributes such as title, style and lang, etc, and so I opted to go for ‘title’ in this instance, but I imagine ‘lang’ (and others) would work just as well.

I then created a new template-based Campaign Monitor campaign, added a new, editable image into my campaign (which resulted in a fixed height being applied to the image), then sent a test to the Gmail app in Android and iPhone and crossed my fingers... 

Lo-and-behold, my responsive campaign image displayed correctly; not stretched or distorted, but in perfect proportion. Hoorah!

NOTE: One minor caveat here (noticed by @moonstrips) is that this doesn't work in Gmail for desktop, however it is only really noticeable if you shrink your browser right down (and thus force the image to resize on desktop), otherwise the image should display correctly.

So this hopefully means it should now be possible to include fully responsive images and fluid hybrid templates within Campaign Monitor :)
 

- Special thanks also to @moonstrips and @stigm for helping me test this hack.