Black Friday is just around the corner, and turkeys and inboxes should prepare to be stuffed. While having a great offer might be the main focus of your upcoming Black Friday campaign, creating an email that stands out from the rest could be just as important. Here are a few email tricks that could accompany your offer:
Use Google Fonts for more visual appeal
If you’re willing to jump through a few hoops, Google Fonts can be a great way to bring some originality to your emails. They won’t be supported in all inboxes, but using the methods below will maximize support.
The first step is to select your font(s) from Google Fonts and grab the code to include in the head section of your email. We’re including Montserrat in this example below:
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css"/>
Unfortunately, Google Fonts are not going to be supported in all inboxes, so you need to make sure a fallback is included in your font stack.
body {
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
In addition to not supporting Google Fonts, several versions of Outlook (in true Outlook fashion), will ignore your entire font stack and use a serif font when you use a Google Font. In order to make sure you don’t end up with a terrible looking email, you can include the below Outlook-specific code in your <head> section:
<!--[if mso]>
<style type="text/css">
body, table, td, span {font-family: Helvetica, Arial, sans-serif !important;}
</style>
<![endif]-->
Adding a Countdown Timer
With a limited time sale, creating a sense of urgency can encourage your customers to act.
The emfluence Marketing Platform has recently integrated with Nifty Images to allow these types of counters to be used in your emails. To add one to your email, you can use the Nifty Images block in our editor:
The image can be customized to match your email. In this example, we’ve made background color the same as our email, and we’re using the same font. This creates a uniform and professional appearance.
Since we’re writing custom code, you may have to grab the url of the Nifty Image you just created and paste it into your html.
<img src="https://img1.niftyimages.com/160/9y-h/_92h?_rnd=1570818691" width="500" border="0" />
Animated Call-to-Action
You can draw more attention to your CTA by adding subtle animation.
<style >
.cta {
-webkit-animation: color-change 2s infinite;
-moz-animation: color-change 2s infinite;
-o-animation: color-change 2s infinite;
-ms-animation: color-change 2s infinite;
animation: color-change 2s infinite;
}
@-webkit-keyframes color-change {
0% { background-color: #f3c300; }
50% { background-color: #FFFFFF; }
100% { background-color: #f3c300; }
}
@-moz-keyframes color-change {
0% { background-color: #f3c300; }
50% { background-color: #FFFFFF; }
100% { background-color: #f3c300; }
}
@-ms-keyframes color-change {
0% { background-color: #f3c300; }
50% { background-color: #FFFFFF; }
100% { background-color: #f3c300; }
}
@-o-keyframes color-change {
0% { background-color: #f3c300; }
50% { background-color: #FFFFFF; }
100% { background-color: #f3c300; }
}
@keyframes color-change {
0% { background-color: #f3c300; }
50% { background-color: #FFFFFF; }
100% { background-color: #f3c300; }
}
.cta:hover {
background: #f3c300 !important;
transition: .8s;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
}
</style>
Any or all of these tricks can increase engagement in your emails this holiday season, but be sure to consider what may or may not work for your brand!
