Le responsive web design (ou site web adaptatif) est un concept qui a pour but d’offrir la meilleure expérience utilisateur lors de la consultation d’un site web en limitant des manipulations quel que soit le terminal utilisé (poste de bureau, tablette, téléphone, etc…). Ainsi, un même site utilisera un maximum d’espace libre sur l’écran de l’ordinateur de bureau pour éviter les défilements horizontaux ou verticaux et proposera un affichage sans défilement horizontal ni la nécessité de zoomer sur un téléphone mobile. En résumé, le contenu s’adapte au contenant :

Par Stéphanie Walter

Sommaire

Introduction

Il est possible de respecter ces principes quand on conçoit et réalise un site Web. Cependant, cela nécessite une très bonne connaissance du HTML, CSS, Javascript et des différents navigateurs web mais il faut également posséder de nombreux terminaux avec toutes sortes d’écrans, systèmes d’exploitation et butineurs !

Pour ceux qui n’ont pas toutes des compétences ou n’ont pas le temps de se pencher sur les nombreuses problématiques techniques que le responsive web design implique, il existe des frameworks RWD. Sans tous les lister (comparatif sur 10 frameworks RWD), je souhaitais vous présenter rapidement Twitter Bootstrap. C’est à priori le plus connu, le plus utilisé et il est distribué sous la licence Open Source d’Apache.

Que propose Bootstrap ?

  • un système de grille sur 12 colonnes
  • du HTML 5 et CSS 3
  • une normalisation du navigateur
  • un support cross-browser
  • une documentation très complète
  • …

Comment l’installer ?

Il est possible de télécharger tous les fichiers nécessaires (minifiés ou non) pour les déposer sur votre serveur ou bien d’utiliser un CDN. Tout est très bien expliqué sur leur Getting started. Une fois installé, vous n’avez plus qu’à partir de l’un des templates donnés en exemple pour commencer sur une bonne base.

Comment l’utiliser ?

Au cours de ma courte expérience avec Bootstrap, j’ai pu identifier 4 grandes notions :

  • les grilles : permettent d’organiser le contenu sur la page et de définir comment il va s’afficher selon la taille résolution de l’écran
  • le CSS : défini le style utilisé pour afficher des éléments simples (comme les formulaires par exemple)
  • les composants : propose des éléments de plus haut niveau (pagination, menus, alertes, …)
  • le JavaScript : fourni un ensemble de plugins jQuery afin de proposer encore plus des éléments interactifs de haut niveau

Bootstrap permet également de vous générer votre propre version personnalisée de leur framework. Cette personnalisation consiste à choisir quel composant intégrer (pour réduire sa taille) et à paramétrer les valeurs par défaut de ces derniers.

Premier retour d’expérience

Je viens de l’intégrer sur un site qui n’a pas été pensé pour le RWD et qui n’avait pas vraiment de réel design. Il doit être constitué d’une trentaine de type de page et donc d’exactement 40 templates HTML (côté serveur). En 5 soirées (soit un peu moins de 2 jours de travail), j’ai pu :

  • prendre en main Twitter Bootstrap (grâce à la documentation très complète)
  • modifier tous les templates pour soit réutiliser le CSS de Bootstrap, soit remplacer les éléments HTML par des composants Bootstrap (pour obtenir un rendu bien plus professionnel)
  • porter quelques scripts Scriptaculous en jQuery (afin résoudre quelques conflits de cohabitation entre ces deux frameworks JS)
  • offrir enfin un site avec du RWD (tout en gardant le design original)

J’ai vraiment été bluffé par la simplicité et le rendu final. Je pense même écrire très prochainement un article sur le avant/après Twitter Bootstrap avec des captures d’écran pour illustrer le tout.

Maintenant, il me reste 3 points à explorer ou approfondir :

  • optimiser quelques affichages en version mobile (oui je n’ai pas respecté le « mobile first » mais je partais d’un existant)
  • utiliser les plugins jQuery pour proposer les effets plus sympas
  • vérifier les impacts en terme de performance sur le site (taille des pages, validation du HTML, de la structure des pages, …)

Conclusion

Twitter Boostrap permet à n’importe qui ayant des notions de base en HTML/CSS/JavaScript de réaliser un site web avec un design adaptatif de qualité. Avant de vous lancer tête baissée dans l’aventure du RWD, il faut également en connaitre les limitations et les inconvénients.

A vos butineurs et vos terminaux !

https://blog.lecacheur.com/wp-content/uploads/2014/02/bs-docs-twitter-github1.pnghttps://blog.lecacheur.com/wp-content/uploads/2014/02/bs-docs-twitter-github1-150x150.pngSeBDéveloppementErgonomiecss 3,html 5,javascript,responsive web designLe responsive web design (ou site web adaptatif) est un concept qui a pour but d'offrir la meilleure expérience utilisateur lors de la consultation d'un site web en limitant des manipulations quel que soit le terminal utilisé (poste de bureau, tablette, téléphone, etc...). Ainsi, un même site utilisera un...Un blog, c'est un blog !