Développement web il3

Responsive Web Design

Conception de sites web adaptatifs

Site adaptatif ?

• Surfer depuis : PC, mobiles, tablettes, tv, …
• UX : navigation avec un minimum de zoom, pan, scroll
• S’adapter aux spécifités des appareils
  • orientation
  • taille caractères
  • modes d’interaction (ex: tactile, hover, …)
  • …
• 1 seul site à gérer : m.cool.com ni de cool.com/mobile
• Le même contenu pour tous
• Souvent basé sur la largeur de l’écran
• CSS3
• Responsive Web Design (1), Exemple

Techniques

• Media queries : Taille de l’écran (ou sortie)
• UNITES RELATIVES
• Fonts : Dimensions en em
• Fluid Grids : Disposition et taille des éléments en %
• Flexible images (and media) : Taille des médias en %
• Autres considérations
  • Adaptatif avec grilles fixes
  • Performances : tps chargement, requêtes inutiles, …
  • Transitions CSS
  • …
• Exemple

Media Queries

• media type : all, screen, print, tv, braille, handheld, ...

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />

• media query
  1. dans élément link

  <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" 
  href="style800.css" />

  2. dans une feuille de style

      #nav {float: right;}
              #nav ul {list-style: none;}
          @media screen and (min-width: 400px) and (orientation: portrait)
              {
                      #nav li {float: right; margin: 0 0 0 .5em; border:1px solid #000000;}
              }
          @media screen and (min-width: 800px)
              {
                  #nav { width: 200px; }
                     #nav li {float: left; margin: 0 0 0 .5em; border: none;}
              }

  3. Règle CSS import

      @import url(style600min.css) screen and (min-width: 600px);

Media Queries

    width, height, device-width, device-height, orientation, aspect-ratio, 
    device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

• Règles CSS selon medium (souvent min-, max-width)
• Opérateurs : only, not, and
• Au moins 3 layouts : mobile, tablet, desktop
• Resolution breakpoints : 320, 480, 600, 768, 1024, 1200px
• Souvent ces règles sont utilisées pour :
  • agrandir la taille du texte
  • agrandir la taille des zones cliquables (utilisation au doigt)
  • faire passer le contenu sur une seule colonne
  • masquer ou afficher des éléments spécifiques
  • ajuster les dimensions et marges
• Attention à l’ordre de chargement

Meta Tag viewport

• Introduit pour iPhone, puis standard de fait
  • Par défaut, l’affichage est réduit (980px affichés sur écran 320px)
  • Meta tag viewport permet de changer ce ratio
• viewport : display area ≠ rendering surface
• Mobiles : viewport > écran (iphone 3 : v:980 / é:320)
• Media queries comparent au viewport
• Mise à jour du viewport à la taille de l’écran nécessaire :

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

Résultat = Cible / Contexte

Texte

• Texte redimensionnable : em pour les polices
• 1rem : font-size:100% dans élément html (16px/défaut)
• 1em : font-size:100% dans élément courant
• Conversion px -> em : result = target/context
  • ne pas arrondir
  • laisser le rapport en commentaire

Fluid Grids

• Layout basé sur une grille en pixel
• Conversion px -> % : result = target/context
  • ne pas arrondir
  • laisser le rapport en commentaire
• Appliqué au style des divs :

width, margin, padding, background-position, ...

Responsive Images

• Nouveautés de HTML 5
  • Eléments <picture>, <source>
  • Attributs srcset et sizes
• Besoins
  • Écrans haute densité : srcset
  • Taille variable : srcset et sizes
  • Substitution et modification layout : <picture>, <source>
  • Choix formats de fichiers <picture>
• Différences entre <picture> et srcset
• Exemple en français

Flexible images

• Eviter qu’une image ne déborde de son conteneur
  • La réduire

  img, embed, object, video{ max-width: 100%; }

  • La découper

    .feature { overflow: hidden; }
    .feature img { display: block; max-width: auto; }

• Pas de standard pour servir différentes tailles de fichier
• Quelques idées recensées par Smashing Magazine (2)

Outils

• Tester
  • Simulateur mobile des devtools, largeur browser
  • bookmarklet pour afficher les media queries
  • mais surtout tester sur mobile
• Et Après ? MOBILE FIRST, OFFLINE FIRST, PWA
• framework ou from scratch ?

Références

• Exemples
  • Site support du livre d’Ethan Marcotte
  • mediaqueri.es
  • thenextweb
  • designshack
• Plus loin…
  • Généralités
  • viewport et media queries
  • D’autres techniques, liste de Smashing magazine (2)
  • Améliorer la performance
  • Making sites more responsive, responsibly
    • Workshop Pierre Spring 26.02.13

Pratique

• Tester les exemples sur un mobile
• Comprendre les sources
• Présentation adaptative de votre équipe de projet