1h pour découvrir le

responsive design

et les sites web orientés mobile

Guillaume Denis - Pôle Numérique - Décembre 2014

Adresse de la présentation http://goo.gl/GU3Xoh

Motivation

  • 20% des recherches lancées sur google depuis mobile ou tablette (début 2014)
  • 30% du traffic global (Q2 2014)
  • 16% du traffic e-commerce pour 4% des revenus (Q2 2014)
  • Importance de la localisation du commerce de proximité (2013)
  • À vérifier par chacun (Google Analytics, piwik) !

Solutions (1/2)

  1. Applications mobiles
    • multiplication des technologies (web, iOS, Android)
    • ou PhoneGap (non natif)
    • différenciants par rapport à un site :
      • scénarios d'entrée : déploiement (au travers un store, installation), lancement (icône sur le bureau)
      • technique (si natif) : meilleure performance, fonctionnalités supplémentaires, éléments d'interface utilisateur identiques à ceux de l'OS
      • coûts ++

Solutions (2/2)

  1. Différentes versions du site = adaptatif côté serveur
  2. Site responsive = adaptatif côté navigateur
    • exemples : Le Figaro ou The Boston Globe
    • une seule version à développer et à gérer
    • une seule URL, partage plus efficace, recommandé pour le référencement
    • également intéressant pour les mails HTML

Le responsive
c'est quoi ?

Traduction et portée

  • Responsive design : site web adaptatif
    • Lisibilité, confort
    • Facilité de navigation
    • signification la plus répandue
  • Responsive experience : site web réactif
    • Temps de chargement, performance
    • Adapté aux interactions tactiles
  • → Expérience optimale de navigation sur tout support
    (pour un même contenu)

Les points-clef

  • Auto-adaptation à la taille de l'écran
    • Différentes mises en page des blocs d'information
    • Typographie
    • Navigation (souvent en différentes versions)
    • Avec modération : cacher des blocs d'information superflus
  • Optimisations
    • Écran tactile (ex : balayage entre photos)
    • Temps de chargement : travail sur les images, CSS, JS...
    • HTML5 : type de champ/clavier dans les formulaires, Flash, géolocalisation...

Les outils

pour un site web adaptatif

Pour tester

  • Rendu suivant différentes tailles d'écran : ici, là et là
    • Chrome Developer Tools, ou Firefox > Développement > Vue adaptative
    • ou simplement redimensionner son navigateur
    • ne vaut pas un test réel sur mobile ou tablette
  • Performances :
    • yslow
    • Audits dans Chrome Developer Tools
  • Analyse orientée référencement : woorank usage rapidement payant

Outils génériques

  • Connaître les tailles typiques d'écran
  • Boîte à idées
  • Papier, crayon
  • Frameworks CSS (socles de développement) et librairies
    • Twitter Bootstrap, ZURB Foundation, Pure.css, Skeleton, Toast et beaucoup d'autres
    • existent comme "thèmes" dans des CMS type Joomla ou Wordpress
    • reposent sur les Media queries CSS
    • gèrent les principaux problèmes de compatibilité entre navigateurs
    • certains intègrent les marqueurs d'accessibilité ARIA

Exemples

  • Mise en page selon typiquement 3 (ou 4) tailles : mobile, tablette, écran (et écran large). Exemples :
  • #1 grille fixe pile
  • #2 grille fluide pile
  • #3 grille A grille B
  • #4 retour à la ligne
  • cette présentation, adaptation de reveal.js pour mobile

Composants spécifiques

Perspectives

  • CSS flexbox
    • Plus de souplesse dans la mise en page
    • Possibilité de réordonner les blocs d'une grille suivant la taille de l'écran
    • Voir flexboxgrid
    • Pas supporté par Internet Explorer 9 et 10
  • HTML5 <picture>
    • Téléchargement de l'image à la meilleure taille, moins de bande passante
    • Seulement sur Chrome et Opera
  • Se tenir informé ( publicité)

Les techniques

pour un site web réactif

Performance

  • Pour améliorer le temps de chargement :
  • Compression d'image
  • Minification, concaténation : JS, CSS
  • Trier les parties inutiles : JS, CSS
  • CDN, cache et expiration, gzip
  • et beaucoup d'autres
  • → c'est le travail du développeur

Connaître les conditions d'utilisation

  • Détecter des conditions dégradées :
  • Infos données par le navigateur (Javascript) : batterie, information réseau, lumière ambiante (référence)
  • Toujours vérifier la disponibilité de ces fonctionnalités sur caniuse
  • Calculer le temps de rendu d'une page
  • Récupérer le User Agent (quel OS, quel navigateur ?)

S'adapter à des conditions dégradées

  • Anticiper :
    • Précharger certaines ressources (librairie JavaScript dédiée, localStorage, prefetch)
    • Cas extrême : mode hors-ligne mais site mis en favori (Application Cache, Service Worker)
    • Garder l'information utile à portée de clic (0 ou 1)
  • Gérer un mode dégradé :
    • Enlever les animations
    • Ne pas charger certaines ressources
    • Modifier le contraste...
    • → coûts ++

Conclusion

  • Autres solutions toujours à considérer suivant le cas d'usage (application native, site en différentes versions)
  • Ne pas perdre son identité visuelle malgré l'utilisation d'un framework CSS
  • Le plus dur : penser mobile (taille, écran, connectivité)
  • Utiliser un outil d'analyse des visites

Fin