justONE logo

RETHINK EMAIL MARKETING


With competition in the digital sphere increasing every day, digital marketers are having to revolutionise the ways they connect with customers. Since email clients have started supporting interactivity in emails the average email marketer’s repertoire is expanding quickly.

It’s still a well-kept secret that over half of consumers can view interactive emails. Designing for these people first and providing slick fallback content for the rest means that all recipients get the best experience possible.

insights


54%

We are currently in a mobile era, with mobile representing 54% of all email opens.
– Litmus

49%

iPhone, iPad and Gmail remained the top three email clients in 2016, with iOS representing 49% of total market share.
– Litmus

58%

Segmented and targeted emails generate 58% of all revenue.
– DMA

40X

Email is 40 times more effective at acquiring new customers than Facebook or Twitter.
– McKinsey

FALLBACK

It’s important to have a fallback strategy in place to ensure the email provides the best user experience for every device. The easiest way to handle different email capabilities is to make the fallback content the default, then use code to hide fallback and display the interactive content depending on capabilities.


MEDIUM CONSIDERATIONS

When using a smartphone an individual is more likely to be on-the-go and snacking on information, but if they’re using a desktop, they’ll be more focused and engaged with the content. By understanding an audience’s behaviour and setting, marketers can then target more appropriately.


RESPONSIVE

A responsive approach in digital design ensures all users get the best experience, no matter what screen they view the email from. Responsive web design uses code to resize, hide, enlarge or move content depending on what device it is being viewed from.

ANIMATION


Animation provokes surprise and delight, and it’s a powerful tool for making your products stand out from the rest. Retailers can use animation to display their products, create explainer animations and draw the eye to their call to action.

CSS ANIMATION

The most inspiring application of HTML/CSS animations is personalisation, marketers can personalise an animation through variables, so recipients could see relevant products, or even their name incorporated into the animation. Not to mention, CSS is lightweight, high-quality, loads faster and animates smoother than other methods.

COMPATIBILITY

62%

  Outlook for Mac
  Apple Mail
  iOS
  Android Native Mail

CONSIDERATIONS

Email clients that aren’t yet CSS compatible will simply display the image as static. That means 38% of recipients will see an image, 62% will see an animation, and 100% will be getting the best user experience possible.

ANIMATED GIF

An animated GIF is a series of images that cycle to create an animation, like its pre-computer counterpart – the flipbook. Animated GIFs are easy to create if you have the know-how and they have the power to increase the click-through rate by up to 26%, and increase the conversion rate by 103%.

COMPATIBILITY

89%

  All clients except Outlook

CONSIDERATIONS

Outlook will show the first frame of the animation as a static image, if that make sense on its own your Outlook audience will never know the difference.

WEB FONTS


Web safe fonts such as Arial and Verdana live on most operating systems and devices, which is why they’re commonly used in emails. However, we believe it is best practice in email marketing to use one of the many Google fonts available that closely resembles the brand font for consistency of brand, and to deliver beautifully-crafted emails.

MATCHING WEB FONTS TO BRAND FONTS

Original ITM Brand font (Klavika)

Google font (Titillium)

Headline goes here.

Ugitia consed quam, sunti cone molum la voluptiunt voluptas evenis nectendam que et opta comni quam, consequ iaecte dia qui coris quo omni int, iligendem doluptam que conecum aut magnimusam reprovid quiaerum ex eos magnitaqui doluptio millent quae pliquisquam il is essitatecto quis coreiciur sunt, cus, nestibea se vent.

Web Safe Font

Headline goes here.

Ugitia consed quam, sunti cone molum la voluptiunt voluptas evenis nectendam que et opta comni quam, consequ iaecte dia qui coris quo omni int, iligendem doluptam que conecum aut magnimusam reprovid quiaerum ex eos magnitaqui doluptio millent quae pliquisquam il is essitatecto quis coreiciur sunt, cus, nestibea se vent.

Original AMP Brand fonts (Archer & The Sans)

Google font (Robota & Open Sans)

Headline goes here.

Ugitia consed quam, sunti cone molum la voluptiunt voluptas evenis nectendam que et opta comni quam, consequ iaecte dia qui coris quo omni int, iligendem doluptam que conecum aut magnimusam reprovid quiaerum ex eos magnitaqui doluptio millent quae pliquisquam il is essitatecto quis coreiciur sunt, cus, nestibea se vent.

Web Safe Font

Headline goes here.

Ugitia consed quam, sunti cone molum la voluptiunt voluptas evenis nectendam que et opta comni quam, consequ iaecte dia qui coris quo omni int, iligendem doluptam que conecum aut magnimusam reprovid quiaerum ex eos magnitaqui doluptio millent quae pliquisquam il is essitatecto quis coreiciur sunt, cus, nestibea se vent.

COMPATIBILITY

62%

  Outlook for Mac
  Apple Mail
  iOS
  Android Native Mail

CONSIDERATIONS

If Google fonts are not supported, the designer can specify the web safe font closest to the original to fallback on if needed, so recipients don’t see anything out of place.

EXTRAS


LIVE COUNTERS

There’s nothing like seeing the time tick away to promote urgency, and increase engagement and conversions. Whatever time the email is opened, the countdown adjusts to display the correct amount of time left/lapsed. Retailers can use live counters to support their limited time offers, while making the offer look exclusive.

COMPATIBILITY

89%

  All clients except Outlook

CONSIDERATIONS

Countdown Timer is a GIF image that counts down to a specific date and time. It works as a script which creates a looping GIF counting down to a time. Every time when the recipient opens an email, animated GIF loops for 90 seconds and then resets. Countdown timers in emails are compatible across all platforms. However, some versions of Microsoft Outlook display the first frame of animated GIF only.

SEE EXAMPLE

ACCORDION MENU

The perfect space-saving technique, an accordion menu stacks content so you can pack more content into emails without making your audience scroll for miles to see it – they just click on a tab and it’s revealed.

COMPATIBILITY

62%

  Outlook for Mac
  Apple Mail
  iOS
  Android Native Mail

CONSIDERATIONS

Marketers can be clever with accordion menus, allowing desktop users to see the full content and mobile users to see the stacked accordion version.

SEE EXAMPLE

IMAGE SLIDER

Interactive email is becoming more popular than ever. Carousels or image sliders can be a powerful tool for email, especially for mobile where vertical space is at a premium.

COMPATIBILITY

62%

  Outlook for Mac
  Apple Mail
  iOS
  Android Native Mail

CONSIDERATIONS

The fallback for mail clients that can't read this code will be a single image.

SEE EXAMPLE

KEN BURNS GALLERY

The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery and is a great interesting way to cycle through multiple images.

COMPATIBILITY

62%

  Outlook for Mac
  Apple Mail
  iOS
  Android Native Mail

CONSIDERATIONS

The fallback for mail clients that can't read this code will be a single image.

SEE EXAMPLE

EMAIL EXAMPLES


CSS animation | Alt design for Mobile & Desktop |
Google fonts | Responsive

CSS animation | Google fonts

CSS animation & GIF animation | Animated variables
Google fonts | Responsive

CSS & GIF animation | Animated variables
Google fonts | Responsive

GIF animation | Alt design for Mobile & Desktop |
Google fonts | Responsive

CSS & GIF animation | Animated variables
Google fonts | Responsive

CSS collapsible accordion menu
Google fonts | Responsive

GIF animation | Live countdown timer
Google fonts | Responsive

Background images | Google fonts | Responsive

CSS animation | Responsive

CSS & GIF animation | Responsive

CSS animation | Responsive

BACK TO TOP

DISPLAY BANNERS


BACK TO TOP