Le responsive design
22 avril 2013
Focus sur les éléments techniques et sur l’e-mailing web responsive
2
Le responsive design
Le responsive web design englobe les
techniques de conception qui permettent de
proposer des conten...
Le responsive design
3
Les largeurs fixes deviennent variables
Grilles fluides
1
Le responsive design
4
Les largeurs fixes deviennent variables
Grilles fluides
1
La taille des images s’adapte à
chaque éc...
Le responsive design
5
Les largeurs fixes deviennent variables
Grilles fluides
1
La taille des images s’adapte à
chaque éc...
Le responsive design
6
Sur les devices mobiles, les zones froides et les zones chaudes ne sont pas les même
que sur deskto...
Le responsive design
7
Sur les devices mobiles, les zones froides et les zones chaudes ne sont pas les même
que sur deskto...
Exemple
8
Exemple
9
Exemple
10
L’approche idéale
Mobile first
11
Intégrer en premier les contraintes
techniques de l’environnement mobile …
…puis se conc...
FOCUS
ELEMENTS TECHNIQUES DU WEB RESPONSIVE
BIG5MEDIA, 3 Impasse du Bel Air, 94110 ARCUEIL | +33 1 47 40 32 10
12
Le responsive design
13
Le device
La technologie reconnaît…
L’OS du device
Le type de messagerie
électronique
Les dimensio...
Le responsive design
HTML5
structure
14
Et repose sur…
Le responsive design
HTML5
structure
15
Et repose sur…
CSS3
Feuilles de style
Dans le code, le web responsive suppose d’appliquer des règles spécifiques suivant le support
de lecture….
16
Le responsiv...
17
Le responsive design
Dans le code, le web responsive suppose d’appliquer des règles spécifiques suivant le support
de l...
Le responsive design
18
• HTML5 est un standard ouvert et gratuit : le code est accessible
Vous ne prenez en charge que la...
Le responsive design
19
• HTML5 est un standard ouvert et gratuit : le code est accessible
Vous ne prenez en charge que la...
FOCUS
L’EMAILING WEB RESPONSIVE
20
L’e-mailing web responsive
Par le biais d’un seul envoi, l’e-mailing web responsive adapte le contenu et l’ergonomie en fo...
L’e-mailing web responsive
22
55 millions de français possèdent un mobile dont
26 millions possède un Smartphone *
*ARCEP,...
L’e-mailing web responsive
23
* Ipsos profiling (Sept 2010), **ReturnPath (2012).
Des mobinautes français consultent
leur ...
24
Vos campagnes email marketing
sont-elles optimisées en priorité
pour cet environnement ?
25
Le responsive design
1,7 %*
* Fevad
Smartphones
26
Le responsive design
1,9 %*
Ordinateur
* Fevad
1,7 %*
Smartphones
27
Le responsive design
Tablette
* Fevad
3,9 %*
Tablette
Le taux de transformation est plus important sur tablette
1,9 %*
...
L’e-mailing web responsive
28
Masquer les éléments inutiles en mobilité
(partage de réseaux sociaux, page miroir...)
Ré-ag...
29
www.big5media.com
Contact :
contact@big5media.com
BIG5MEDIA, 3 Impasse du Bel Air,
94110 ARCUEIL | +33 1 47 40 32 10
Po...
Prochain SlideShare
Chargement dans…5
×

Le responsive design : adapter ses contenus aux formats mobiles

2 492 vues

Publié le

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!

0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 492
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le responsive design : adapter ses contenus aux formats mobiles

  1. 1. Le responsive design 22 avril 2013 Focus sur les éléments techniques et sur l’e-mailing web responsive
  2. 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.
  3. 3. Le responsive design 3 Les largeurs fixes deviennent variables Grilles fluides 1
  4. 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. 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. 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. 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
  8. 8. Exemple 8
  9. 9. Exemple 9
  10. 10. Exemple 10
  11. 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. 12. FOCUS ELEMENTS TECHNIQUES DU WEB RESPONSIVE BIG5MEDIA, 3 Impasse du Bel Air, 94110 ARCUEIL | +33 1 47 40 32 10 12
  13. 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
  14. 14. Le responsive design HTML5 structure 14 Et repose sur…
  15. 15. Le responsive design HTML5 structure 15 Et repose sur… CSS3 Feuilles de style
  16. 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. 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. 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. 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é
  20. 20. FOCUS L’EMAILING WEB RESPONSIVE 20
  21. 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. 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. 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. 24 Vos campagnes email marketing sont-elles optimisées en priorité pour cet environnement ?
  25. 25. 25 Le responsive design 1,7 %* * Fevad Smartphones
  26. 26. 26 Le responsive design 1,9 %* Ordinateur * Fevad 1,7 %* Smartphones
  27. 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. 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
  29. 29. 29 www.big5media.com Contact : contact@big5media.com BIG5MEDIA, 3 Impasse du Bel Air, 94110 ARCUEIL | +33 1 47 40 32 10 Pour recevoir cette présentation, cliquez ici

×