Responsive design

En réaction aux problèmes engendrés par l'approche consistant à développer en tant que sites distincts des sites web destinés à la fois aux téléphones et aux ordinateurs, une idée relativement nouvelle (en fait, déjà ancienne) devient populaire : au lieu d'utiliser la détection de l'user-agent, faire en sorte que votre page appelle, côté client, aux fonctionnalités du navigateur. Cette approche s'est fait connaitre sous le nom de Responsive Web Design ou site web adaptatif. Comme pour les sites distincts, cette approche a des aspects tant positifs que négatifs.

Le bon

Bien que ce ne soit pas la méthode initialement proposée pour développer des sites web, le responsive design a récemment capté l'attention du public et des développeurs comme un premier pas vers une interface utilisateur polyvalente au lieu de sites séparés. Cette technique permet d'atteindre deux des trois objectifs du développement pour mobile :

• Apparence — Utiliser une disposition flexible associée à des requêtes CSS permet de donner au site une apparence aussi lisse que possible sans avoir à se préoccuper des dimensions de l'écran utilisé.
• Contenu — Il est possible d'ajuster le message selon l'utilisateur en utilisant la détection de navigateur via le JavaScript.

Cette approche offre l'avantage de ne pas se baser sur une détection de l'appareil de l'utilisateur et donc est plus souple et plus pérenne. Elle peut également être sensiblement plus simple à mettre en place et à maintenir pour du développement web basique, que les autres options.

Le mauvais

Cette approche n'est cependant pas sans limitations. Comme le contenu doit être altéré coté client avec du JavaScript, seules des modifications de contenu minimales sont encouragées. En général, les choses peuvent devenir épouvantables assez rapidement lorsque vous essayez de maintenir deux ensembles séparés de code JavaScript qui marchent sur le même DOM. C'est une raison justifiant le fait que les applications web ont du mal à tendre vers l'adoption de cette approche.

Donner un responsive design à votre site existant implique aussi une réécriture de vos feuilles de style ne supportant déjà pas une disposition flexible. Cela pourrait pourtant être une bénédiction déguisée ; rendre la disposition de votre site adaptatif pourrait être une opportunité à saisir pour moderniser et nettoyer le CSS de votre site.

Enfin, comme vous allez ajouter du code à vos scripts et feuilles de style, les performances risquent de devenir pires qu'avec l'approche des sites séparés. Il n'y a pas vraiment de solution toute faite à cela, bien que un refactoring réfléchi de vos scripts et feuilles de style devrait réellement permettre d'économiser quelques octets sur le le long terme.

Pertinence du choix de cette option

Comme décrit précédemment, parce que les changements de contenu sont une problématique complexe, quand vous choisissez cette approche, vous ne serez pas capable de donner une expérience différente sur mobile sans accroître considérablement la complexité de votre code. Ceci dit, si les versions ordinateur et mobile de votre site sont très similaires, alors cette approche est une option à retenir. Elle est bien adaptée aux sites orientés documents dont le cas d'utilisation principal reste cohérent selon les appareils, comme par exemple les pages de produits. Vous remarquerez peut être que les exemples ci-dessous sont tous des blogs ou des portfolios.

Exemples

Bien que ce ne soit pas aussi populaire que l'approche des sites distincts, il y a chaque jour de plus en plus de sites web employant cette technique. Heureusement, puisque tout le code est coté client, si vous voulez voir comment un site implémente techniquement cette approche, il vous suffit de le visiter et de cliquer sur "Code source de la page". Voilà quelques exemples:

• https://teixido.co/ – un de mes sites préférés avec du responsive design, aussi reproduit ci-dessus !
• https://adactio.com/journal/1696 – aussi un article que l'on peut recommander, avec ses propres liens vers des exemples
• https://thinkvitamin.com/
• https://stephencaver.com/
• https://hicksdesign.co.uk/

En dépit d'être une approche qui reste relativement jeune, des bonnes pratiques émergent déjà. Par exemple, si vous concevez un site depuis zéro avec cette option en tête, cela vaut en général le coup de créer d'abord un design adapté aux petits écrans, de façon à ce que les contraintes liées aux mobiles soient de votre coté depuis le début. Il est également recommandé d'utiliser une amélioration progressive de vos styles plutôt que de masquer des éléments du site existant avec des media queries. De cette façon, les navigateurs les plus anciens qui ne supporteraient pas les media queries seront toujours capables d'afficher la bonne disposition. Une excellente présentation des mérites de cette méthode est disponible ici.

Approches du développement Web pour mobile

Consultez les articles suivants pour découvrir plus d'approches de développement de plate-formes mobiles.

• Qu'est ce que la comptabilité-mobile? (en)
• Sites séparés (en)
• Une approche hybride (en)

Voir également

• Le Responsive Web Design pour plus de ressources

• Responsive design versus adaptive design (en)