Développement web

Cours 08

Responsive

Capacité d'un site web à s'adapter à son environnement de visualisation

Le responsive ne concerne pas que la résolution

En opposition avec l'ancienne pratique qui consistait à faire plusieurs sites et à rediriger l'utilisateur selon le device détecté

Tester

Pour tester le site dans différentes conditions, nous pouvons utiliser le devtools de Chrome

Ouvrez le devtools avec CMD + ALT + I (Mac) ou F12 (Windows)

Et cliquer sur cet icon

En haut du viewport, vous avez accès à différentes options

  • Responsive permet de simuler des devices connus
  • 996 et 823 permettent de forcer une résolution
  • 50% permet de gérer le zoom
  • Online permet de simuler une connexion différente
  • permet de changer l'orientation

Il est possible d'accéder à plus d'options

Sur Mac, vous pouvez aussi installer Xcode et ainsi avoir accès à une application appelée "Simulator" qui permet de simuler des devices iOS fonctionnant avec le vrai OS.

Pendant la phase de développement, vous pouvez tester avec le devtools et des simulateurs, mais rien ne vaut un test en conditions avec de vrais devices.

META VIEWPORT

Par défaut, les navigateurs mobile et certains navigateurs tablette vont tenter d'adapter le design du site en dézoomant

Ce comportement va nous gêner car nous souhaitons adapter nous même le design

Introduite par Apple avec l'arrivée de l'iPhone, la balise meta viewport permet de gérer ce dézoom automatique


<meta name="viewport" content="">

Elle met à disposition plusieurs propriétés à mettre dans l'attribut content séparées par des virgules

  • width
    largeur de fenêtre viewport (300 | device-width)
  • height
    hauteur de fenêtre viewport (400 | device-height)
  • initial-scale
    zoom initial (1 | 0.3)

La meta viewport est capricieuse et on mets en général toujours la même valeur pour empêcher le scale et utiliser les proportion du viewport


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

Cette meta n'ayant jamais été proposée au W3C ce dernier à proposé sa propre version fonctionnant en CSS avec des propriétés similaires


@-ms-viewport {
   width:device-width;
   zoom:1;
   user-zoom:fixed;
}

@viewport {
   width:device-width;
   zoom:1;
   user-zoom:fixed;
}

N'est pratiquement supportée que par IE

⚠️ Chrome peut décider d'ignorer la meta viewport si le contenu dépasse horizontalement de la page

Reset

Par défaut, les navigateurs proposent une feuille de style de base appellée User-Agent-Stylesheet

  • Padding sur le body
  • Marge sous un paragraphe
  • Font par défaut
  • Etc.

Cette feuille de style initial varie selon le navigateur

Il faudrait pouvoir la réinitialiser afin d'avoir le même résultat quelque soit le navigateur

Il existe deux approches

  • Normalize CSS : Tente de corriger les différence entre les navigateurs en assumant un style particulier
  • Reset CSS : Tente de tout remettre à 0

Les deux approches sont intéressantes, mais nous allons partir sur un reset CSS

Plus d'infos:
elad.medium.com/the-new-css-reset-53f41f13282e

Le plus connu des reset CSS

⚠️

Le reset CSS doit être ajouté avant votre CSS et dès le début de l'intégration

Détection

Il peut arriver qu'on ait besoin de détecter quelles features sont supportées par le device

Détecter ces features manuellement prendrait beaucoup de temps et on risquerait de faire des erreurs

La librairie Modernizr permet de le faire facilement

  • Aller sur la page de téléchargement
  • Choisir les features que l'on souhaite détecter
  • Cliquer sur BUILD
  • Cliquer sur Download de la ligne Build
  • Rajouter le JS dans la page, à l'intérieur du <head>

Modernizr va rajouter des classes dans la balise <html>

Ces données seront aussi accessible en JS

Icons

Chaque site à besoin d'icônes (et pas que le favicon)

Les icônes peuvent apparaître dans les favoris, sur la home du smartphone, dans l'onglet, sur la touch bar, etc.

Le site Real Favicon Generator permet de les générer facilement

  • Uploader une image 260x260 minimum
  • Définir les différentes options mises à disposition
  • Générer
  • Télécharger le Favicon package et le placer avec les ressources du site
  • Récupérer le code HTML et l'ajouter dans la balise <head>

Media queries

Technique permettant d'adapter la feuille de style en fonction du périphérique et de ses différents critères

Peut-être appliquée de 3 façons différentes :

En HTML


<link rel="stylesheet" href="smallscreen.css" media="condition"/>

En CSS


@media condition
{
    /* Mon CSS */
}

En Javascript


if(window.matchMedia('condition').matches)
{
    /* Mon JS */
}

En général, on utilise la solution CSS

Anciens critères (CSS2)

  • print
  • screen
  • tv
  • ...

