Catégories
Technologie

le « Responsive design », c’est du travail

Le «Responsive Design» est un ensemble de techniques qui consiste à faire en sorte qu’un site s’adapte à toutes sortes de supports : ordinateur, tablette, téléphone, télévision, console, papier.

À l’origine, ce n’est pas un problème : la plupart des sites sont consultables sur tout type de support, le confort du site, en revanche, est plus que discutable, si aucun travail d’adaptation n’est fait.

Et pourtant, le principal problème que je rencontre, lors de la réalisation, c’est que le graphiste n’a réalisé qu’une maquette et donc le client n’a validé qu’une disposition. En général, la situation est accompagnée d’une phrase lapidaire dans le cahier des charges : «il faut que le site s’adapte sur iPhone et iPad».

En fait, ça revient à dire que pour cette fonctionnalité, qui est attendue, il n’y a pas eu de conception : nous sommes passés directement de la demande du client à la réalisation.

Pour vous rassurer, ce problème n’existe quasiment pas si vous fonctionnez plus ou moins avec des méthodes agiles, ainsi vous pourrez améliorer rapidement le site par de courtes et nombreuses itérations. Le chef de projet est le mieux à même, étant donné sa visibilité sur le projet, de coordonner ces allés-retours et de prendre rapidement les bonnes décisions.

Dans tous les cas, au travail initial qui est de réaliser une page web, il faut ajouter le travail qui consiste à anticiper ces transformations là où elles sont nécessaires, en fonction des changements d’orientation ou des changements de dimensions.

Vous avez fait une maquette en 1500x700px ? Faites-la rentrer dans un petit échantillon de dimensions courantes : 320×480, 360×640, 768×1024, 800×1280, 980×1280, 1280×600, 1920×600… sans oublier d’envisager l’orientation : portrait ou paysage…

Alors, comment concevoir un site «responsive» ?

Le designer (au sens concepteur, donc celui qui fera une maquette fil de fer), s’il a la double compétence de développeur «front end», sera plus à même de comprendre les problématiques, les capacités et les enjeux liés à la technique.

Voici quelques pistes.

Un design simple est facile à adapter.

Si vous avez optez pour une architecture de l’information de votre site simple, voir minimaliste alors, de part la quantité d’information réduite à afficher en même temps, votre site sera facile à adapter à différents supports.

Ou par l’absurde : si vous mettez trop d’informations, ça ne rentrera jamais sur le petit écran d’un téléphone portable.

Corollaire : la surface de l’écran d’un téléphone est plus petite que celle d’un ordinateur de bureau.

La barre de scroll, est votre ami !

Passer d’un écran panoramique à un téléphone portable est à peu près équivalent à tourner une feuille de paysage en portrait. Il est donc inutile de concevoir un site en 16/9ième : tous les internautes ont un écran différent.

Par contre au niveau confort de consultation, faire défiler le contenu selon un axe, de préférence vertical, est le meilleur moyen de pallier à l’inconnu de la taille de l’écran. Ainsi mettre deux éléments l’un à côté de l’autre peut paraître évident, mais sur un smartphone il sera peut-être plus judicieux de les mettre l’un en dessous de l’autre. Le graphisme ne doit pas gêner cette transformation.

Pensez mobile puis enrichissez.

Comme nous venons de voir, le mobile est le plus contraignant, alors pourquoi ne pas hiérarchiser l’information pour ce support, pour ensuite s’enrichir en fonction de la place gagnée ? Think Mobile First !

Faites disparaître le contenu secondaire.

Dans le cas où vous avez un site existant ou que la conception est déjà trop avancée, il faudra surtout chercher à s’adapter au mobile. C’est le cas inverse du précédent, que je rencontre le plus souvent. L’idée est alors de conserver le contenu essentiel, le seul que l’on aurait mis si nous avions été dans la démarche «mobile first» et de retirer les autres par des méthodes plus ou moins subtiles : le mettre à la suite ou le faire apparaître sur une action de l’utilisateur (la navigation notamment).

Les éléments décoratifs sont-ils essentiels ?

Un certain nombre d’éléments peuvent être supprimés pour les écrans les plus petits, au passage c’est souvent ceux qui ont le moins de bandes passantes. Par exemple, une image de fond très grande qui ne peut être rendue sur un petit écran a tout intérêt à être supprimée. Dans la même idée, des boutons illustrés peuvent se passer de leur illustration ou de leur libellé selon les cas.

En résumé, si votre soucis est le contenu, sa hiérarchisation et le confort de son accès ; alors ce sera facile et utile de faire un site «responsive».

Catégories
Technologie

En toute mobilite