© store-factory 2004-2014 sites e-commerce responsive aspects techniques et ergonomiques
TRANSCRIPT
![Page 1: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/1.jpg)
© Store-Factory 2004-2014
SITES E-COMMERCE RESPONSIVEAspects techniques et ergonomiques
![Page 2: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/2.jpg)
© Store-Factory 2004-2014 2
Aspects techniques et ergonomiques du responsive:
✔ GENERALITES
ILLUSTRATIONS ERGONOMIQUES
INTEGRATION CSS
INTEGRATION JAVASCRIPT
BONNES PRATIQUES
![Page 3: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/3.jpg)
© Store-Factory 2004-2014
• Offrir la meilleure expérience utilisateur quelque soit le device utilisé et optimiser la conversion même en situation de mobilité
• Rationnaliser l’environnement technique en ayant une solution unique quel que soit le périphérique
=> CODE HTML UNIQUE
3
Les objectifs du responsive en e-commerce :
![Page 4: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/4.jpg)
© Store-Factory 2004-2014
• S’intérésser au comportement au passage de la souris.
• Oublier qu’un écran d’iphone classique en vertical ne peut afficher que 330px (sans l’ascenceur)
• Mélanger les navigations horizontales et les navigations verticales
• Afficher des boutons trop petits• Avoir des pages trop lourdes impossibles à charger
en situation de mobilité (polices, jquery, animations…)
4
Les écueils conceptuels fréquents:
![Page 5: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/5.jpg)
© Store-Factory 2004-2014 5
Aspects techniques et ergonomiques du responsive:
GENERALITES
✔ ILLUSTRATIONS ERGONOMIQUES
INTEGRATION CSS
INTEGRATION JAVASCRIPT
BONNES PRATIQUES
![Page 6: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/6.jpg)
© Store-Factory 2004-2014 6
Mise en page principale du site
![Page 7: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/7.jpg)
© Store-Factory 2004-2014
• Trop d’informations difficiles à hierarchisée pour l’internaute
• Trop de zone redondantes qui pourraient être regroupées– Navigation (2 zones)– Réassurance (3 zones)
• Mises en avant de la home noyées dans l’ensemble
=> Simplifier la mise en page sur des logiques horizontales
7
Analyse critique
![Page 8: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/8.jpg)
© Store-Factory 2004-2014 8
Ergonomie de la navigation
![Page 9: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/9.jpg)
© Store-Factory 2004-2014 9
Ergonomie de la navigation
![Page 10: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/10.jpg)
© Store-Factory 2004-2014 10
Aspects techniques et ergonomiques du responsive:
GENERALITES
ILLUSTRATIONS ERGONOMIQUES
✔ INTEGRATION CSS
INTEGRATION JAVASCRIPT
BONNES PRATIQUES
![Page 11: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/11.jpg)
© Store-Factory 2004-2014
Modèle de boite en relatif
li {float:left;}11
Implémentation CSS : comportement standard
lili
lili
lili lili lili
lili lili lili
![Page 12: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/12.jpg)
© Store-Factory 2004-2014
Un CSS par défaut et un autre conditionnel
li {float:left;}@media screen and (max-width: 640px) { .li {display:block;clear:both;} }
12
Implémentation CSS : media query
lili
lili
lili lili lili
lili lili lili
![Page 13: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/13.jpg)
© Store-Factory 2004-2014
• Dans la feuille de style de base• Dans une feuille de style externe• Conditions utilisables :
– Média (écran, imprimante …)– Largeur (min-width, max-width …)– Orientation (portrait, landscape )
• Disponible sur IE > 8 Plus d’info sur
http://www.alsacreations.com/article/lire/930-css3-media-queries.html
13
Implémentation des media query
![Page 14: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/14.jpg)
© Store-Factory 2004-2014
<head><meta charset="UTF-8 »><meta content="minimum-scale=1.0, width=device-width,maximum-scale=0.6667, user-scalable=no" name="viewport" /><title>TEST</title><link rel="stylesheet" type="text/css" href= "style.css" media="all"><link rel="stylesheet" media="screen and (min-width:801px)"
href= " large.css" /><!--[if lt IE 9]>
<link rel="stylesheet" href= "large.css" media="all"><![endif]--><!--[if lt IE 9]>
<link rel="stylesheet" href= "oldie.css" media="all"><![endif] -->
</head>14
Implémentation html (multi-navigateurs)
![Page 15: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/15.jpg)
© Store-Factory 2004-2014 15
Aspects techniques et ergonomiques du responsive:
GENERALITES
ILLUSTRATIONS ERGONOMIQUES
INTEGRATION CSS
✔ INTEGRATION JAVASCRIPT
BONNES PRATIQUES
![Page 16: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/16.jpg)
© Store-Factory 2004-2014
(sur évènements onload –resize - orientationchange)
responsive=801;smallDevice = true; bigDevice= false;if (document.body.clientWidth > responsive) { smallDevice = false;
bigDevice= true;}
16
Détection largeur en javascript
![Page 17: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/17.jpg)
© Store-Factory 2004-2014
On peut ensuite avec un simple test dans le code avoir des comportements complétements différents d’un mode à l’autre :-ajout évenement-ajout code html-modification de style …
17
Action sur les comportements en javascript
![Page 18: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/18.jpg)
© Store-Factory 2004-2014
Le recours à des framework comme Jquery peut poser des problèmes :-De poids en situation de mobilité-De compatibilité responsive sur des plugin gérant l’affichage (sliders, menus …)-De rapidité d’execution sur des terminaux peu rapides-De rationalité de développement :
- Inutile de faire télécharger une bibliothèque complète si on n’en utilise qu’une faible partie
- Le javascipt actuel (query sellector) permet de faire (presque aussi facilement) les mêmes choses que Jquery mais plus rapidement
18
Framework javascript
![Page 19: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/19.jpg)
© Store-Factory 2004-2014 19
Aspects techniques et ergonomiques du responsive:
GENERALITES
ILLUSTRATIONS ERGONOMIQUES
INTEGRATION CSS
INTEGRATION JAVASCRIPT
✔ BONNES PRATIQUES
![Page 20: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/20.jpg)
© Store-Factory 2004-2014
• Spécifier très attentivement:– La navigation– Les éléments indispensables sur tous les devices
et ceux qui sont accessoires
• Définir dans le cahier des charges:– Les navigateurs supportés– Le nombre de types de comportements et les
valeurs de transitions– Les contraintes de poids des pages d’atterrissage
20
Bonnes pratiques en avant projet
![Page 21: © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques](https://reader036.vdocuments.net/reader036/viewer/2022070309/551d9da5497959293b8d6ce2/html5/thumbnails/21.jpg)
© Store-Factory 2004-2014
• TESTEZ !– Sur PC– Sur Mac– Sur toutes les versions d’IE à partir de la 8– Sur Chrome– Sur Safari– Sur Iphone & Ipad– Sur téléphone & tablettes Samsung / Nexus
• MESUREZ !– Nombre de pages vue / navigateur– Conversions …
• AMELIOREZ !
21
Bonnes pratiques en production: