09 - design adaptatif

Contenu de la section <head>

Balises essentielles

  • Bien que la section <head> soit optionnelle en html5 il est conseillé de l’avoir sur toutes nos pages Web.

  • La section <head> est un conteneur de metadonnées, c’est-à-dire, qu’elle décrit les données qui seront contenues dans la page.

  • Les balises essentielles ont étés couvertes dans un autre chapitre: <title>, <style>, <meta> et <link>

Balises descriptives

  • On parle de balises descriptives, mais en fait il s’agit d’une seule balise avec des attributs différents qui servent à décrire la page, l’auteur et le contenu. (voir section suivante)

  • Balise pour la page Web adaptative

  • La balise fenêtre d’affichage sera utile pour définir une page adaptative (responsive) (voir plus loin)

Balise descriptive

Il s’agit de la balise <meta>

Précision de l’encodage de caractères: <meta charset="UTF-8">

Description du contenu de la page Web: <meta name="description" content="Mon texte descriptif">

Définition des mots clés utilisés par les moteurs de recherches: <meta name="keywords" content="Biscuits, chocolat">

Définition de l’auteur de la page Web: <meta name="author" content="Axel Seguin">

La fenêtre d’affichage

Afin que nos pages puissent s’adapter à la fenêtre d’affichage il faut définir la largeur en utilisant l’option viewport de la balise <meta>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Source: https://www.w3schools.com/css/css_rwd_viewport.asp

  • Sans la balise :

Sans Sans

  • Avec la balise

Avec Avec

Images adaptatives

Les images sur la page utilisant le viewport seront agrandies pour prendre toute la largeur de la page.

Notez pour que l’image prenne sa largeur normale il faut ajouter l’attribut CSS width:100% comme ceci:

<img src="img.jpg" style="width:100%;">

Notez pour que l’image puisse être réduite si la fenêtre d’affichage est petite on utilisera max-width. Elle prendra 100% si la fenêtre est assez grande:

<img src="img.jpg" style="max-width:100%;">

Choix de l’image

On peut afficher plusieurs images différentes en fonction de la largeur de la fenêtre.

<picture>  
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Texte adaptatif

Dans une définition CSS il est possible de définir la taille du texte en fonction de la largeur de l’écran.

<h1 style="font-size:10vw">Allo</h1>

1vw signifie 1% du viewport, 10vw est 10%

Media query

Exemple :

<style>
  .gauche, .droite {  
    float: left;  
    width: 20%; 
  }
  .main
  {  
    float: left;  
    width: 60%;
  }
@media screen and (max-width: 800px)
  {
    .gauche, .main, .droite {
      /* un au-dessus de l'autre */
      width: 100%;
    }
  }
</style>