Concevez des interfaces flexibles adaptées à tous les écrans
Cette formation vous aide à monter des pages web responsives qui sauront s’adapter à toutes les plateformes (cellulaire, tablette, desktop, laptop) utilisées par les internautes. Privilégier un site adaptatif permet de répondre à tous les usagers. Le responsive design utilise des grilles flexibles et des requêtes média pour assurer un design aussi portable et accessible que possible.
Est-ce pour vous ?
Intégrateurs, concepteurs et développeurs Web.
Préalables
Connaissance du langage HTML (cours WE106) et des feuilles de style (cours WE137). Familiarité avec les grilles CSS souhaitable.
Ce que vous saurez faire
- ✓ Créer des mises en page flexibles avec des grilles adaptatives et proportionnelles
- ✓ Utiliser les media queries pour adapter les styles selon les appareils et résolutions
- ✓ Intégrer des images et médias responsives pour une expérience optimale
- ✓ Exploiter les unités CSS modernes (vw, vh, rem) pour un design fluide
- ✓ Appliquer les principes du responsive design et de l’amélioration progressive
Contenu de la formation
- Techniques pour créer une grille flexible qui garde les proportions
- Insertion d’images et de médias flexibles
- Nouvelles unités de mesure CSS (vw, vh, vmin, vmax et rem)
- Requêtes médias pour ajuster les règles en fonction des caractéristiques de l’appareil
- Identification des points de rupture de résolution (resolution breakpoints)
- Insertion de scripts pour pallier les vieux navigateurs qui ne supportent pas les requêtes médias
- Application du principe de l’amélioration progressive
- Application des principes du Responsive Web Design pour les infolettres
- Exercice synthèse
📌 Informations pratiques
Nos formations sont offertes à Montréal ou Québec, en présentiel ou en classe virtuelle. Les dates et lieux sont précisés lors de votre choix de session ci-dessous. Si vous avez des questions, consultez notre FAQ.
