In early December of 2014, Microsoft bought the popular iOS Acompli email app and less than two months later they released their own Outlook app for both iOS and Android. At first it was basically just a rebrand and nearly identical to the original app, but there have been a number of updates that make the new Outlook app ideal for business and enterprise users.
According to Microsoft, the new Outlook App is designed to bring those handy Outlook features you use every day (such as email, calendar, contacts and files), to every device so you can get more done every day – no matter the size of your screen or which platform you prefer to work on! This makes it great for users but here are some things that email marketers need to know about this app.
How the user interface affects your email campaigns
Mail is automatically sorted into TWO TABS
Similar to how Gmail started automatically sorting incoming mail into different groups, the inbox of the Outlook app is sorted into two tabs – Focused and Other. Over time, the algorithm is supposed to learn who a user normally interacts with and places emails from those people in the Focused group so they can access them quickly.
But as with anything that depends on an algorithm to figure out what someone thinks is important – sometimes it gets it very wrong! Fortunately users can turn this feature off but if they like it, they can manually move emails into either group as well as choose to have ALL further email from a sender go into a specific group.
Because emails are organized into Focussed and Other, it will be a whole lot easier for users to bypass marketing emails. That means it is essential that your email content is relevant so that your subscribers LOOK for your messages. And hopefully they will enjoy your content so much that your emails will end up in the desirable Focussed group!
The inbox view shows MORE
As with every other email client in the world, the inbox view of the Outlook app shows the senders name and the subject line (although the number of characters is limited). However it also shows TWO lines of preview text from the body of the actual email.
This means that you need to make sure that your ‘From’ name is one that your subscribers can easily recognise and trust, and that your subject line along with the preview text is optimized to encourage subscribers to open your email.
In other words – ensure you have enough copy at the beginning of your email so that content like ‘view this message in your browser’ is not all your subscribers will see in their inbox!
The rendering elements affecting your email design
Your media queries ARE supported!
Because of how many different iOS and Android devices are available today, responsive email design is one of the most important elements of putting together any email marketing campaign. The simplest and most commonly used responsive design technique depends on media queries, and thankfully this Outlook app DOES support them (unlike most others)!
This means that you will finally be able to use a media query to trigger a particular style that rearranges, resizes and tweaks your layout for an optimal appearance and performance that suits the size of the screen your subscriber is viewing their email on.
Ironically, one of the reasons for the amazing HTML and CSS support may be the fact that this app recognizes itself as a Webkit client rather than as a Microsoft Office one! That means you CAN use the -webkit-min-device-pixel-ratio:0 media query, but you CAN’T use the <!–[if mso]> media query!
You STILL can’t use semantic layout
While quite a few of the more advanced CSS3 and HTML5 techniques are supported by this app, you still can’t use a semantic layout – no matter how basic it is. In case you didn’t know, semantic elements such as <header>, <footer>, <article> or <section> allow you to more accurately and clearly define the different parts of an email.
Now that doesn’t mean you’re going to have to pull out all those table based layouts you’ve been using for other Outlook clients, because fortunately it DOES support divs which are a more generalized way of separating your content into different parts. And the reason you’d want to do this is so that you can apply different styles to each section of your email!
Your images are displayed BY DEFAULT
All of the older desktop Outlook clients, as well as many other email clients, automatically block images from downloading or displaying. That means that email designers have to use tricks like alt text, styled alt text or so called ‘bulletproof buttons‘ to get their emails to display and work properly. This also makes tracking opens tricky as it relies on an invisible image pixel placed in the email.
However, the new iOS and Android app is set to display all images by default which means that your emails will display the way they are supposed to and your email tracking will be more accurate! Users can disable the option if they like, but as long as they don’t see a huge jump in their data usage as a result of it, we don’t see any reason why someone would want to!
Animation and video support is BETTER
Office based versions of Outlook only show the first frame of an animated GIF, which made it nearly impossible for email designers to use even the most simple animations in their email campaigns. However this new iOS and Android version of Outlook displays all animated GIF’s perfectly and without any problems.
Another thing that this Outlook app will support, and which email marketers around the world are cheering about, is CSS animations. However there are two important issues email designers need to know about. The first is that you need to use the –webkit prefix for your CSS animations as the standard forms don’t work, and the second is that animations on <span> or <a> tags also don’t work.
Unfortunately you will still not be able to use the HTML5 <video> tag which embeds a video within the body of your email and doesn’t require a plugin to play. What this means is that you should rather use an animated GIF or an image with an embedded link that plays the video in a browser. Another thing to note is that all animations will pause while a user is scrolling through an email.
You CAN use web fonts
Web fonts essentially allow you to use a font in your email (or on your website) that your subscriber might not have installed on their computer. All you have to do is host the font file yourself or you can use a web font hosting service (such as Google Fonts). This is ideal when you are using custom or branded fonts, as well as any fonts that you love the look of but are not very common.
So it is fantastic news that this Outlook app will be supporting them, and that you can use either the @import method or the more common @font-face method to enhance your emails. We have tried a variety of web fonts and had no rendering problems with them, but it is still a good idea to test your email campaigns before launching them!
The :hover function actually WORKS – sort of!
The :hover function allows you to add different styles such as a different font color or family, a larger font, background color and even add a drop down menu or small popup to specific elements whenever a user ‘hovers’ their mouse cursor over that element. This is an interactive element that increases your subscribers’ engagement and ultimately means they’ll look forward to your emails!
Now you would think that you wouldn’t be able to use this function on a mobile or touch device, because you obviously can’t ‘hover’ on them. However, if you have used :hover anywhere the effect or style you’ve specified will activate when they TAP that element. Using this to change font styles is just silly, but you could use it to reveal hidden images, drop downs and small text boxes.
You WON’T be needing VML to force background images
Background images within the body of your email is one of those things that you need to be careful of using because many email clients don’t really support them. But background images allow you to add an extra element to your messages by placing live text ON TOP of an image, without having to turn that text/image combo into an image on its own (which might get blocked by default!).
Until now, Outlook has been one of the worst email clients when it comes to rendering background images and email designers were forced to use a VML hack to get them to display properly. The great thing is that this Outlook app has joined the ranks of the email clients that DO support background images without any rendering problems or hacks required!
OUR FINAL WORD
There are far more rendering techniques this app supports, but these are the most important ones amateur email marketers need to know about. If you’re interested in a more detailed list then check out this article. Just remember that the results are only based on the iOS version right now, and if you’re an HTML email newbie there are some terms you might not understand or recognise.
All in all, this particular version of Outlook is one of the best email apps available today and quite a few leading email designers and marketers are using it on a daily basis. That means it is highly likely that any of your subscribers who prefer Android or iOS devices will start using it as well – so if you want KEEP those subscribers you’ll make sure your campaigns accommodate them!