TD6 – Responsive Design

Introduction

Les smartphones, les tablettes et tous les appareils de la mobilité demandent de repenser le web d’aujourd’hui. Concevoir un site ou une application Web s’adressant à tous ces médias n’est pas une tâche triviale. Voici un aperçu des nombreuses solutions existantes :

• Une solution en pur CSS. En effet, le CSS est le langage de base pour la mise en page des pages Web. Il est donc en constante évolution (CSS3 en cours d’élaboration) pour s’adapter aux nouveaux besoins.

• Coder deux sites en HTML/CSS : un pour les ordinateurs et un pour les smartphones (et un pour les tablettes ? et un pour les smartwatch ?). Exemple lemonde.fr et mobile.lemonde.fr.

• Des applications natives pour chaque système (Android, iOS, Windows Phone, …)

• L’utilisation de la puissance de Javascript pour faire des mises en page adaptatives.

• Faire le site en Flash (très mauvaise idée car il n’est plus supporté sur Android ni iOS).

Plus pour nous positionner dans cette jungle que par purisme, nous prendrons deux hypothèses de départ :

• “Il n’y a pas besoin d’applications pour cela !” : Pas besoin de faire du natif Android ou iOS.
• “Il n’y a pas besoin de faire deux sites web pour cela !” : On s’interdit de faire un site Web pour mobile et un pour ordinateur.

Nous adopterons dans ce TD une approche itérative, en rajoutant au fur et à mesure des contraintes pour arriver à ce qui se fait aujourd’hui dans le responsive design.

CSS2

Certaines propriétés n’ont pas attendu ni les nouveaux médias ni le CSS3 pour s’imposer aux développeurs. Elles prenaient déjà tout leur sens sur des sites particulièrement fournis et/ou sur des petits écrans 15 pouces.

Les pourcentages ‘%’

On peut commencer par exprimer toutes les tailles en relatif. C’est ce que nous avons déjà fait en utilisant des dimensions en %. Rappelez vous que la largeur d’un élément en display:block ou en display:flex se calcule par rapport à son containing block, c’est-à-dire son plus proche ancêtre block ou flex. Par défaut, les éléments en block ou flex prennent toute la largeur de leur containing block. Et si on fixe une largeur en pourcentage, ce sera relativement à la largeur du containing block.

Note : Si adapter les largeurs en pourcentage marche bien, ce n’est pas le cas des hauteurs. Cela est dû au fait que la largeur de la page est connue (c’est la largeur de la fenêtre d’affichage du navigateur) mais sa hauteur ne l’est pas encore… (puisque la page n’est pas encore affichée et que la hauteur va dépendre de la quantité de contenu). Autrement dit, la hauteur de la zone du navigateur où s’affiche la page (viewport height) n’est pas forcément la hauteur de la page ¹ (et c’est lié à la présence d’un ascenseur à droite pour descendre dans la page).

max-width et min-width

Les règles précédentes permettent d’avoir un rapport homogène, mais pas un rendu optimal :

• sur de petits écrans d’ordinateur, des éléments ne peuvent pas être correctement affichés (des images, des colonnes, …)
• sur de très grands écrans, le texte devient illisible : les yeux fatiguent à cause des lignes trop longues.

Pour contraindre les dimensions maximales et minimales, nous utiliserons max-width, max-height, min-width et min-height, qui prennent le même type de valeur que width et height.

Overconstraint

Mais que se passe-t-il quand on mélange min-width et des tailles en poucentage ? Prenons l’exemple suivant

<div style="display:flex">
	<div style="width:50%;max-width:400px;">
		Div1
	</div>
	<div style="width:50%;">
		Div2
	</div>
</div>

qui s’affiche comme suit

Nous allons utiliser display:flex pour mieux mélanger les tailles relatives et les contraintes min-width/max-width. Nous avions déjà vu les règles de la colonne de gauche de cette super page sur FlexBox ; c’était celles qui s’appliquaient au parent. Nous allons maintenant nous pencher sur la colonne de droite qui s’applique aux balises enfants. Regardez particulièrement les propriétés flex-shrink (valeur par défaut 1), flex-grow (valeur par défaut 0). Pour l’instant, nous ne toucherons pas à flex-basis (qui gardera donc son comportement par défaut auto).

Problèmes plus complexes

Il arrive un moment où diminuer encore la taille n’a plus de sens. Il faut prendre des mesures draconiennes, par exemple passer <aside> sous <article> ou carrément supprimer <aside>.

Les règles CSS déjà vues en TDs ne permettent pas de coder ce genre de comportement. Il nous faut une façon d’écrire du CSS qui ne sera valide que dans des cas précis. Nous verrons dans la prochaine section comment cela est possible en CSS3.

Votre site de Chuck Norris sur mobile

Les outils pour travailler ?

Jusqu’ici on pouvait considérer que tous les outils de développement d’Internet Explorer / Firefox / Chrome étaient égaux. En fait celui de Chrome était déjà un peu meilleur :

• auto complétion des règles CSS ajoutées dynamiquement,
• liste déroulante des valeurs possibles des champs,
• plus rapide, plus stable (un processus par onglet)
• etc.

En tout cas, pour le reponsive design il n’y a pas photo : Chrome (ou son pendant libre Chromium) est vraiment votre “best-friend-ever”.

Que fait mon navigateur Web sur téléphone par défaut pour un site ?

Comment peut-on rendre un site internet compatible mobile à moindre coût ?

Voici l’algorithme (simplifié) opérant par défaut :

