Browsed by
Tag: full bleed

Background Images: Part 2 – Full Bleed Emails, VML, and OWA

Background Images: Part 2 – Full Bleed Emails, VML, and OWA

litmus

Following on from Part 1 of my blog post on background images, part 2 focusses largely on the considerations behind full-bleed backgrounds, and just finishing on a couple of other frustrations with VML and OWA you might want to be aware of.

Full Bleed Backgrounds

A simple method for adding more texture and depth to your designs, and break-away from the usual containers is to use a background image that spans the entire space of the viewing pane. I explained at #LitmusLive that my key considerations for this are:

  • Have as smaller image as possible in terms of weight.
  • Ensure that image is designed to repeat well if required.
  • Don’t base your entire design around this. Use it for enhancement.

Using backgrounds in this way becomes very simple, and doesn’t take long to implement. Much like the Litmus example above, which illustrates this point perfectly. There are a couple of quick ways to do this.

.bg {background: url('yourimage.png'),
     linear-gradient(-25deg, #262e45 0%, #222635 100%);
    }

The easiest way is to simply host the image, and add it to in the <style> of the <head> of your email. This has limited support, and won’t give you support on “Those Outlooks” and Gmail for example, but it’s a quick and easy way of providing an extra attack on the senses without having to spend too much time on it. Where the method is not supported it simply won’t appear and will gracefully degrade back to a flat background colour.

Speaking of which, you may have noticed that Kevin used a transparent PNG, and then applied a CSS gradient behind it, which also will fallback to flat colour where unsupported.

The inline method is somewhere which will offer you a little more support. You can use backgrounds.cm to set this up for ease, and this will save you the hassle, and will provide you with VML required to make it function in “Them Outlooks”

Keeping it Simple(r)

The reason I tend to stick to the 3 bullet points as rules, is to keep it simple(r) (and I have Outlook users to consider). I still believe for ideal user experience layout images (rather than content images), should still be used in this environment (unless you really know where your audience is going to open your email). This way you’re not chancing key pieces of content, key imagery, not displaying and affecting you’re overall build.

There are many fine examples of beautifully designed emails that feature a full-bleed content background images. But they are not without their issues, such as “Them Outlook versions” and “Those older Outlook Versions” squashing the images, or not rendering consistently on opening, or zooming in, or the image potentially adding significant amounts of weight to your email (if you’re not treating them right), as you’re likely to need something around 2000px wide.

If you’re looking for more my favourite approaches to full-bleed email background I’d suggest looking at Campaign Monitors and Taxi For Email’s newsletters. Key thing for me is they have chosen their images wisely. It provides them with flexibility.

The biggest issue you’ll find is in Outlook Web/365/.com (whatever it is right now).  The lack of support for “style” in background images in Outlook Web means you can’t control it, and depending on how the big/wide the viewing pane is, the content that sits on top will be in the wrong position (like below).

robot_owa

In my opinion if you are going to start diving in to full bleed emails with content; know your audience, plan ahead, think about the overall weight, but think about the overall user experience. How does it render in version of Outlook(s) at different sizes of viewing pane. You can’t just rely on your testing subscriptions for this, you need to do more thorough testing on devices and inboxes to be fully confident of their functionality. If it doesn’t render quite how it’s supposed to is the content still accessible.

You could however think about having an outlook fallback that is a restricted width. I have seen examples of this. (See the Taxi for Email Newsletter)

That being said if Outlook isn’t much of a consideration, or you have some flexibility that it doesn’t have to render perfectly to plan everywhere, then go for it.

Hopefully if the web versions of Outlook perhaps get some bugs fixed, this sort of issue will  start to go away and will be a significant step in the right direction.@litmusapp @caithartMSFT

Using ‘Cover’ and Full Bleed Backgrounds with content images

Other than some of the versions of Outlook, what else needs to be considered if you are to start thinking about using content images as full-bleed backgrounds.

Gmail

(please note that since writing this, Gmail has started supporting ‘background-position’ and ‘background-size’)

One thing I mentioned in part 1 of these blogs, was that Rémi Parmentier @HTeuMeuLeu discussed briefly at #litmuslive that background-size:cover was supported in gmail if it was set-up as shorthand.

The one thing I tend to stress with using ‘cover’, is that it will full the space and zoom-in/crop off the sides in order to fit the space (also mentioned in part 1). So depending on height of the space that it is filling, you’re going to need to still plan ahead with the images you use, and experiment back and forth to achieve the results you want. 

For this experiment I used an image that is 2000 pixels wide in a 600px hero section. You can see below that this methods works in Gmail app and the Yahoo Mail app.

robotcover

(Please remember that a non-gmail account on the gmail app will not render a background image).

<td bgcolor="#000001 " valign="top" background="yourimage.jpg"
height="auto" style="background: url(yourimage.jpg) 0 0 / cover; 
background-size:100%; max-width:600px; background-repeat:no-repeat !important; 
background-position:center top;">

Taking this to the next level and using the image as a 2000px full-bleed background, we have to change things a little. I’ve added what I did here, feel free to have a look at the code (it’s not the tidiest of code, lightweight code, or the most precise, it’s a bit over-coded, but I will go over the key parts).

The first thing is the set-up of the image itself. Again I’m sure I’ve probably over-coded this, but it’s just a dummy for testing.

<td class="yhoofx bg_cov owaoff" bgcolor="#000001" valign="top" background="http://kristianrobinson.co.uk/was-looking-mr-robot-fullw.jpg" 
height="auto" style="background: url(http://kristianrobinson.co.uk/was-looking-mr-robot-fullw.jpg) 0 0 / cover; background-size: 100%; 
background-repeat:no-repeat !important; background-position:center top;" >
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;background-size:cover;background-repeat:no-repeat;"padding:0px; margin:0px; display:block;" inset="0,0,0,0">
<v:fill type="frame" src="http://kristianrobinson.co.uk/was-looking-mr-robot-fullw.jpg" color="#000001" position="0,0" />
<v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;">
<![endif]-->
<div>
<div style="font-size: 0; line-height: 0px; mso-line-height-rule: exactly;">

 

Yahoo

As we know from the gmail test, the shorthand version of ‘cover’ works for the mobile app, but doesn’t for the desktop web browsers. Thankfully I didn’t have to do too much digging for this either as @ericlepetitsf and @stigm kindly mentioned the fix for it recently in a discussion (thanks for that guys, saved me a good chunk of time).

You’ll see in the class of the TD that ‘yhoofix’.

@media screen yahoo {
.yhoofx] {
background-size: cover !important;
background-position: center top !important;
}
}

 

