Responsive web design : les techniques essentielles de mise en page - E-learning

Objectifs de la formation

• Apprendre les techniques du Responsive Web Design
• Créer un site web capable de s'adapter à la volée à la taille de votre écran

Public visé

Cette formation s’adresse aux développeurs de sites web.

Durée de formation

02h15

Période de formation

90 jour(s)

Description / contenu

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