La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

© Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques.

Présentations similaires


Présentation au sujet: "© Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques."— Transcription de la présentation:

1 © Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques

2 © Store-Factory 2004-2014 2 Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES

3 © 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 lenvironnement technique en ayant une solution unique quel que soit le périphérique => CODE HTML UNIQUE 3 Les objectifs du responsive en e-commerce :

4 © Store-Factory 2004-2014 Sintérésser au comportement au passage de la souris. Oublier quun écran diphone classique en vertical ne peut afficher que 330px (sans lascenceur) 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:

5 © Store-Factory 2004-2014 5 Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES

6 © Store-Factory 2004-2014 6 Mise en page principale du site

7 © Store-Factory 2004-2014 Trop dinformations difficiles à hierarchisée pour linternaute 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 lensemble => Simplifier la mise en page sur des logiques horizontales 7 Analyse critique

8 © Store-Factory 2004-2014 8 Ergonomie de la navigation

9 © Store-Factory 2004-2014 9 Ergonomie de la navigation

10 © Store-Factory 2004-2014 10 Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES

11 © Store-Factory 2004-2014 Modèle de boite en relatif li {float:left;} 11 Implémentation CSS : comportement standard li

12 © 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 li

13 © 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 dinfo sur http://www.alsacreations.com/article/lire/930- css3-media-queries.htmlhttp://www.alsacreations.com/article/lire/930- css3-media-queries.html 13 Implémentation des media query

14 © Store-Factory 2004-2014 TEST 14 Implémentation html (multi-navigateurs)

15 © Store-Factory 2004-2014 15 Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES

16 © 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

17 © Store-Factory 2004-2014 On peut ensuite avec un simple test dans le code avoir des comportements complétements différents dun mode à lautre : -ajout évenement -ajout code html -modification de style … 17 Action sur les comportements en javascript

18 © 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 laffichage (sliders, menus …) -De rapidité dexecution sur des terminaux peu rapides -De rationalité de développement : -Inutile de faire télécharger une bibliothèque complète si on nen utilise quune 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

19 © Store-Factory 2004-2014 19 Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES

20 © 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 datterrissage 20 Bonnes pratiques en avant projet

21 © Store-Factory 2004-2014 TESTEZ ! – Sur PC – Sur Mac – Sur toutes les versions dIE à 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:


Télécharger ppt "© Store-Factory 2004-2014 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques."

Présentations similaires


Annonces Google