(The ‘owaoff’ class is just to turn the background image off in OWA – it’s not necessary, but I thought I would share that hack for those that don’t have it)

OWA Style for Backgrounds. (lack of)

While we’re bringing up the subject of OWA/Outlook 365 not supporting background style this then means you can’t prevent repeating.
In the example below where the idea is that if content overflows beyond the background image size, the flat background colour (set to the match the very bottom of the gradient) colour expands beyond the space. (Which in theory should be a nice idea for self service templates). We can’t stop the image from repeating.

backgrepeat

What can you do for Outlook 365/.com/OWA?

The only solution I have managed to find for Outlook 365 using the [OWA] .foo hack are is to turn off the background. In this instance that isn’t such a big deal. But for the Mr.Robot full-bleed you are removing a content image.

Of all the Microsoft platforms, Outlook 365/OWA seems like something that Microsoft could be looking to fix quite easily and quickly.
So please submit the request for OWA to start supporting styles for backgrounds by emailing outlook@litmus.com
(remember to show example use cases of why background style needs support)

VML

Vile Malevolent Language* Or VML  as it’s more commonly known, is not exactly what anyone wants to be using, but in certain circumstances it is unavoidable.
If you have a heavy Outlook audience to consider I’m sure you’ll have had more dealings with VML than you care to remember and this might be something you’ll want to consider.

Sticking with the same theme, I had been working with VML where I wanted to use a background image, but wanted the height to be variable. With VML I had removed the height and instead used “mso-fit-shape-to-text:true;”.

The problem with not having a height in the VML is that in inboxes running on PC with Outlook using the VML, is that the preview pane truncates the content. This then resolves itself on opening the email an downloading the images.

The main issue is that I know many Outlook users will only ever use the preview pane to view their emails. I am one of them. I couldn’t find any way of resolving this other than adding the height back in, which I was concerned will ruin the flexibility. However if you keep a height in as well, you may need to adapt what the height setting is in testing the preview pane, but what I found is when you open the open the email, the “mso-fit-shape-to-text:true;” will sort it out for you.

*This is not what VML stands for.

trunacting

 

2013 extra spacing

If you find when using VML that you get extra space added on platforms such as Outlook 2013. You can reduce spacing like this by adding this extra ‘div’

extradiv

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" 
stroke="false" style="width:600px; padding:0px; margin:0px; display:block;"
inset="0,0,0,0"><v:fill type="frame" src="yourimg.png"
color="#b4db0a" /><v:textbox style="mso-fit-shape-to-text:true;v-text-anchor:bottom;"
inset="0,0,0,0"><![endif]--> 
<div>
<div style="font-size:0;line-height: 0px;mso-line-height-rule: exactly;">

 

Follow me on twitter @joon82

Thanks for reading.

Kristian