Logo JQuery

Le 14 Janvier dernier JQuery annonçait une mise à jour importante de son framework de développement mobile JQuery Mobile. Pour rappel JQuery Mobile est un framework HTML5 qui permet la création de sites mobiles (SmartPhones et Tablettes) ou d’applications mobiles en effectuant un wrapping via une couche logicielle PhoneGap par exemple.

La version 1.3.0 (en beta pour le moment) apporte beaucoup de nouvelles fonctionnalités. Dans cet article nous nous intéresserons principalement à un point sur lequel le framework a souhaité mettre l’accent, le Responsive Web Design.

Je rappellerai dans un premier temps les principes fondateurs du Responsive Web Design et expliquerai pourquoi cette technique est si importante aujourd’hui. Ensuite nous détaillerons les idées et raisons sous-jacentes au Mobile First qui est à la fois un concept mais aussi une méthodologie dans la conception d’applications. Si vous êtes déjà à l’aise avec ces concepts vous pouvez passer rapidement sur ces deux parties.

Enfin, nous terminerons ce post en montrant quelques exemples de nouvelles fonctions Responsive JQuery Mobile.

Responsive Web Design, petit rappel

Ces dernières années (disons sur une période d’environ 5 ans) nous avons vu apparaître une grande quantité de terminaux, Ultra portables, Netbook, SmartPhones, Tablettes PC, consoles de jeux et télévisions connectées, etc…

Avant l’apparition de ces dispositifs les sites Internet n’avaient que peu à se soucier de différentes tailles et résolutions d’écrans, encore moins de mécanismes d’interactions nouveaux comme le touch ou la manette de votre console de jeux. Non, à cette époque la question qui se posait était plutôt dois-je privilégier les écrans 1024x768 ou bien 1280x1024 (j’avoue j’exagère un peux) ? Du coup le travail était un peu plus simple (mise à part l’arrachage de cheveux que demandais les spécificités d’IE) et une unique version de son site Internet suffisait amplement pour cibler un maximum d’utilisateurs.

Afin de répondre au foisonnement des terminaux il a donc fallu trouver des solutions (si possible peu coûteuses) afin d’adapter les sites Internet et applications Web. Le Responsive Web Design répond à cette problématique en proposant un ensemble de techniques permettant d’afficher correctement un unique site Internet sur plusieurs types de terminaux (et surtout plusieurs tailles d’écrans).

Le gros intérêt est que le Responsive Web Design n’implique pas la création de plusieurs versions d’un site ou chacune de ces versions est dédiée à un type de terminal. Au lieu de ceci le Responsive Web Design préconise le développement d’un unique site dit « adaptatif ».

Le Responsive Web Design se base sur l’utilisation de différents mécanismes permettant de créer des interfaces adaptables à différents terminaux et différentes résolutions d’écran :

  • L’utilisation des Media Queries (fonctionnalité apparue avec CSS3) permet d’appliquer des règles CSS différentes selon les caractéristiques du terminal. Les spécifications Media Queries proposent l’application de règles associées à des caractéristiques (largeur et hauteur de l’écran, orientation du dispositif, résolution, etc.) ;
  • L’utilisation de flexible grids permet de découper une page ou un élément (le conteneur) en sous éléments redimensionnés en proportion (par rapport à la taille de leur conteneur) ;
  • L’utilisation (quasi systématique) de polices et d’images redimensionnées par rapport à la taille des éléments de contexte (taille d’écran, éléments HTML conteneurs, etc.).

Si vous souhaitez voir un bon exemple de site en Responsive Web Design je vous conseil de visiter ce lien http://3200tigres.wwf.fr (changez la largeur de votre écran pour voir l’adaptation du site se mettre en place). Notre site n’est malheureusement pas encore responsive, nous allons certainement y remédier dès que nous aurons un peu plus de temps.

Approche Mobile First

