Responsive 101

De la nécessité de s’adapter …

Sur le web des années 2000, le design HTML était conçu pour ne jamais se déplacer d’un iota, mais la multiplication des tailles et types d’appareils ont rendu nécessaire l’apparition d’une nouvelle philosophie permettant de répondre à une grande variété de résolution d’écrans.

Aussi, nous passerons en revue dans ce post quelques-unes des techniques et méthodologies permettant de mettre en place une solution web responsive.

La petite histoire du Responsive Design.

Si le principe du Responsive Design a été démontré dès 2004, c’est 2013 que Forbes a nommé l’année Responsive.[1] [2]

Pour le développeur confronté à la nécessité de réaliser une solution web responsive la question devient rapidement, quels sont les outils à ma disposition et quels sont les tests nécessaires pour répondre à un tel besoin …

Généralités sur le développement Responsive

Si des éléments permettant de répondre à ces problématiques existaient dans les normes précédentes, c’est avec  le CSS 3 que le support est devenu beaucoup plus exhaustif.

Un design responsive se base sur les principes suivants (cf. chapitre suivant):

  • L’utilisation d’unités non figées.
  • L’implémentation d’une “grille fluide” (Fluid Grid).
  • Les Media Queries.

Avant de les voir plus en détail, voici quelques concepts de base issus de nos retours d’expérience :

  • Se baser sur les dernières normes du CSS 3 [3].
  • Vérifier la compatibilité des CSS utilisées en fonction des navigateurs ciblés

exemple : http://caniuse.com/#feat=forms [4]

Certaines fonctionnalités utilisées couramment en CSS 3 sont parfois non compatibles avec des navigateurs pourtant pas si anciens tels que IE 8 ou les Browser mobiles sur de vieilles tablettes android par exemple.
Il convient donc de vérifier que les ambitions techniques sont conciliables avec le panel de navigateurs cible.

  • Utiliser un Framework tel que Twitter Bootstrap [5].

L’utilisation du Framework permet de simplifier grandement le pré-requis de la grille fluide.

Les techniques en détail

1 ligne de code vaut mille mots, ci-dessous quelques exemples techniques :

CSS – Utilisation d’unités non figées :

Comme vu précédemment, il est conseillé d’utiliser le moins possible les dimensions en pixel.
En guise d’alternative il est possible d’utiliser des dimensions en %, mais il est également possible d’utiliser des Viewport units.

Si les % lient la taille d’un élément Html à un élément Html parent, ces unités sont proportionnées directement suivant la taille du navigateur, le viewport.

1 vw pour 1% de la taille horizontale du viewport.
1 vh pour 1% de la taille verticale du viewport.
1 vmin pour 1% de la dimension horizontale / verticale la plus petite.
1 vmax pour 1% de la dimension horizontale / verticale la plus grande.

Le container a pour hauteur ⅓ du viewport
CSS – min/max-width/height
Permet de définir des tailles minimum, utiles pour préserver certains espaces qu’un design Responsive pourrait compromettre :

blog ai3 g2aUNAENJ3OzsVv7JbGLMlH_CpITVNTgiz0m03gv0CSeGaeBqHmy4LVxf32oTEskBm9vLuk8oaslpIISReJseezxXCd5EHqpvKgJ8fonrgldkpWi4pvc8RGs95DCPwJlGjpmUg-300x56 Responsive 101

blog ai3 GhxVbnYNHzvAgUfXeu9PdaVqyJHwOTR5Vfd_hzSJd1sPHpX3wS5ndIEmlGmEK_w1ZqQ4Cip_Dyu3JEi0BPeVcj3K2Yicabbah12R6Ugfy2LknzPq5pUHGraWg4GbvS-2BKOtBw-300x57 Responsive 101

Avec min-width : 360px (La taille minimum du logo).
Bootstrap – utilisation des classes prédéfinies [6]
Le système de grille de Bootstrap découpe la grille en 12 colonnes dans laquelle le contenu peut être réparti.

Le nom d’une classe se décompose ainsi .col-xs-6.

  • 6 correspond au nombre de colonnes que le contenu va occuper.
  • xs correspond au type de device concerné :
    • xs correspond au mobile. (largeur < 767px)
    • sm pour les tablettes de petit format. (768px < largeur < 991px)
    • md pour les devices intermédiaire. (992px < largeur < 1199px)
    • lg pour les plus grandes résolutions.(largeur > 1200px)

blog ai3 Responsive101tab1 Responsive 101

Le code ressemblerait à ceci :

Ici l’utilisation de la philosophie Mobile First, consiste à définir l’espace pris par les différents contenus pour le plus petit device. Ainsi est-il plus aisé de commencer à définir l’espace pris pour les devices de type xs, définissant également par défaut l’espace sur les écrans de résolution supérieures; L’inverse n’étant pas vrai.

