Responsive Webdesign : quels éléments prendre en compte ?

Un site en responsive webdesign c’est un site web qui s’adapte au support sur lequel il est lu. (Pour en savoir plus sur le Responsive Webdesign, lisez notre article «responsive Webdesign : quels avantages pour un site web ?» )
Tous les concepteurs de site en responsive webdesign ne sont pas d’accords sur les éléments à prendre en compte lors de la conception du site web. Au delà de la question de la mise en page, et de l’adaptabilité du site, se pose la question du contenu à afficher en fonction du support. Il y a actuellement 2 écoles. L’une qui prône les mêmes éléments à afficher sur tous les supports, et l’autre qui conseille d’adapté l’affichage au support.
Est-il utile de faire apparaître les mêmes contenus / fonctionnalités quand le site est lu sur un smartphone notamment ?

QUELS SONT DONC LES ÉLÉMENTS INDISPENSABLES À PRENDRE EN COMPTE POUR CONCEVOIR UN SITE WEB EN RESPONSIVE WEBDESIGN ?

Le principe général en Responsive Webdesign est établi sur 3 points : « Grille fluide, Images fluides, Media Queries »
Avant toute chose, lors de la conception d’un site en Responsive Webdesign, vous allez être tenté(e) de définir un layout de base adaptable aux différents supports.
En utilisant des requêtes Médias Queries, des grilles fluides et des images flexibles, vous aurez une seule page HTML qui « répond » aux différentes tailles de visualisation avec différentes mises en page, avec des éléments de design uniques, etc.

Cependant, votre projet va nécessiter de définir d’abord une version par rapport à l’autre : la version Desktop ou la version mobile (tablette et smartphone).
Avant de foncer tête baissée sur le layout, définissez le profil de votre utilisateur, et le contexte dans lequel il va venir voir votre site.

QUEL EST LE CONTEXTE DANS LEQUEL SE TROUVE L’UTILISATEUR ?

L’utilisation de votre site va se faire dans un contexte donné. Depuis l’avènement des smartphones, l’accès à un site internet ne se fait plus dans un salon ou à une table, il peut se faire n’importe où, n’importe quand. Dans notre article de la semaine dernière nous avons même abordé le sujet de la consultation en point de vente (cf article « Comment créer du trafic en magasin grâce à son site internet ?») Comme les appareils mobiles sont (presque) toujours avec leurs propriétaires, l’heure et le lieu jouent un grand rôle dans la définition de leur contexte d’utilisation. Lorsque vous concevez un site web pour mobile, vous concevez quelque chose qui peut être utilisé n’importe où, n’importe quand, et être instantanément partagé / discuté avec d’autres personnes.

Cet élément est à prendre en considération pour définir les éléments qui doivent être conservés sur la version mobile. A partir du contexte d’utilisation et des différents types d’utilisateurs, il est possible de définir leurs attentes dans chacune des situations. De votre côté vous devez également ajouter les objectifs de votre site Internet : récupérer des demandes de contact, vente en ligne, téléchargement de documentation, etc.

QUEL CONTENU AFFICHER SUR QUEL SUPPORT ?

Qui peut le plus peut le moins. Partez de la version la plus large, celle qui englobe toutes les fonctionnalités, tous les contenus.
Ensuite pour les versions Tablettes et Smartphones (qui peuvent être différentes l’une de l’autre) faites votre choix sur des éléments tangibles,comme vu précédemment. Contexte utilisateur, typologie des utilisateurs.

Demandez-vous également ce que vous souhaitez faire faire aux personnes qui visitent le site sur ordinateur de bureau, et la même question pour ceux qui seront sur Smartphone ou tablette. Quels vont être leurs besoins ?
En général, les utilisateurs mobiles veulent des choses différentes de votre produit que celles attendues par les utilisateurs de Pc de bureau. Si vous concevez un site pour un restaurant, les utilisateurs sur desktop auront envie de voir des photos du lieu, un menu complet, et quelques informations sur votre histoire. Mais les utilisateurs mobiles voudront probablement juste votre adresse et les heures d’ouverture.
Dans l’ensemble, les utilisateurs mobiles ont des attentes différentes, souvent dans l’immédiateté et la rapidité.

En terme de fonctionnalités sur votre site affiché pour les mobiles, posez-vous des questions simples.
Est ce qu’un formulaire d’inscription à la newsletter est très utile sur version mobile ? Posez-vous la question en vous plaçant du côté de l’utilisateur : Va-t-il prendre le temps de le remplir ?
Par contre, les contenus textes doivent être accessibles depuis n’importe quel support.
La question de la publicité sur mobile va se poser également. Il va être de plus en plus difficile de ne pas afficher la publicité sur les versions mobiles de sites. Quand on voit la taille d’un site sur un iPhone par exemple tenu à la verticale cela laisse peu de place pour des bannières publicitaires.

Quelle école a donc raison? C’est la nature du projet en lui-même, ces objectifs, les utilisateurs finaux qui vont induire la marche à suivre pour le projet.
La notion de « Mobile First » : Elle peut être considérée comme un mode de pensée dans lequel on privilégierait la construction d’une interface ergonomique pour terminaux mobiles avant d’établir l’ergonomie pour un terminal « desktop » (de bureau). Dans les faits, la version mobile est souvent une version allégée ou avec des affichages différents pour certains éléments. La raison est simple : l’utilisateur mobile veut aller vite, et l’affichage sur smartphone est très étroit.