Comme expliqué dans la section précédente nous avons longtemps eu à nous soucier que d’un unique type de terminal (le bon vieux PC de bureau ou le Mac). Mais aujourd’hui les usages changent, les ventes de SmartPhones sont passées devant celles des PC de bureaux (en chute libre depuis plusieurs mois) et des PC portables.

L’utilisation des terminaux mobiles tend à dépasser celle des PC « classiques » et la plupart des analyses montrent que ce phénomène n’est pas prêt de s’arrêter. Du coup, il devient (ou il deviendra dans un futur proche) plus important de concevoir un site Internet pour les terminaux mobiles que pour les PC classiques.

Le terme Mobile First part de ce constat et propose de privilégier la version mobile d’un site Internet ou d’une application Web avant tout et de décliner les versions Desktop après. Ceci signifie que votre site Internet doit dès le début prévoir les contraintes des SmartPhones et Tablettes, tailles d’écran réduites, performances moins importantes, temps de chargements à optimiser, optimisation de l’espace mémoire, prise en compte du touch et des « gros doigts », etc.

Dans la grande majorité des cas le fait d’adopter une approche Mobile First est bénéfique car elle permet de mettre le focus sur les éléments les plus importants d’un site ou d’une application. En effet, étant donné que la taille de l’écran est réduite il conviendra de ne laisser que le plus important sur les interfaces graphiques mobiles. Cet effort *d’identification des éléments fondateurs d’une application ou d’un site Internet aura des répercussions importantes sur la manière de concevoir les interfaces graphiques Desktop également (à contrario une approche Desktop First ne nous obligent pas à nous focaliser sur les éléments clés).

Les nouveautés RWD de JQuery Mobile

L’ annonce de la sortie de JQuery Mobile 1.3.0 beta l’explique très bien, le framework a été construit pour le mobile mais aussi dans le but de produire des déclinaisons Tablettes et Desktop.

Ceci correspond à une approche Mobile First et passe par des fonctionnalités RWD spécifiques. L’approche de JQuery est de proposer des fonctionnements responsive par défaut ainsi que la possibilité de définir ses propres breakpoints (ou points de rupture).

Je présenterai ici les grids et tables responsive JQuery Mobile en illustrant les deux approches, la première permet une implémentation rapide d’un élément RWD sans aucun réglage CSS particulier (utilise les réglages par défaut de JQuery Mobile), la seconde va un peu plus loin en implémentant des breakpoints spécifiques.

Chacun de mes exemples est illustré via une simple page Web que vous pouvez ouvrir afin de jeter un coup d’œil au code source. Je tiens à préciser que ces exemples sont simplissimes et qu’ils ne visent pas à illustrer une solution aboutie qui mériterait plus de travail.

Responsive Grids

Les responsive grids permettent de « linéariser » un ensemble d’éléments disposés en ligne sur un écran classique en les affichant sur une unique colonne lorsque la largeur de l’écran est trop petite (SmartPhones).

L’illustration suivante montre comment s’effectue le passage d’un grille en mode Desktop (à gauche) à une grille en mode mobile (à droite).

Grid Desktop vers Mobile

Cette technique est un grand classique et est très utilisée en Responsive Web Design afin d’adapter les interfaces graphiques aux écrans mobiles.

Breakpoints par défaut

JQuery Mobile 1.3.0 beta facilite la « linéarisation » des grids en introduisant une simple classe CSS ui-responsive.

Cette classe CSS définie des breakpoints par défaut qui vont permettre de basculer entre un mode mobile (« linéarisé » ) et un mode Desktop suivant la taille de l’écran.

Par exemple le bout de code HTML suivant défini un grid responsive JQuery Mobile.

<div>
    <div><img src="Android.png" /></div>
    <div><img src="ios.png" /></div>
    <div><img src="BlackBerry.png" /></div>
    <div><img src="WindowsPhone.png"/></div>
</div>

