Yesterday we did a email template for inside, which looks nice, but sometimes (and depending on the circumstances) we'd want to add some fancy effects to our emails, like background images or motion/interactivity.
How can we do that? Well, the property
<!-- Start Header --> <td> <table align="center" background="http://static.hdw.eweb4.com/media/wallpapers_2560x1440/abstract/1/1/orange-gradient-abstract-hd-wallpaper-2560x1440-6632.jpg" cellspacing="0" cellpadding="0" class="background header" style="background-color:#FF5C03;background-image: url('http://static.hdw.eweb4.com/media/wallpapers_2560x1440/abstract/1/1/orange-gradient-abstract-hd-wallpaper-2560x1440-6632.jpg');background-repeat:repeat-y no-repeat;background-size:100%;mso-cellspacing:0;mso-padding-alt: 0 0 0 0;margin:0 auto;max-width:600px;padding-bottom:25px;padding-left:0;padding-right:0;padding-top:25px;width:100%;">
The background attribute is widely supported, but Outlook still has some issues with it. To cover that, we have two fallbacks: the first one is
background-image, which works if we use
background-repeat: with values for x and y defined.
Normally, multivalue properties assign the value we define to all variables, or they just take the default values if we don’t specify them. Outlook 2007 - 2010 won’t do this for
background-repeat, but setting repeat-y and no-repeat for y and x respectively, makes the background work. Additionally, we define a
background-color just in case. If you want to go even further, you can use Vector Markup Language.
To use VML code, first we need to have the code defined, and then we can add the background like this:
<table align="center" background="http://static.hdw.eweb4.com/media/wallpapers_2560x1440/abstract/1/1/orange-gradient-abstract-hd-wallpaper-2560x1440-6632.jpg" cellspacing="0" cellpadding="0" class="background header" style="background-color:#FF5C03;background-image: url('http://static.hdw.eweb4.com/media/wallpapers_2560x1440/abstract/1/1/orange-gradient-abstract-hd-wallpaper-2560x1440-6632.jpg');background-repeat:repeat-y no-repeat;background-size:100%;mso-cellspacing:0;mso-padding-alt: 0 0 0 0;margin:0 auto;max-width:600px;padding-bottom:25px;padding-left:0;padding-right:0;padding-top:25px;width:100%;"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:100%;"> <v:fill type="tile" color="#FF5C03" src="http://static.hdw.eweb4.com/media/wallpapers_2560x1440/abstract/1/1/orange-gradient-abstract-hd-wallpaper-2560x1440-6632.jpg" /> </v:rect> <![endif]--> <tr> <td align="center"> <h1><a class="logo" href="https://inside.com/" style="color:#FFFFFF;font-family:arial;font-size:24px;text-decoration:none;">[ <span style="display:inline-block;vertical-align:middle;">INSIDE DAILY BRIEF</span> ]</a></h1> <h2 style="color:#FFFFFF;font-size:18px;font-weight:400;">A concise presentation of the world's most important, interesting news</h2> </td> </tr> </table>
Thanks Geoff Phillips, who posted this on email on acid.
Basically, by using
mso-width-percent, we can make the image take the total width of the container. notice the value is 1000 instead of 100%; that’s because this attribute works in a 10x basis, which means you have to multiply by ten whatever percent you want your element to be displayed at; for example, 80% will be 800. Even in the VML code we have a fallback color, just in case.
What if we want some dynamics? Well, if we want to add some motion to our email, we can use GIF. There are various cool tools to make GIFs;for Ubuntu we have Peek, in Windows we can use ScreenToGif and in Mac you can use GIPHY Capture. All of them work the same: recording the screen by taking captures and uniting them to make the GIF.
I'll show an example: I'm using ScreenToGif, as you can see. Here's the menu: we click recording, and here's the screen, which we can adapt to whatever dimension we want to use. Then, I click record, then stop, and these are the captures I was talking about. Now we save this; here the software is making the GIF, and here we have the finished GIF.
Here's a GIF for Inside Web; to add it to our email, we just have to use our absolute address in an image tag, so let's do it.
<tr> <td align="center"> <img src="https://media.giphy.com/media/xUOwFSKIcQWJUp7tJe/giphy.gif" alt=" " /> </td> </tr>
One important thing: some versions of Outlook don't have support for GIF.Instead, they'll only show the first image, so if you're gonna use GIF, be sure that your first image contains all the important information you want to show.
Here you can see how it looks in Outlook and Gmail.
Now, let's see some nice tools and utilities you can use to make things easier.
First, testing. Testing is one of the most important things we need to do, but depending on our targets this can be pretty hard. If we're only targeting webmail, it’s not so bad: we can just create a test account in each client, and send the email. But, if we need to test a wide variety of email clients, things can get pretty ugly. For those cases you have various options like Litmus, Email on Acid, MailChimp and CampaignMonitor. They're not only great for testing purposes, showing you how your email looks in 70 to 90+ email clients, but they also have nice blogs with a bunch of interesting articles about the latest trends in the email world, tutorials and more.
You also have important guides that I always recommend, like this CSS support guide by CampaignMonitor, which is incredible useful and has all we need to know about supported features by email clients, completely detailed, and for every property. MailChimp also has a good CSS guide. I recommend you check out both of them.
MailChimp has other cool guides and tools, like this guide for typography support, the CSS inliner tool. It’s great if you want to save some time, but you’ll still need to review the result. The HTML to plain text converter is also pretty good, but like I said before, I recommend that you do the plain text first.
There are a couple of really nice tools powered by CampaignMonitor: Backgrounds allows us to create bulletproof backgrounds for our emails and there's a version for buttons too; they provide all the fallbacks you need, including those that use VML code.
Lastly, we have Email Monday. Here you can find very accurate information about email and marketing campaigns; they offer various services and provide a great place to look for ideas when you’re preparing your email campaign.
With this, we finalize this short video series about email design and development. We covered best practices, responsive approach, fluid technique, fallbacks, tools, utilities and some tricks. At the end of the Drip you can find some helpful links. Bye bye!