Nouveaux critères

  • aspect-ratio
  • width
  • height
  • orientation
  • pixel-ratio
  • device-*
  • min-*
  • max-*
  • ...

Exemples simples


@media (width: 700px) { }

@media (min-width: 700px) { }

@media (min-device-width: 700px) { }

@media (min-width: 700px) and (max-width: 1000px) { }

@media (min-device-pixel-ratio: 1.5) { }

@media tv and (orientation: portrait) { }

@media screen { }

@media print { }

Exemple avec préfixe


@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
{

}

Media query robuste pour tester un pixel ratio supérieur ou égal à 2


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{

}

Compatibilité

http://caniuse.com/#feat=css-mediaqueries

Exemples

Événements

Si vous avez développé le site pour du desktop, vous avez probablement écouté des événements tels que click, mousemove, keydown, etc.

Malheureusement, beaucoup d'événements ne fonctionneront pas de la même manière sur des devices touch

Il faudra donc utiliser des événements similaires mais compatibles : touchstart, touchmove, touchend, deviceorientation, etc.


window.addEventListener('touchmove', (_event) =>
{
    console.log(_event.touches[0].clientX, _event.touches[0].clientY)
})

window.addEventListener('mousemove', (_event) =>
{
    console.log(_event.clientX, _event.clientY)
})

Lorsque vous simulez un device touch avec le dev tools de Chrome, celui-ci va aussi simuler les événements de touch à la place des événements de souris

Il est aussi possible de simuler l'orientation du device en faisant ESC, en allant dans l'onglet Sensors et en activant l'orientation


window.addEventListener('deviceorientation', (_event) =>
{
    console.log(_event.alpha)
    console.log(_event.beta)
    console.log(_event.gamma)
})

Doit-on faire des maquettes reponsives ?

Faire un site responsive concerne à la fois la créa et le développement

  • Soit le créa s'y connait bien en front et prépare des maquettes responsive
  • Soit le dev est bon en créa et improvise le responsive

Dans tous les cas, mettez vous d'accord dès la conception

Mobile first ou desktop first ?

Le mobile first implique de faire les créas et le développement en commençant par les versions mobiles puis en s'occupant des autres devices par la suite

Cette pratique permet de s'assurer d'avoir une expérience optimisée pour le device le plus contraignant pour ensuite s'occuper des devices plus flexibles et moins limités

Cette tendance vient des problèmes de performance et d'ergonomie des smartphones, mais aussi des statistiques d'utilisation

Le mobile first présente aussi comme désavantage une dégradation de la version desktop

Bien qu'optimisé, le site aura tendance à être inutilement simple, vide et sans immersion sur desktop

Du coup, mobile first ?

Cela dépend

  • Quelle est la région ciblée ?
  • Quel est l'utilisateur ciblé ?
  • Dans quel cadre le site va-t-il être utilisé ?
  • Est-ce que c'est un site de contenu ou expérienciel ?
  • Est-ce que le développeur saura faire un site optimisé mobile en partant du desktop ?

Aller plus loin

Images

Grâce au responsive, on peut avoir une même page qui fonctionne sur mobile et desktop sauf que les images chargées sont les mêmes

Il serait dommage de charger une énorme image prévue pour le desktop sur du mobile

srcset

L'attribut srcset d'une balise <img> permet de définir plusieurs sources et de laisser le navigateur choisir


<img
    width="100%"
    src="image-test-1280.png"
    srcset="image-test-320.png 320w,
            image-test-640.png 640w,
            image-test-1280.png 1280w"
>

Chaque source est accompagnée de critères tels que sa largeur afin de donner des informations au navigateur sans qu'il ait à la télécharger

Compatibilité

http://caniuse.com/#feat=srcset

picture

La balise <picture> est une autre solution similaire sauf qu'il est nécessaire de spécifier soi-même les conditions


<picture>
    <source srcset="image-test-320.png" media="(max-width:320px)">
    <source srcset="image-test-640.png" media="(max-width:640px)">
    <source srcset="image-test-1280.png" media="(min-width:641px)">
    <img src="image-test-320.png" width="100%">
</picture>

Compatibilité

http://caniuse.com/#feat=picture

Aller plus loin

Quels devices supporter ?

Tout dépend de la cible du site

Si vous travaillez sur un site déjà existant, analysez les statistiques de visites pour voir quels devices sont les plus utilisés

Si vous travaillez sur un site nouveau, analysez les statistiques d'utilisation des visiteurs ciblés (https://gs.statcounter.com/)

S'il s'agit d'un portfolio, ne vous embêtez pas trop

S'il s'agit d'un e-commerce, faites de votre mieux

Si vous travaillez pour un client, assurez vous d'avoir précisé le scope de compatibilité dans le devis

Conclusion

Rendre votre site responsive est une priorité

Prévoyez-le en amont et dans le budget

Testez sur plein de devices différents