Au dessus d’une certaine largeur d’écran l’affichage de la grille est horizontale, en dessous de cette largeur l’affichage bascule en mode vertical. L’impression écran suivante montre le résultat de cette grille en mode Desktop et mobile.

Grid Desktop vers Mobile default

Vous pouvez voir cet exemple en action ici (exemple du haut).

L’ajout de cette simple classe CSS ui-responsive est très simple et permet très rapidement de définir des grilles responsive.

En interne la classe ui-responsive de JQuery Mobile 1.3 est définie de la manière suivante.

/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
@media all and (max-width: 35em) {
    .ui-responsive .ui-block-a,
    .ui-responsive .ui-block-b,
    .ui-responsive .ui-block-c,
    .ui-responsive .ui-block-d,
    .ui-responsive .ui-block-e {
        width: 100%;
        float:none;
    }
}

La technique est classique mais efficace, elle consiste à replacer les éléments dans le flux de leur conteneur (utilisation de la propriété float) de façon à ce que des sauts de lignes soient effectués dès que la taille de l’écran passe en dessous d’une certaine valeur.

Breakpoints personnalisés

La classe CSS ui-responsive est très pratique mais défini un comportement par défaut qui n’est pas adapté à tous les besoins. L’utilisation de breakpoints personnalisés devient utile dès que vous souhaitez changer ce comportement, dans ce cas il est nécessaire de supprimer la classe ui-responsive afin de définir votre propre classe CSS.

Par exemple le morceau de code CSS suivant effectue un affichage différent suivant deux tailles d’écran (la classe CSS ui-responsive a été remplacée par la classe custom-breakpoint).

@media all and (min-width: 480px) and (max-width: 900px) {
    .custom-breakpoint .ui-block-a,
    .custom-breakpoint .ui-block-b,
    .custom-breakpoint .ui-block-c,
    .custom-breakpoint .ui-block-d {
        width: 50%;
    }
    .custom-breakpoint .ui-block-c {
        clear: left;
    }
}

@media all and (max-width: 480px) {
    .custom-breakpoint .ui-block-a,
    .custom-breakpoint .ui-block-b,
    .custom-breakpoint .ui-block-c,
    .custom-breakpoint .ui-block-d {
        float: none;
        width: 100%;
    }
}

L’intérêt de JQuery Mobile ici est de fournir des classes CSS (ui-block-a, ui-block-b, ui-block-c, ui-block-d) sur lesquelles il est possible de s’appuyer pour construire les points de rupture (breakpoints).

Les règles définies précédemment permettent de disposer d’un affichage une colonne pour les écrans inférieurs à 480 pixels de large. Entre 480 pixels et 900 pixels nous proposons un affichage 2 colonnes (pour les tablettes par exemple), au dessus de 900 pixels nous affichons la grille en ligne.

L’impression écran suivante montre ces différents cas de figure (à gauche la version Desktop, au centre la version Tablette, à droite la version SmartPhone).

Grid Desktop vers Mobile default

Vous pouvez voir cet exemple en action ici (exemple du bas).

Responsive Tables

Le second ajout majeur de la version 1.3 de JQuery Mobile du côté du Responsive Web Design repose sur les tables responsive.

Cette fonctionnalité permet l’affichage de tables de façon classique sur des écrans larges et le basculement suivant deux modes différents dès lors que la taille des écrans diminue :

  • Le mode reflow permet de « linéariser » les lignes d’une table sur les petits écrans ;
  • Le mode column toggle ajoute un menu qui propose à l’utilisateur le choix des colonnes à afficher de façon à disposer d’un confort d’utilisation acceptable sur un SmartPhone.

Mode _reflow_

Le mode reflow est illustré sur la page d’annonce de JQuery Mobile 1.3 de la manière suivante.

La fenêtre de gauche montre l’affichage d’une table pour un écran large, celle-ci est affichée de manière tout à fait classique. Dès que la largeur de l’écran passe en dessous d’une certaine valeur les lignes de la table sont affichées sous forme de liste.

