Upload
blancheflor-montagne
View
103
Download
0
Embed Size (px)
Citation preview
© Store-Factory 2004-2014
SITES E-COMMERCE RESPONSIVEAspects techniques et ergonomiques
© Store-Factory 2004-2014 2
Aspects techniques et ergonomiques du responsive:
✔ GENERALITES
ILLUSTRATIONS ERGONOMIQUES
INTEGRATION CSS
INTEGRATION JAVASCRIPT
BONNES PRATIQUES
© 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 :
© 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:
© Store-Factory 2004-2014 5
Aspects techniques et ergonomiques du responsive:
GENERALITES
✔ ILLUSTRATIONS ERGONOMIQUES
INTEGRATION CSS
INTEGRATION JAVASCRIPT
BONNES PRATIQUES
© Store-Factory 2004-2014 6
Mise en page principale du site
© 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
© Store-Factory 2004-2014 8
Ergonomie de la navigation
© Store-Factory 2004-2014 9
Ergonomie de la navigation
© Store-Factory 2004-2014 10
Aspects techniques et ergonomiques du responsive:
GENERALITES
ILLUSTRATIONS ERGONOMIQUES
✔ INTEGRATION CSS
INTEGRATION JAVASCRIPT
BONNES PRATIQUES
© 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
© 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
© 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
© 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)
© Store-Factory 2004-2014 15
Aspects techniques et ergonomiques du responsive:
GENERALITES
ILLUSTRATIONS ERGONOMIQUES
INTEGRATION CSS
✔ INTEGRATION JAVASCRIPT
BONNES PRATIQUES
© 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
© 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
© 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
© Store-Factory 2004-2014 19
Aspects techniques et ergonomiques du responsive:
GENERALITES
ILLUSTRATIONS ERGONOMIQUES
INTEGRATION CSS
INTEGRATION JAVASCRIPT
✔ BONNES PRATIQUES
© 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
© 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: