Module CSS : Responsive Web Design

Formation : Module CSS : Responsive Web Design

Découverte du Responsive Web Design

Type :

Catégorie :

Durée :

Public visé :

- Web designers ayant en charge la création d’un site Internet optimisé pour des supports de tout type (Ordinateurs, tablettes ou smartphones)

Objectifs :

- Découvrir les techniques nécessaires à la mise en page de sites web adaptés à tout type de support

Pré-requis :

Aucun

Programme :

1- Le web : rappel des bases
- États des lieux : la transition HTML4 vers HTML5, la diversité des navigateurs et des moteurs de rendu, des périphériques et des terminaux.
- Respect des bonnes pratiques : la sémantique, le respect des normes et la validation W3C.
- Rétrocompatibilité : le concept de dégradation gracieuse, limites de la prise en compte des anciens navigateurs.
- Les sélecteurs CSS standards et évolués (CSS2.1 et CSS3)
- Mise en page : le modèle de boîte, unités absolues (pixel) ou relatives (em et %).
- Multicolonnage : design fixe, élastique ou liquide ?

2- Le web mobile : le point sur la situation
- Définition du RWB (Responsive Web Design).
- Conception d’un site : Desktop first ou Mobile first ?
- Mise en page fluide : créer des pages fluides et accessibles.
- Optimiser un site pour le mobile : Penser « léger », compression d’images et utilisation de sprites.

3- Prendre en compte la taille d’un mobile
- Les résolutions des principaux périphériques du marché.
- Affichage portrait et paysage.
- Cibler la taille d’un écran : surface réelle (screen width) ou surface déclarée (device width).
- Le Viewport : correction de l’affichage.

4- Le module CSS3 Media Queries
- Spécifier des conditions avec Media Queries
- L’attribut media : all, screen, print , handled…
- Les opérateurs logiques : and, only, et not
- Les critères : width, height, resolution…

5- Mise en page selon la spécification CSS2 .1 : la stabilité
- Éléments en ligne et éléments de type bloc.
- Le positionnement : static, relative, fixed et absolute).

6- Mise en page selon la spécification CSS3 : l’avenir
- Compatibilité avec les anciens navigateurs.
- Le module Flexbox.
- Le module Multicolumn.

7- Ressources et actualités sur le sujet
- Resets , librairies et frameworks en libre accès (HTML5shiv, Modernizr)
- Site et outils disponibles sur le web : préfixeurs css, débugeurs

Prix :

Prix intra-entreprise :

Si vous décidez de suivre cette formation en auto-financement, vous bénificiez d'une remise de 10% sur le prix.

Date de mise à jour : 05/09/2022