Inbox Expo was a virtual event held mid-March by the emailexpert team.

With over 100 speakers and 1000 visitors, it was a big 4 day event! A huge number of email events have moved online or been rescheduled since the start of 2020 and a lot of smaller meetups haven’t happened like they would normally.

All those small emailgeeks London or Leeds meetups where you chat with old friends and hear about what’s going on in the industry.

That also meant I got to speak a little less than normal 😞.

Last year I missed out on attending the first Inbox Expo - my talk was picked and I had it all ready to go and I caught the worst flu I had ever had, and although my mind was willing, my body was not, my colleagues suggested I take some time off work (rightly so!) and I just couldn’t present, I could just about get out of bed… So when the opportunity to present came around for this year, I submitted a new talk I had in mind - Interactivity and UI animation.

Which when I submitted was going to talk about how using animation can make users actions in an email more positive, give them direction and during the talk share some examples and code.

After I reached out on Twitter and chatted to some fellow email developers, there was more of an appetite for finding the reasons to use interactivity and animation, where the support was and some quick wins or small intros to the code.

For the full talk, you need to head over to the Inbox Expo site and sign up to get the recordings.

But I can share some slides and some links that helped a lot of people.

So why use animation? 1.

Brain benefits Whenever you see something move, change or alter on screen your brain wants to figure out why and how? Animation eases that strain, if when you click on a button and a loading image appears before transitioning to a piece of information, it is clear what has happened and easier for our brains to understand.

“Animating an element’s movement makes that change in position visible on-screen, which means your users don’t have to keep track of where things have moved.

The effort they would have used to track the object is essentially off-loaded from their brain to the visible animation on-screen.” - Val Head, Designing Interface animation.

2.

Communicates a message and is easy to understand Seeing a process animated in front of you is easier than trying to scroll through a load of images that you need to follow.

As well as animating features, such as in software, animating a story, such as a manufacturing or recycling process can share a lot more with users.

3.

Connects contexts and brings experience together Recipients of your email want to be immersed in your brand and want to trust your emails.

Linking from an email that has similar animation principles and maybe even some of the same animations, such as calls-to-action or links will help bridge the gap from email to website, and strengthen their connection.

4.

Grabs attention! Let’s be completely honest - animation adds a bit of movement and can highlight something in your email, an important part of your email, an offer or a call to action and ultimately we want to grab a users attention - animation can really help here.

These all add up to a better experience and in turn brand affinity.

Plus a better ROI and more engagement from recipients as well.

Support As you can see from the list above - > 86% supports interactivity and > 80% support CSS animation.

This list is based on all the Litmus data from analytics, but may not reflect your recipient email client breakdown.

You can normally find a device breakdown from your ESP, or you could use a third party tracker like Litmus or Email on Acid - or try and make one yourself! Warning With any animation or interactivity and in email in general - Accessibility should be at the top of your list and it is important to highlight it! Think about any animation you do, from GIFs to CSS and make sure it doesn’t possibly cause issues for users with sensitivity from flashing images, doesn’t cause motion sickness and always think about the user when creating an email.

Don’t overuse animation - If your email is too busy with animation it could be distracting and could take away from your main message.

Think about whether it enhances the recipients experience - Does adding this animation or interactivity make it better? Support - Think about support as I mentioned above and always start with the lowest support and progressively enhance your email.

Think about accessibility - I already mentioned it, but you should DEFINITELY be thinking about accessibility at every stage!! You can use the CSS media query @prefers-reduced-motion to show or hide content based on a users preference.

Same as other media queries:

@prefers-reduced-motion { .animation { animation-play-state:

paused!important;} .hideanimation {display:none!important;} } There is a good amount of support for this in email clients, you can find the most up to date support on caniemail.com A quick win So along with the details above - you can go to your team prepared to add some animation to your emails.

I’d take a cheeky look at your own website and see if you can nab a button animation or something - if not I have some ideas below that you could get started with! Adding a transition hover effect can be a small addition to your emails.

You can use the below as a guide:

HTML

CSS .cta {background-color:

blue; transition:

background-color 1s ease 0s;} .cta:hover {background-color:

red;} How does this break down? .class { transition:

[transition-property] [transition-duration] [transition-timing-function] [transition-delay];

} Overall there is a lot you can do and some awesome resources to help you out.

I wrote a comprehensive guide on Campaign Monitor, CSS animation in email .

Plus there are two great starting guides on interactive techniques, one on Litmus and one from Email on Acid .

But I’d recommend you search around and find all the resources out there from a whole bunch of email geeks.

Summary It was awesome being able to talk at Inbox Expo and a huge thanks to the organisers, Andrew and Nely Bonar - an even bigger thanks to all the email marketers that came along and got involved, whether talking, on panels, networking or asking me questions.

You should sign up to get the recordings from the event when they become available and bookmark it for next year.

Jay Oram Senior Coder & Interactive Email Specialist