Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
SITES E-COMMERCE RESPONSIVE
Aspects techniques et ergonomiques
2
Aspects techniques et ergonomiques du responsive:
✔ GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES 2
3
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
4
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…)
5
Aspects techniques et ergonomiques du responsive:
GENERALITES ✔ ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES 5
6
Mise en page principale du site
7
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
8
Ergonomie de la navigation
9
Ergonomie de la navigation
10
Aspects techniques et ergonomiques du responsive:
GENERALITES ILLUSTRATIONS ERGONOMIQUES ✔ INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES 10
11
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
12
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
13
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
14
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>
15
Aspects techniques et ergonomiques du responsive:
GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS ✔ INTEGRATION JAVASCRIPT BONNES PRATIQUES 15
16
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; }
17
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 …
18
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
19
Aspects techniques et ergonomiques du responsive:
GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT ✔ BONNES PRATIQUES 19
20
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
21
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 !
Présentations similaires
