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

© 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


• 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 :


• 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:



GENERALITES

✔ ILLUSTRATIONS ERGONOMIQUES

INTEGRATION CSS


BONNES PRATIQUES


Mise en page principale du site


• 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


Ergonomie de la navigation



GENERALITES


✔ INTEGRATION CSS


BONNES PRATIQUES


Modèle de boite en relatif

li {float:left;}11

Implémentation CSS : comportement standard

lili

lili

lili lili lili

lili lili lili


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


• 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

<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" />

</head>14

Implémentation html (multi-navigateurs)



GENERALITES


INTEGRATION CSS

✔ INTEGRATION JAVASCRIPT

BONNES PRATIQUES


(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


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


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



GENERALITES


INTEGRATION CSS


✔ BONNES PRATIQUES


• 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


• 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:

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

Documents

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