SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques
Aspects techniques et ergonomiques du responsive: ✔ GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES 2
Les objectifs du responsive en e-commerce : 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
Les écueils conceptuels fréquents: 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…)
Aspects techniques et ergonomiques du responsive: GENERALITES ✔ ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES 5
Mise en page principale du site
Trop d’informations difficiles à hierarchisée pour l’internaute Analyse critique 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
Ergonomie de la navigation
Ergonomie de la navigation
Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES ✔ INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES 10
Modèle de boite en relatif Implémentation CSS : comportement standard Modèle de boite en relatif li {float:left;} li li li li li li li li
Un CSS par défaut et un autre conditionnel Implémentation CSS : media query Un CSS par défaut et un autre conditionnel li {float:left;} @media screen and (max-width: 640px) { .li {display:block;clear:both;} } li li li li li li li li
Dans la feuille de style de base Dans une feuille de style externe Implémentation des media query 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
Implémentation html (multi-navigateurs) <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]--> <link rel="stylesheet" href= "oldie.css" media="all"> <![endif] --> </head>
Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS ✔ INTEGRATION JAVASCRIPT BONNES PRATIQUES 15
Détection largeur en javascript (sur évènements onload –resize - orientationchange) responsive=801; smallDevice = true; bigDevice= false; if (document.body.clientWidth > responsive) { smallDevice = false; bigDevice= true; }
Action sur les comportements en javascript 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 …
Le recours à des framework comme Jquery peut poser des problèmes : Framework javascript 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
Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT ✔ BONNES PRATIQUES 19
Spécifier très attentivement: Bonnes pratiques en avant projet 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
Bonnes pratiques en production: 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 !