Responsive web design : les techniques essentielles de mise en page - E-learning
Objectifs
- apprendre les techniques du Responsive Web Design
- créer un site web capable de s'adapter à la volée à la taille de votre écran
Programme Détaillé
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 grille différents.
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.
Responsive Web Design : Les techniques modernes de mise en page
Découvrir le Responsive Web Design
Le design web aujourd'hui
L'utilisation et la syntaxe des Media Queries
Où placer les requêtes de médias ?
La taille des écrans
Utiliser l'attribut viewport
Un exemple simple de site responsiveLa mise en page avec les grilles responsives
Les grilles responsives
La grille Simple Grid
Créer la mise en page avec Simple Grid
La grille Columnal
Créer la mise en page avec Columnal
Les images responsives avec Columnal
La grille Responsive Grid System
Créer la mise en page avec Responsive Grid SystemLa mise en page fluide
La mise en page et les images fluides
La mise en page fixe
Passer à la mise en page fluide
L'affichage de la mise en page fluideLes images responsives
Le script Respond.js
Le script picturefill.js
Le script picturefill.js pour les images HD
Les propositions d'avenirLes frameworks CSS
Utiliser les frameworks
Le framework Kube
Une grille de mise en page avec Kube
Un formulaire avec Kube
Le framework KNACSS
Une grille de mise en page avec KNACSS
Le framework Pure
Une mise en page blog avec PureMise en pratique : créer une page d'accueil responsive
Le framework UIkit
La maquette responsive
La structure de la mise en page
La structure de l'en-tête
La structure de la zone des trois activités
La structure de la zone de l'image centrale
La structure de la zone du bureau
La structure de la zone des sorties
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 grille différents.
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.
