Aller au contenu principal

Responsive Web Design

Objectifs​

Comment adapter un site Web selon la taille de l'écran ?

Cours​

Responsive Web Design

Page Web dynamique

Responsive Web Design

https://upload.wikimedia.org/wikipedia/commons/0/09/Content-is-like-water.svg

https://commons.wikimedia.org/wiki/File:Content-is-like-water.svg

Responsive Web Design

  • Années 2000 : début de l'adaptation aux écrans (smartphones).

  • 2010 : Responsive Web Design (RWD) par Ethan Marcotte.

  • Objectif : meilleure expérience utilisateur (UX)

  • Lisibilité et navigation améliorées sur tous les écrans.

  • Trois composantes :

    • Media queries : règles css selon la largeur de l'écran @media (max-width: 600px) { ... }

    • Grille fluide : dispositions flexibles (nombre d'éléments par ligne)

    • Images flexibles : adaptatives (unités relatives)

Media Queries

https://public-images.interaction-design.org/literature/articles/materials/flTR2AEh0Xm8QMKevDdSR4x08XS9oDCs2FrMxpjj.jpg

https://www.interaction-design.org/literature/article/responsive-design-let-the-device-do-the-work

Media Queries


body {
  background-color: red;
}
@media (max-width: 1023px) {
  body {
    background-color: green;
  }
}
@media (max-width: 767px) {
  body {
    background-color: blue;
  }
}

Grille Fluide

https://public-images.interaction-design.org/literature/articles/materials/G3zDpec3Jd2BDmdKi0yafOC5R9BWxWMsLbvK3ayu.jpg

https://www.interaction-design.org/literature/article/responsive-design-let-the-device-do-the-work

Images flexibles

https://public-images.interaction-design.org/literature/articles/materials/iY3RkNGTG0oFEyKGmhFQgQ1x1jmgPz4bKXzis6Rf.gif

https://www.interaction-design.org/literature/article/responsive-design-let-the-device-do-the-work

Système de grille

https://upload.wikimedia.org/wikipedia/commons/3/33/Grid1aib.svg

https://commons.wikimedia.org/wiki/File:Grid1aib.svg

Système de grille

https://upload.wikimedia.org/wikipedia/commons/8/85/Grid2aib.svg

https://commons.wikimedia.org/wiki/File:Grid2aib.svg

Système de grille

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts/11-grid-inspector-12col-layout.png

https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts

Placer les éléments dans une grille de 12 colonnes

Système de grille

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts/11-responsive-areas.png

https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts

  • Adaptation des éléments selon la largeur de l'écran.

  • Main article area :

    • 12 colonnes sur petit écran.

    • 8 colonnes sur moyen et grand écrans.

  • Les éléments passent à la ligne suivante automatiquement.

Système de grille

https://cdn.hashnode.com/res/hashnode/image/upload/v1627409507896/dOhJg5KKw.gif

https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe

Bootstrap

  • Bootstrap : framework CSS rendu open source par Twitter en 2011.

  • Ensemble de styles CSS réutilisables.

  • Grille de 12 colonnes.


<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6">.col-12 .col-sm-6</div>
    <div class="col-12 col-sm-6">.col-12 .col-sm-6</div>
  </div>
  <div class="row">
    <div class="col-6 col-lg-3">.col-6 .col-lg-3</div>
    <div class="col-6 col-lg-3">.col-6 .col-lg-3</div>
  </div>
</div>

DOM


<html lang="en">
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>

DOM

https://allophysique.com/docs/nsi/html/images/DOM.png

https://allophysique.com/docs/nsi/html/page3/

F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.

Exercices​

DOM​

Dessiner le DOM de la page suivante :

<body>
  <h1 class="abc"></h1>
  <p></p>
  <p></p>
  <ul>
    <li class="test abc"></li>
    <li><img /></li>
  </ul>
  <p></p>
  <h1 id="abc"></h1>
</body>

Comparer avec DOM|CSS Visualizer.

Choisir une page de son projet-web et dessiner son DOM.

Comparer avec DOM|CSS Visualizer.

Formater du code​

Formater le code suivant pour qu'il soit correctement indenté :

<!DOCTYPE html><html><head><title>Document</title></head><body><h1>Page Web dynamique</h1><p>Lorem ipsum</p><ul><li>Élément 1</li><li>Élément 2</li></ul></body></html>
Solution
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Page Web dynamique</h1>
    <p>Lorem ipsum</p>
    <ul>
      <li>Élément 1</li>
      <li>Élément 2</li>
    </ul>
  </body>
</html>

Adapter un site Web​

Utiliser le système de grille de Bootstrap pour agencer les éléments comme demandé sur différentes tailles d'écran.

<div>A</div>
<div>B</div>
<div>C</div>

Du style :

<div class="row">
  <div class="col-1">
    <div>A</div>
  </div>
  <div class="col-1">
    <div>B</div>
  </div>
  <div class="col-1">
    <div>C</div>
  </div>
</div>

Utiliser codepen.io pour tester le résultat.

Pour tous les écrans :

svgbob

Solution
<div class="row">
  <div class="col-4">
    <div>A</div>
  </div>
  <div class="col-4">
    <div>B</div>
  </div>
  <div class="col-4">
    <div>C</div>
  </div>
</div>

Pour tous les écrans :

svgbob

Solution
<div class="row">
  <div class="col-3">
    <div>A</div>
  </div>
  <div class="col-6">
    <div>B</div>
  </div>
  <div class="col-3">
    <div>C</div>
  </div>
</div>

Pour tous les écrans :

svgbob

Solution
<div class="row">
  <div class="col-3">
    <div>A</div>
  </div>
  <div class="col-3">
    <div>B</div>
  </div>
  <div class="col-3">
    <div>C</div>
  </div>
</div>

Sur écran md et moins :

svgbob

Sur écran md et plus :

svgbob

Solution
<div class="row">
  <div class="col-6 col-md-12">
    <div>A</div>
  </div>
  <div class="col-6">
    <div>B</div>
  </div>
  <div class="col-12 col-md-6">
    <div>C</div>
  </div>
</div>

ou plus explicitement :

<div class="row">
  <div class="col-6 col-md-12">
    <div>A</div>
  </div>
  <div class="col-6 col-md-6">
    <div>B</div>
  </div>
  <div class="col-12 col-md-6">
    <div>C</div>
  </div>
</div>

Sur écran sm et moins :

svgbob

Sur écran entre sm et lg :

svgbob

Sur écran lg et plus :

svgbob

Solution
<div class="row">
  <div class="col-12 col-sm-6 col-lg-3">
    <div>A</div>
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <div>B</div>
  </div>
  <div class="col-6 col-sm-12 col-lg-3">
    <div>C</div>
  </div>
</div>

Références​

Dernière mise à jour le