Accueil > Système d'Information - Informatique et Digital > Développement informatique > Langages du web > Responsive Web Design : Les techniques essentielles de mise en page

Responsive Web Design : Les techniques essentielles de mise en page

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
  • Formation nouvellement créée ou entièrement remaniée
  • 100% e-learning
  • A distance accompagné / A distance
  • 290 € (HT)
  • 2h30 de formation dont 30 min d'encadrement
  • Code: DEV002E

Programme Détaillé

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 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.
Cette formation s’adresse aux utilisateurs souhaitant 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.
Cette formation nécessite des bases en HTML et CSS
Cette formation s’adresse aux utilisateurs souhaitant 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.
Ce module a été conçu par un expert en didactique de l'informatique et de la psychologie d'apprentissage en ligne.
Ce module vous propose la consultation d’une vidéo d’une durée de 02 heures 15
Responsive Web Design : Les techniques modernes de mise en page
Cette formation s’adresse aux utilisateurs souhaitant 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.
  • 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 responsive

  • La 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 System

  • La 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 fluide

  • Les images responsives

    Le script Respond.js
    Le script picturefill.js
    Le script picturefill.js pour les images HD
    Les propositions d'avenir

  • Les 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 Pure

  • Mise 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

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 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.