Here's a 100 bitcoin question: why would emailing escape the mobile-friendly trend? The answer is quite simple: none!
But you knew that! Like any good marketer and regular reader of this blog (and therefore a very good marketer), you're well aware that the smartphone is an essential medium for consulting emails.
A few figures if you needed convincing:
According to SCND, Internet users use an average of 3 devices to check their email:
- 88% via desktop
- 74% by smartphone
- 40% per tablet
According to the same study, 8 out of 10 users delete emails if they are not readable on a tablet or mobile!
That's how strategic the responsive display of your emails is...
And yet, many advertisers still overlook this essential adaptation, either by deliberate choice or because they don't apply the right responsive design codes.
When you're not an integrator, it's hard to get your head around these codes and understand why a beautiful email creative is difficult to integrate in responsive!
Dataventure gives you a simple methodology for successful responsive email design:
1. Anticipate how your emails will look on mobile devices
The first thing to do is to think about your e-mails in terms of how they will look on mobile or tablet devices, right from the first stage, when you create the template or mock-up of the e-mail. The basic principle is simple: identify the areas of the email that must be adapted to the various devices. Count on 2 experts for this: your graphic designer and your html integrator.
They'll be the best people to work with you to harmonize your message and make it readable everywhere and by everyone.
Desktop version
Mobile responsive version
In concrete terms, responsive is a story of blocks, like a table. Independent blocks that the integrator can organize as he sees fit by placing them one under the other. Consequently, anything that complicates a simple, clean breakdown of your creative (in the form of a table) will incur the wrath of your integrator.
(Do you realize how much integrators are paid to spend their days playing Tetris?)
Designing and dividing up these blocks with the graphic designer is therefore essential to anticipate the needs of the integrator, who thinks, breathes and lives responsive (and Tetris!).
Example of a design (with integrator cut-out)
ill-suited to responsive use
What should have been done to optimize
the integration of this responsive email:
- Move the 1st call-to-action "I make a donation" so that it doesn't overlap the 2nd block (in turquoise). Recommendation: provide extra height to integrate it into the 2nd block.
- Same principle for the photo and text in the e-mail signature, which should be moved. Recommendation: position them under the 2nd "I make a donation" call-to-action, or reduce the elements to fit everything in the cut-out.
2. A good knowledge of your recipient base
Gmail, Yahoo, Orange, Caramail or AOL... Each email provider interprets the code of your emails differently (or not at all for some of those mentioned above, but that's another problem ;-))...
Knowing the specifics of your base by identifying the different messaging providers will enable you to target your efforts.
Simple solutions do exist! We recommend that you test the responsive design of your templates before sending them out to different devices, e-mail providers and applications.
3. Don't confuse responsive design with conditional display
These two radically different notions are often confused. A quick reminder for the uninitiated or the two at the back who haven't listened to a word...
Responsive design consists in keeping all the basic elements of the creative and reducing or moving these blocks to adapt to different devices or messaging providers.
As the name suggests, conditional display means choosing to display or remove certain blocks that are deemed unnecessary or unsuitable for mobile. The creative is then visibly more refined on mobile than on desktop.
In principle, conditional display can be a good way of avoiding creatives that are overloaded with visuals and text, resulting in heavy scrolling.
In practice, however, many e-mail providers and routers either don't handle conditional display properly, or don't handle it at all. The result is broken creatives where blocks are doubled (desktop AND mobile) one after the other. Beeuuuurrrk! And as bad things never come alone, this considerably increases the weight of your e-mails, which will also result in poor deliverability...
Example of conditional
accepted by the messaging system
Example of a conditional not accepted by the messaging system
To avoid this and many other inconveniences (and keep chatting quietly at the back of the classroom), rely on us for truly responsive emails!
