The Samurai Way to Mobile Email: Slicing Your Banners and Hiding Your Heroes
by Jordie van Rijn last updated on 0

The Samurai Way to Mobile Email: Slicing Your Banners and Hiding Your Heroes

Trained as an elite, the Japanese mercenaries and warriors of yesteryear are effective in every situation. Just think about the samurai and ninjas – the figures of mystery and legend. They always hit their target. Every marketer would like his messages to be just as optimized for performance and cool as they were. Let’s see what we can learn from these warriors and their intelligent tactics to make your email the ninja of mobile.

Be aware of your surroundings

Before we even start with the more refined tactics, a true hero is always aware of his surroundings. As you might know, a large part of your email opens now come from mobile devices. The first step is to understand the challenges in mobile and the truth in keeping your messages simple. So is your content mobile aware?

The hidden hero

One of the strengths of a ninja in ancient Japan was using covert methods of waging war. You would have a hard time catching them, or even spotting them, because they are masters of disguise and camouflage.  They are the elements that are only there at the times it is important. Precisely what we need in our mobile and especially smartphone emails.

You might know that a large image next to of a person or product next to the message and a call to action is called a hero image. Have a look at this example by Rewards Network / Delta rewards. On a desktop, this email has a hero image to enforce the topic of the first item and a call to action. But on a mobile device this would be an overkill. Thus, the hero is hidden.


Hiding the heroes

(Via Chris Studabaker)

We might have seen this challenge before in optimizing email for images off. An important part is the that the design is thought through so the email can function and convey the main message without the Hero image.

The mobile samurai slice

A samurai is a noble warrior from ancient Japan. They had strict rules about honour and combat in great contrast with the ninjas. Their swords are known for their sharpness, able to split a hair even when you are using conditioner. The weapon is much more effective than breaking a log with your head.

As you might know, with responsive design it is possible to stack your columns into rows. But if you are using a full width banner, how to prevent it from scaling and showing up too small in the mobile view?

We will need that sharp samurai sword to slice, but the trick is actually in the design of the banner itself. Don’t think of the banner as one image that must be displayed horizontally, but think of it as two images, that together form one message.

Slicing your banners

The purpose of the left side is to show the first part of your offer. The right side is either the second part of the offer or the call to action. Now we design the banner so it can be sliced into two without looking as if it was ever meant to be any other way. The easiest way to do so is to use a common background colour like white and not use any gradients or lines that cross the width.

Have a look at this email from Chico that preformed the mobile samurai slice to perfection. On the left we see Free Shipping, on the right we see “on your order of $50 or more.” This works well because the top of the email already has a clear “Shop now” call to Action.

Have you come across the mobile samurai slice preformed in any emails before? Please let me know if you have seen any examples.

Subscribe for fresh tips & top articles

GetResponse Sp. z o.o. needs data contained in this form to provide you with materials you requested. For more information, read Privacy Policy.

Thanks for signing up!

We'll send you an email to confirm this shortly.

Become a GetResponse Blog writer!

Write for us