Webschool du Jura - Webmobile - Rendre son site compatible avec les nouveaux usages du WEB

1. Rendre son site compatible avecRendre son site compatible avec
les nouveaux usages du WEBles nouveaux usages du WEB
Webschool de la CCI du Jura
24 mars 2014
par François Bonneville - ARICIA

2. Votre site WEB est-ilVotre site WEB est-il
« compatible » mobile ?« compatible » mobile ?
• Bannir les applications FlashBannir les applications Flash
– Non supportées par certains système IOS (Apple)Non supportées par certains système IOS (Apple)
• Vérifier l'efficience des mécanismesVérifier l'efficience des mécanismes
d'interactivitéd'interactivité
– Les menus « déployer - cliquer »Les menus « déployer - cliquer »
– La taille et le fonctionnement des formulairesLa taille et le fonctionnement des formulaires
– Eviter les popupsEviter les popups
• Ne pas avoir des pages trop largesNe pas avoir des pages trop larges

3. Concevoir un site WEB dédié mobile,Concevoir un site WEB dédié mobile,
bonne ou mauvaise idée ?bonne ou mauvaise idée ?
• Qu'est-ce qu'un site WEB dédié mobile ?Qu'est-ce qu'un site WEB dédié mobile ?
Exemple : http://m.haut-jura.comExemple : http://m.haut-jura.com
• AvantagesAvantages
– Ergonomie conçue spécifiquement pour les mobilesErgonomie conçue spécifiquement pour les mobiles
– Contenu pouvant être adapté à des visiteurs nomadesContenu pouvant être adapté à des visiteurs nomades

InconvénientsInconvénients
– Coût de création importantCoût de création important
– Maintenance parfois compliquée (2 sites à gérer)Maintenance parfois compliquée (2 sites à gérer)

4. Le "responsive design"Le "responsive design"
Le concept : ne plus de créer autant de pages qu'il yLe concept : ne plus de créer autant de pages qu'il y
a de famille de terminaux mais concevoir unea de famille de terminaux mais concevoir une
seule interface auto-adaptableseule interface auto-adaptable
Grâce à de nouvelles normes de développementGrâce à de nouvelles normes de développement
WEB :WEB :
• Media queries : règles conditionnelles pour styler uneMedia queries : règles conditionnelles pour styler une
page en fonction de la résolutionpage en fonction de la résolution
• Le concept de grille fluide : dimensionnement relatifLe concept de grille fluide : dimensionnement relatif
des différents blocs de la page.des différents blocs de la page.
• Images dimensionnées en unité relative, afin de prévenirImages dimensionnées en unité relative, afin de prévenir
un éventuel débordement du contenuun éventuel débordement du contenu

5. La bonne technique de conceptionLa bonne technique de conception
THINK MOBILE FIRSTTHINK MOBILE FIRST
Privilégier la construction d'une interface ergonomique pourPrivilégier la construction d'une interface ergonomique pour
terminaux mobilesterminaux mobiles
La contrainte d'un faible espace d'affichage force à épurerLa contrainte d'un faible espace d'affichage force à épurer
au maximum les éléments visiblesau maximum les éléments visibles
Ensuite enrichir l'interface pour les supports « bureau »Ensuite enrichir l'interface pour les supports « bureau »
Méthode très difficile à faire accepter aux graphistesMéthode très difficile à faire accepter aux graphistes

6. La bonne technique de conceptionLa bonne technique de conception
THINK MOBILE FIRSTTHINK MOBILE FIRST
Privilégier la construction d'une interface ergonomique pourPrivilégier la construction d'une interface ergonomique pour
terminaux mobilesterminaux mobiles
La contrainte d'un faible espace d'affichage force à épurerLa contrainte d'un faible espace d'affichage force à épurer
au maximum les éléments visiblesau maximum les éléments visibles
Ensuite enrichir l'interface pour les supports « bureau »Ensuite enrichir l'interface pour les supports « bureau »
Méthode très difficile à faire accepter aux graphistesMéthode très difficile à faire accepter aux graphistes