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 SITES E-COMMERCE RESPONSIVE Aspects techniques et ergonomiques

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

3 © Store-Factory 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 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 Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES

6 © Store-Factory Mise en page principale du site

7 © Store-Factory 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 Ergonomie de la navigation

9 © Store-Factory Ergonomie de la navigation

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

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

12 © Store-Factory Un CSS par défaut et un autre conditionnel li screen and (max-width: 640px) {.li {display:block;clear:both;} } 12 Implémentation CSS : media query li

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

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

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

16 © Store-Factory (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 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 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 Aspects techniques et ergonomiques du responsive: GENERALITES ILLUSTRATIONS ERGONOMIQUES INTEGRATION CSS INTEGRATION JAVASCRIPT BONNES PRATIQUES

20 © Store-Factory 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 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