H2 - P2019

Développement web

Cours 08 - 2015-11-09

github : https://github.com/brunosimon/hetic-p2019
site : http://bruno-simon.com/hetic/p2019/
contact : bruno.simon@hetic.net

Responsive

Capacité d'un site web à s'adapter aux différents devices

Il s'agit du même site, mais qui change d'aspect et de fonctionnement selon le device utilisé

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é

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 faire cela

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

width
largeur de fenêtre viewport (300px | device-width)
height
hauteur de fenêtre viewport (400px | device-height)

initial-scale
zoom initial (1 | 0.5)
minimum-scale
zoom minimum (1 | 0.5)
maximum-scale
zoom maximum (1 | 0.5)
user-scalable
autoriser ou non l'utilisateur à zoomer (yes | no)

Empêcher le zoom initial du navigateur

et empêcher l'utilisateur de zoomer

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

Reset

Par défaut, les navigateurs proposent une feuille de style de base (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 pour avoir le même résultat quelque soit le navigateur

Il existe plusieurs CSS dont c'est le but

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

Détection

Il peut arriver qu'on ait besoin de détecter quelles sont les capacités du device

Est-ce que c'est un écran tactile
Est-ce que le navigateur supporte le WebGL
Est-ce que le navigateur supporte les transitions
...

Détecter manuellement prendrait beaucoup de temps

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

Fast click

Sur de nombreux devices ayant des écrans tactiles, il faut attendre un certain temps (environ 300ms) avant qu'un tap soit pris en compte

La librairie FastClick permet de réduire ce temps


<script type='application/javascript' src='fastclick.js'></script>

<script>
    if('addEventListener' in document)
    {
        document.addEventListener('DOMContentLoaded',function() {
        FastClick.attach(document.body);
        },false);
    }
</script>

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, etc.

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

Uploader une image 260x260
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


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

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 print

Exemple avec préfixe

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

Exemple avec only screen

Par défaut, les navigateurs non compatibles vont télécharger le CSS
Pour éviter cela, il faut démarrer la condition par only screen

@media only screen and (min-width:700px)

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

Exemples

Treehouse : http://teamtreehouse.com

Elysée : http://www.elysee.fr

JR & associée : http://www.jr-associee.com

procéssus

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

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

srcset

L'attribut srcset d'une balise <img> permet de définir plusieurs sources accompagnées de leurs critères


<img
    src="mon-image.jpg"
    srcset="mon-image.jpg 1x,
            mon-image-320.jpg 320w 1x,
            mon-image-640.jpg 320w 2x"
    width="850"
    height="475"
>

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

Plus d'infos

picture

La balise <picture> est une autre solution similaire


<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>

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

Polyfill

Plus d'infos

Conclusion

Rendre votre site responsive est une priorité

Prévoyez-le en amont et dans le budget

Testez sur plein de devices différents