Cette présentation réalisée par Big5media vous aidera à mieux comprendre les enjeux et les raisons pour lesquelles il est devenu indispensable d'adapter son site web et ses campagnes email marketing aux formats mobiles!
Le responsive design : adapter ses contenus aux formats mobiles
1. Le responsive design
22 avril 2013
Focus sur les éléments techniques et sur l’e-mailing web responsive
2. 2
Le responsive design
Le responsive web design englobe les
techniques de conception qui permettent de
proposer des contenus auto-adaptables en
fonction des interfaces de consultation utilisées
par le visiteur.
Le responsive design permet de s’adapter à
l’environnement technique de consultation sans
pour autant multiplier les versions d’un même
contenu.
4. Le responsive design
4
Les largeurs fixes deviennent variables
Grilles fluides
1
La taille des images s’adapte à
chaque écran
Images flexibles
2
5. Le responsive design
5
Les largeurs fixes deviennent variables
Grilles fluides
1
La taille des images s’adapte à
chaque écran
Images flexibles
Interrogation des devices pour
déterminer lequel est utilisé et sa résolution
3
Media Queries
2
6. Le responsive design
6
Sur les devices mobiles, les zones froides et les zones chaudes ne sont pas les même
que sur desktop. Sur mobile, la lecture est rapide et incomplète. Le message doit
donc être repensé et adapté à ce terminal.
Zones chaudes
Zones tempérées
Zones froides
7. Le responsive design
7
Sur les devices mobiles, les zones froides et les zones chaudes ne sont pas les même
que sur desktop. Sur mobile, la lecture est rapide et incomplète. Le message doit
donc être repensé et adapté à ce terminal.
Zones chaudes
Zones tempérées
Zones froides
11. L’approche idéale
Mobile first
11
Intégrer en premier les contraintes
techniques de l’environnement mobile …
…puis se concentrer sur les besoins
mobiles de l’utilisateur et le contenu
avant le design d’interface.
12. FOCUS
ELEMENTS TECHNIQUES DU WEB RESPONSIVE
BIG5MEDIA, 3 Impasse du Bel Air, 94110 ARCUEIL | +33 1 47 40 32 10
12
13. Le responsive design
13
Le device
La technologie reconnaît…
L’OS du device
Le type de messagerie
électronique
Les dimensions de l’écran
La résolution de l’écran L’orientation de l’écran
16. Dans le code, le web responsive suppose d’appliquer des règles spécifiques suivant le support
de lecture….
16
Le responsive design
17. 17
Le responsive design
Dans le code, le web responsive suppose d’appliquer des règles spécifiques suivant le support
de lecture….On précise la résolution de l’écran (ici 320 px à 490 px) et on adapte la taille du
contenu.
18. Le responsive design
18
• HTML5 est un standard ouvert et gratuit : le code est accessible
Vous ne prenez en charge que la partie créative de votre projet
mobile !
19. Le responsive design
19
• HTML5 est un standard ouvert et gratuit : le code est accessible
Vous ne prenez en charge que la partie créative de votre projet
mobile !
• Le R.O.I est optimisé
21. L’e-mailing web responsive
Par le biais d’un seul envoi, l’e-mailing web responsive adapte le contenu et l’ergonomie en fonction
des différents écrans sur lequel il est consulté.
21
• Adapter vos messages en fonction de l’appareil sur lequel il est
lu pour optimiser vos campagnes.
• Proposer des contenus adaptés aux utilisateurs en situation de
mobilité pour améliorer le taux de transformation des
campagnes.
• Adapter la forme de vos messages, et donc apporter un confort
de lecture à votre cible.
C’est une nette amélioration de l’expérience client !
22. L’e-mailing web responsive
22
55 millions de français possèdent un mobile dont
26 millions possède un Smartphone *
*ARCEP, (avril 2012)
23. L’e-mailing web responsive
23
* Ipsos profiling (Sept 2010), **ReturnPath (2012).
Des mobinautes français consultent
leur e-mails sur mobile et y
consacrent plus d’1h30 par semaine*
48 %
41 %
Des Européens ont tendance à refermer
voir effacer un email non optimisé pour
leur interface mobile*
300 %
progression des
ouvertures sur
mobile**
24. 24
Vos campagnes email marketing
sont-elles optimisées en priorité
pour cet environnement ?
27. 27
Le responsive design
Tablette
* Fevad
3,9 %*
Tablette
Le taux de transformation est plus important sur tablette
1,9 %*
Ordinateur
1,7 %*
Smartphones
28. L’e-mailing web responsive
28
Masquer les éléments inutiles en mobilité
(partage de réseaux sociaux, page miroir...)
Ré-agencer les blocs de contenu au
format vertical : Prévoir un email sur une
colonne de large (400 - 500 pixels)
Densifier le haut du message pour permettre un
appel au clic rapide, une compréhension de
l'offre dans les 200/300 premiers pixels
La taille du doigt étant de 0,8 cm² au minimum,
il faut prévoir des appels au clic en adéquation
avec cette dimension