L'objectif du Responsive Web Design est de créer des sites web dont la mise en page s'adapte automatiquement pour un affichage optimal quel que soit le type d'écran sur lequel il est affiché : écran d'ordinateur, de tablette ou de smartphone.

Dans cette vidéo de formation, nous allons commencer par découvrir ce qu’est le Responsive Web Design à travers l’utilisation des requêtes de média, (Media Queries en anglais) qui permettent de créer des feuilles de styles CSS parfaitement adaptées à chaque largeur d’écran souhaitée.

Nous allons ensuite utiliser des grilles de mise en page afin de créer des pages qui soient immédiatement responsives. Pour ce faire, nous utiliserons trois systèmes de grilles différentes.

Ensuite, nous apprendrons à passer d’une mise en page aux dimensions fixes à une mise en page fluide dont les dimensions vont s’adapter à la largeur de l’écran de diffusion.

Puis, à l’aide de JavaScript, nous insèrerons dans nos pages web des images également responsives.

Pour travailler plus rapidement, vous pourrez, en utilisant des frameworks CSS responsives, exploiter des librairies de styles CSS prêts à l’emploi et personnalisables pour concevoir vos mises en page responsives ; nous découvrirons trois de ces frameworks : Ulkit, Kube et Pure.

Pour terminer, nous mettrons en pratique toutes ces notions en créant une page d’accueil d’un site responsive avec le framework CSS UIkit.

Auteur(s)

Christophe Aubry
Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe Aubry est aujourd'hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur Dreamweaver, WordPress, Drupal, HTML et CSS, il reste au fait des nouveautés concernant la conception des sites Web, en effectuant une veille technologique régulière et en intervenant dans de nombreux forums.
Réf. ENI : VOWRWD