Ainsi, cette mise en page serait ignorée sur une résolution inférieure à 1200px :

Il devient alors intéressant de pouvoir varier l’espace pris par un contenu sur les différents types de devices.

Voyons le code suivant

Ici sur les écrans de grande résolution les marges s’adapteraient pour prendre 2 colonnes, aérant le contenu :
blog ai3 Responsive101tab4 Responsive 101

Et sur les autres tailles d’écrans les marges seraient ainsi réduites  à 1 colonne, profitant ainsi au maximum de la taille réduite de l’écran.

blog ai3 Responsive101tab2 Responsive 101

Mais c’est en l’utilisant en complément avec les classes .show et .hidden que l’on peut réellement commencer à gérer pleinement le responsive. [7]

Ces classes permettent de définir l’apparition de briques de contenu suivant la taille du viewport, permettant ainsi l’activation de certains éléments uniquement si l’espace le permet.

Voici un petit JSFiddle pour jouer avec le comportement responsive de la fenêtre de résultat :
https://jsfiddle.net/pbyLcxuq/

CSS- les media queries

Les classes prédéfinies permettent déjà une grande souplesse dans la mise en page, tout en conservant votre code css tout propre et tout simple.
Toutefois, des réglages au pixel près seront parfois nécessaires, et certaines mises en page plus complexes nécessiteront des changements de comportement gérés au niveau des styles.

C’est alors qu’interviennent les medias queries.[8]
Il s’agit de définir des conditions pour lesquelles une règle CSS s’applique.

Ainsi pour définir une couleur de texte rouge entre 200 et 400px, il faudrait réaliser ceci :
https://jsfiddle.net/zzqvtqg1/

Javascript- détection avancée

Pour finir, il est possible de détecter avec un peu de javascript le type d’appareil qui tente de se connecter, permettant ainsi la redirection de certains types de navigateurs vers une vue plus adaptée à leur degré de compatibilité.
Ainsi, les plus anciennes tablettes android souffrent souvent d’un manque de mise à jour vers les dernières versions de l’OS et disposent alors d’un navigateur web par défaut pouvant être obsolète.
Il est courant de forcer la redirection de ce type de navigateur vers la version mobile du site.
Exemple de détection basique, voir [9] pour plus d’informations.

Il est à noter que la constante évolution de la résolution des appareils mobiles et tablettes pourrait remettre en question l’approche liée aux tailles d’écran adoptée par bootstrap.

TestCeption

Concernant la problématique des tests, si le respect des standards entre les divers navigateurs s’est grandement amélioré, le développement d’un site adaptatif amène à utiliser des normes qui ne sont pas encore dotées d’une implémentation homogène.
Il est donc vital de tester la solution sur un maximum de supports.

Concernant le développement sur Desktop, la réponse est simple. Il faut installer les navigateurs les plus importants Chrome, IE, Firefox, Opera.
Avoir un Mac sous la main pour tester la compatibilité avec Safari s’avère très utile.

Tester le responsive devient alors aussi simple que redimensionner la taille du navigateur, mais quelques outils permettent d’apporter plus de rigueur dans les tests.

Par exemple sous Chrome, en utilisant le simulateur de device depuis les outils de développement : blog ai3 mobileicon Responsive 101

blog ai3 responsive101Emulator Responsive 101

Attention néanmoins, cet outil est plutôt limité car le moteur de rendu restera celui de chrome et ne permettra donc pas de constater d’éventuels problèmes d’incompatibilité.
Et tout émulateur aura par définition des limitations.
La solution idéale restera donc d’utiliser un maximum de devices physiques et de réaliser une structure HTML simple et maintenable.

Mobile First

Au début du développement du responsive, il était courant de penser d’abord les applications pour le Desktop et adapter par la suite sur les écrans de taille réduite en épurant au maximum les fonctionnalités incompatibles avec une résolution ou un type de navigateur. Cette approche était nommée la dégradation élégante (Graceful degradation).

Désormais l’approche Mobile First est recommandée avec une amélioration progressive des fonctionnalités (Progressive enhancement). Une approche d’autant plus importante depuis le 21 avril.
Désormais, les sites non optimisés pour le mobile souffrent d’une pénalité dans le moteur de recherche Google, un changement affectueusement nommé Mobilegeddon par la presse en ligne.

blog ai3 mobilegeddon Responsive 101

Sources
[1] http://en.wikipedia.org/wiki/Responsive_web_design
[2] http://www.themaninblue.com/writing/perspective/2004/09/21/
[3] http://www.w3schools.com/css/css3_intro.asp
[4] http://caniuse.com/
[5] http://getbootstrap.com/
[6] http://getbootstrap.com/css/#grid
[7] http://getbootstrap.com/css/#helper-classes-show-hide
[8] http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
[9] http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.