• Générer le site sur une taille d’écran virtuel, disons d’une largeur de 980px ;
• Faire un zoom arrière de manière à faire rentrer le site dans l’écran du smartphone ; (oui, cela fait de petits éléments)
• Supposer que l’utilisateur connaît le pinch to zoom pour naviguer dans le site :

Et ça marche ! De fait, c’est ce que font par défaut les smartphones quand ils tombent sur un site non responsive.

Même si cela marche, on ne peut pas dire que cela soit optimal. L’utilisateur mobile n’a pas la même attente que l’utilisateur sur ordinateur, il veut avoir accès rapidement aux informations essentielles, sans fioritures. On imagine que sur une smart watch par exemple un site comme méteo france serait largement plus dépouillé (sur une smartwatch elle afficherait un nuage ou un soleil et la température par exemple).

Typiquement nous voulons enlever des parties entières du site suivant la taille de l’écran.

La première chose à faire est donc de demander aux navigateurs de ne plus faire l’algorithme précédent (puisqu’on va le gérer nous-mêmes) dans la balise <head> :

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

Vous devez constatez que l’algorithme précédent ne s’applique plus. En gros le navigateur n’essaie plus d’être intelligent : il vous laisse prendre le relai.

La solution technique CSS3 : les media queries

Les media queries sont un jeu d’options ajoutées à la norme CSS3 et qui permettent de définir des règles CSS qui ne s’appliqueront que sous certaines conditions spécifiques.

Il existe deux manières différentes de faire appel à une media query :

• Soit vous souhaitez un fichier CSS spécifique en entier, mais uniquement dans certaines conditions. Alors il faut ajouter à l’en-tête <head> de la page web une déclaration de fichier CSS standard, à laquelle on rajoute l’attribut media et une condition spécifique.

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

  N’oubliez pas que le dernier CSS chargé prend le pas sur les précédents. Pensez donc à toujours déclarer vos media-queries en dernier, sinon elles seront systématiquement écrasées par votre CSS “standard”.

• Soit vous souhaitez que juste certaines règles s’appliquent sous certaines conditions. Alors vous englobez vos règles avec la syntaxe suivante :

  @media(ma_condition) {
    div {background-color:white;}
     ...
  }
  

Une media query fonctionne de la manière suivante : la condition est évaluée et retourne une valeur “vrai” ou “faux”. Si la valeur est vraie, le fichier CSS/ la règle CSS (selon la méthode employée) est appliquée.

Chaque condition est formée à partir d’une ou plusieurs conditions de base. Parmi l’ensemble des conditions possibles, nous allons nous intéresser particulièrement aux suivantes :

• min-width, max-width, min-height et max-height : permettent de renseigner une dimension minimale/maximale à remplir pour que la condition soit vraie. Par exemple,

    @media(min-width:100px) {
      div {background-color:white;}
    }
  

• orientation : prend les valeurs landscape (écran horizontal) ou portrait (écran vertical)

Les conditions de base peuvent être combinées ensemble pour former des conditions complexes en utilisant les opérateurs logiques :

• “and” (ET) : les deux conditions de base doivent être vraies pour que la condition soit vraie
• “,” (OU) : au moins l’un des conditions de base doit être vraie pour que la condition soit vraie
• “not” (NON) : la condition de base qui suit le not doit être fausse pour que la condition soit vraie

Exemple : la règle (min-width: 500px) and (min-height: 800px) n’est vraie que si la largeur de l’affichage est supérieure (ou égale) à 500px et la hauteur supérieure à 800px.

Les points de ruptures.

Afin d’organiser nos media queries, on utilise en général 3 à 4 valeurs de largeur d’écrans, par exemple :

• 480px (Smartphone)
• 768px (Tablette)
• 992px (écran d’ordinateur “Standard”)
• 1200px (écran d’ordinateur “Large”)

Mettez-moi un burger au menu !

Quand la taille de l’écran est limitée, une bonne pratique en responsive design est de changer l’affichage du menu pour un bouton burger :

Lorsque l’on cliquera dessus, le menu apparaîtra. Cela permet de ne pas perdre de place sur la page lorsque le menu est fermé. Pour fixer les idées, nous voulons un menu qui apparaît latéralement à la manière des exemples suivants :

• http://codepen.io/gungorbudak/pen/XbazEX
• http://codepen.io/drewr/pen/uxvdt

Dans l’exercice suivant, nous allons coder un menu burger HTML/CSS (donc sans JavaScript) qui apparait quand la souris passe au dessus du burger (la gestion du clic nécessiterait du JavaScript). (Notez au passage que codepen.io est un très bon outil pour découvrir de nouvelles techniques !)

Note : Le hover sur les sous-menus n’a pas de sens sur téléphone portable (mais certains explorateurs contournent cela, par exemple en déclenchant le hover avec un “clique” sur l’élément à hover). Il faudra gérer le clic avec du JS. La bonne solution est … suspense, vous la verrez en 2ème année.

La mobilité en général

Les contraintes liées à la mobilité ne se limitent pas au responsive design. Pour vous donner une idée plus complète, voici d’autres exemples de contraintes fortes qui viennent s’ajouter :

• débit du réseau
• faible capacité du média (processeur, mémoire vive,…)
• mode offline (on peut passer sous un pont… il faut prévoir pour le cas échéant un cache local qui stocke les opérations courantes, afin de les consommmer lorsque le réseau revient)
• changement de paradigme de l’interface homme machine (mouse over, menu déroulant,… )