Le mode reflow est très intéressant car il permet de garder un bon confort d’affichage sur SmartPhone, cependant ce mode conviendra uniquement si la table à afficher ne contient pas trop de lignes (car il est bon d’éviter d’induire trop de scroll sur mobile).

De la même manière que pour les grids JQuery Mobile l’activation du mode reflow sur une table se fait en utilisant la propriété CSS ui-responsive.

Par exemple la table suivante utilise le mode reflow.

<table data-role="table" data-mode="reflow">
    <thead>
        <tr>
             <th>Vendor</th>
             <th>3Q12 Unit Shipments</th>
             <th>3Q12 Market Share</th>
             <th>3Q11 Unit Shipments</th>
             <th>3Q11 Market Share</th>
             <th>Year-over-year Change</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Samsung</td>
            <td>105.4</td>
            <td>23.7 %</td>
            <td>87.2</td>
            <td>20.1 %</td>
            <td>20.9 %</td>
        </tr>
        ...
    </tbody>
</table>

Les tables responsive JQuery Mobile sont donc créées en définissant les éléments suivants :

  • L’attribut data-role="table"
  • L’attribut data-mode="reflow"
  • La classe CSS ui-responsive

Tout comme les grids l’utilisation du fonctionnement RWD par défaut sur les tables est très simple et permettra de démarrer rapidement l’implémentation d’un site mobile en Responsive Web Design. Cependant vous aurez toujours besoin de définir vos propres points de rupture si vous avez des besoins plus évolués.

Vous trouverez un exemple simple de la table présentée précédemment ici (exemple du haut).

Mode _column toggle_

Le mode reflow proposé par JQuery Mobile pour afficher une table responsive est intéressant mais a l’inconvénient d’induire un scroll important dès que le nombre de lignes de la table à afficher devient trop important.

Pour faire face à ce problème JQuery Mobile fourni un autre mode d’affichage permettant d’afficher une table sur un terminal mobile de la même manière que pour le Desktop en proposant en plus à l’utilisateur les colonnes qu’il souhaite afficher.

L’illustration suivante issue de l’annonce de la sortie de JQuery Mobile 1.3 montre ce principe.

L’utilisation de ce type de table est très simple, il est nécessaire de définir :

  • L’attribut data-role="table"
  • L’attribut data-mode="columntoggle"
  • Un ensemble de priorités d’affichage au niveau des colonnes de la table via l’attribut data-priority

Par exemple pour remplacer le mode reflow de la table présentée précédemment par le mode toggle column le code serait le suivant :

<table data-role="table" data-mode="columntoggle">
    <thead>
        <tr>
            <th>Vendor</th>
            <th>3Q12 Unit Shipments</th>
            <th data-priority="2">3Q12 Market Share</th>
            <th data-priority="2">3Q11 Unit Shipments</th>
            <th data-priority="2">3Q11 Market Share</th>
            <th data-priority="3">Year-over-year Change</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Samsung</td>
            <td>105.4</td>
            <td>23.7 %</td>
            <td>87.2</td>
            <td>20.1 %</td>
            <td>20.9 %</td>
        </tr>
        ...
    </tbody>
</table>

Vous trouverez un exemple simple de cette table ici (exemple du bas).

Je vous conseille aussi de jeter un coup d’œil aux exemples de JQuery Mobile :

Les priorités (attribut data-priority) permettent d’afficher ou de cacher les 5 dernières colonnes de la table en fonction de la taille de l’écran.

En interne les valeurs de priorités permettent d’activer l’affichage des colonnes en utilisant les Media Queries CSS 3, le code source de JQuery Mobile est le suivant :

