An animation of different screen displaying CSS

How to make your emails stand out

2.4 billion emails are sent every second. That’s 4.8 billion emails in the time you just read that sentence. There goes another 4.8 billion emails, whizzing out of people’s inbox. And another.

You get the idea.

With so many emails being sent out in such a short space of time, what makes yours stand out from the crowd? Don’t despair. There are lots of CSS tricks, small tweaks and interactive elements you can use that will help liven up your email template and increase click through rate.

Firstly, what is CSS?

CSS, also known as Cascading Style Sheets, describes how HTML elements are displayed on screen. This includes email design, background colour, interactive content and how the same email template will appear on different devices and screen sizes.

So, what are some interactive elements you can add to your emails?

When you are creating an interactive email, there are lots of different elements you can include to make it more engaging for the user. Here are some good examples of interactive email design elements that you might want to include:

  • CSS and CTA Hover – a simple and quick technique that adds interactivity to copy and images within your emails. This could be changing the colour of a CTA or the opacity of an image
  • Image rollovers – a different image is displayed when the user hovers over the original image. Great for displaying products at different angles or mixing up product and lifestyle shots
  • Image slider and CSS scroll – these are both examples of using CSS animation/CSS keyframes to display more content in one place. It’s also good for making the email look more like the brand/company’s website

Should you use interactive email design for your email marketing campaigns?

There is no right or wrong answer when it comes to using interactive elements or content within your email, however there are definite benefits to including them.

These are:

  • Increased engagement and click through rate
  • Drives more conversions
  • Grabs the user’s attention more effectively
  • Improves the overall user experience and makes the email feel more personal
  • Can display more information
  • Helps keep the email on brand e.g. CTA hovers to match website
  • Some techniques don’t require a lot of interactive email code

 

However, there are some risks that you need to consider:

  • Some clients don’t support it – approx. 90% of interactive emails work in Apple Mail and only 50% work in Gmail
  • A fallback may be needed so it doesn’t affect accessibility
  • Not supported by all devices
  • It could work differently for desktop and mobile users
  • You need to get it to work with your existing email template
  • Making sure you don’t lose the message you’re trying to get across
  • Getting the right balance of interactive elements

How can you send marketing interactive emails with graphics in it?

If you are brand new to this style of email, it’s a good idea to start by familiarising yourself with CSS animation and how interactive emails work. This will give you a clearer idea of how to create the basic email template and any CSS properties you will need to consider.

Try to review and test existing interactive emails, or experiment and test on a wide range of email clients and devices. It’s also a good idea to consider suitable fallback options in case an email client doesn’t support the CSS.

What’s the best animation technology to create interactive emails – GIF or CSS?

Like many things, there are pros and cons to using GIFs and CSS animation. GIFS can be really easy to make and are great for marketing products in a small space. They are also supported by a variety of big emails clients, so you don’t have to worry about a lot of people not being able to see the GIF. However, larger GIFs can be slow to load and use lots of data if viewed on a mobile.

In contrast, CSS animations are fairly lightweight, quick to load and look great when viewed on high quality mobile screens. They can also be much smoother than other methods. However, to use CSS animation, you will need a knowledge of how to create and troubleshoot – this inevitably will put some people off using it. Additionally, fewer clients support them.

And lastly, here’s an important piece of advice from one of our developer wizards, Katie:

Always make sure there is a suitable fallback option for users. And keep testing!

 

Want more handy tips from our awesome team? Get in touch with rich.james@flourishworld.co.uk