/* Hide all prioritized columns by default */
@media only all {
    th.ui-table-priority-6,
    td.ui-table-priority-6,
    th.ui-table-priority-5,
    td.ui-table-priority-5,
    th.ui-table-priority-4,
    td.ui-table-priority-4,
    th.ui-table-priority-3,
    td.ui-table-priority-3,
    th.ui-table-priority-2,
    td.ui-table-priority-2,
    th.ui-table-priority-1,
    td.ui-table-priority-1 {
        display: none;
    }
}
/* Preset breakpoints if ".ui-responsive" class added to table */
/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 20em) {
    .ui-table-columntoggle.ui-responsive th.ui-table-priority-1,
    .ui-table-columntoggle.ui-responsive td.ui-table-priority-1 {
        display: table-cell;
    }
}
/* Show priority 2 at 480px (30em x 16px) */
@media screen and (min-width: 30em) {
    .ui-table-columntoggle.ui-responsive th.ui-table-priority-2,
    .ui-table-columntoggle.ui-responsive td.ui-table-priority-2 {
        display: table-cell;
    }
}
/* Show priority 3 at 640px (40em x 16px) */
@media screen and (min-width: 40em) {
    .ui-table-columntoggle.ui-responsive th.ui-table-priority-3,
    .ui-table-columntoggle.ui-responsive td.ui-table-priority-3 {
        display: table-cell;
    }
}
/* Show priority 4 at 800px (50em x 16px) */
@media screen and (min-width: 50em) {
    .ui-table-columntoggle.ui-responsive th.ui-table-priority-4,
    .ui-table-columntoggle.ui-responsive td.ui-table-priority-4 {
        display: table-cell;
    }
}
/* Show priority 5 at 960px (60em x 16px) */
@media screen and (min-width: 60em) {
    .ui-table-columntoggle.ui-responsive th.ui-table-priority-5,
    .ui-table-columntoggle.ui-responsive td.ui-table-priority-5 {
        display: table-cell;
    }
}
/* Show priority 6 at 1,120px (70em x 16px) */
@media screen and (min-width: 70em) {
    .ui-table-columntoggle.ui-responsive th.ui-table-priority-6,
    .ui-table-columntoggle.ui-responsive td.ui-table-priority-6 {
        display: table-cell;
    }
}

Ce fonctionnement est très intelligent :

  • Les colonnes de priorité 1 sont affichées (par défaut) sur les écrans ayant une largeur supérieure à 320px ;
  • Les colonnes de priorité 2 sont affichées (par défaut) sur les écrans ayant une largeur supérieure à 480px ;
  • Les colonnes de priorité 3 sont affichées (par défaut) sur les écrans ayant une largeur supérieure à 640px ;
  • Les colonnes de priorité 4 sont affichées (par défaut) sur les écrans ayant une largeur supérieure à 800px ;
  • Les colonnes de priorité 5 sont affichées (par défaut) sur les écrans ayant une largeur supérieure à 960px ;
  • Les colonnes de priorité 6 sont affichées (par défaut) sur les écrans ayant une largeur supérieure à 1220px.

Ce mode column toggle permet donc de régler de façon très fine les colonnes à afficher en fonction des tailles d’écran de façon à ce que les utilisateurs disposent d’un bon confort de lecture au premier affichage de la table. Ensuite les utilisateurs peuvent choisir les colonnes additionnelles à afficher.

Conclusion

Avec la prolifération des tailles d’écran et des dispositifs de lecture (SmartPhones, Tablettes, Consoles de jeux vidéo, Télévisions connectées, etc.) il devient de plus en plus compliqué de concevoir des interfaces graphiques adaptées.

Le Responsive Web Design constitue un ensemble de techniques permettant de répondre à cette problématique, malheureusement ces techniques sont encore trop peu utilisées actuellement.

JQuery Mobile apporte une solution simple et élégante permettant l’implémentation de sites et applications Web en Responsive Web Design et adoptant une approche Mobile First.

Si vous souhaitez approfondir ces sujets voici une petite liste de liens qui vous permettront d’aller plus loin :

Publié le   24 Janvier 2013
par   Baptiste Gaillard