La notion responsive – une solution d’avenir

Le responsive design est une approche web qui offre une lecture optimale sur l’ensemble des supports visuels digitaux. C’est aussi une nouvelle façon d’appréhender la conception d’un site web, elle repose sur une philosophie simple : une seule interface et une seule URL est prévue pour fonctionner de manière parallèle avec une ergonomique adaptée sur tout type de support : ordinateur, tablette, smartphone.

Pour que la mise en place d’un système responsive soit optimale, trois compétences majeurs sont primordiales : l’ergonomie, le design et le développement. Elles permettent de créer des bases solides pour la suite de votre projet. Le responsive ne tient pas compte des usages de chaque support, il ne propose qu’une adaptation automatique des contenus. Il est donc nécessaire de s’interroger sur chacune des familles de résolutions envisagées et de faire des prototypes des différentes zonings.

1 ergonomie

Bonne architecture de l’information

2 design

Uniformité et linéarité de design d’interface

3 développement

Création d’une structure HTML 5 optimisée

MOBILE FIRST

La notion de mobile first en un schéma simple :


1


2


3

La notion de « Mobile First » est une méthode de conception qui consiste à résonner d’abord sur la plus petite résolution (smartphone), pour finir sur la plus grande en version desktop (ordinateur). Cette méthode permet d’épurer au fur à mesure au maximum les informations et les fonctionnalités proposées à l’internaute afin de créer une expérience utilisateur optimale et adaptée à tout support.

Il existe encore des entreprises qui pensent essentiellement à développer dans un premier temps un site internet pour ordinateur, ce qui est une erreur. En France, 97% des mobinautes consultent internet tous les jours. Le smartphone permet à vos clients de s’informer ou d’acheter à tout moment. Il est désormais primordial pour toutes les entreprises de créer des sites responsive mais surtout imaginer une interface intuitive sur navigation mobile.

Petit conseil d’Eric Schmidt, le président de Google « Il y a une consigne simple : quoi que vous fassiez, occupez-vous d’abord des mobiles » !

Quelques conseils pour réussir sa stratégie #MobileFirst

  1. Pensez d’abord à l’ergonomie smartphone et optimisez l’expérience web de vos clients.
  2. Utilisez les médias queries : permet à la page d’utiliser des règles CSS différentes en fonctions des caractéristiques du terminal de consultation, pour faire simple, il s’agit des règles appliquées en fonction de la largeur du terminal. C’est différentes largeurs sont appelées « points de rupture » et correspondent à un besoin de modifier la mise en page à partir d’un certain seuil pour faciliter la navigation.
  3. Identifiez pour chaque terminal, quelles sont les zones interactives faciles d’accès. Dans le principe de la navigation web, l’interaction avec l’internaute est la clé, le menu doit être confortable et facile d’utilisation avec les doigts (pour smartphone et tablette). Il doit être en harmonie avec les autres contenus et se fondre dans le décor de votre site : les boutons doivent être grands afin d’être faciles d’accès aux doigts de l’utilisateur.
  4. Pensez à utiliser des images adaptées visant à améliorer l’expérience utilisateur. Inutile d’envoyer des images trop grandes et lourdes si l’utilisateur consulte la page depuis son smartphone avec un petit écran et une mauvaise connexion internet.
  5. Choisissez une iconographie pertinente et intuitive. Les pictos sont très pratiques, car ils ne prennent que très peu de place et, car ils n’ont pas besoin d’être traduits, mais il faut faire attention de la mauvaise interprétation par l’internaute. Testez vos pictos pour vous assurer qu’ils ne sont pas un frein.

Responsive : une stratégie à long terme

Le responsive design est une solution stratégique à long terme, dans un premier temps il permet de répondre à une recherche de manière plus rapide en n’affichant que les éléments les plus pertinents aux mobinautes. De plus, la tendance montre que la connexion sur le web est majoritairement faite depuis un terminal mobile. Pour finir, avec le responsive design plus de souci de redirection lien. Une fois mis en place, il y a très peu de maintenance à réaliser et le coût de développement est plus intéressant qu’un site mobile spécialisé.

Ce n’est pas une solution miracle

Le responsive design ne permet pas la mise en place de différentes interfaces contextuelles. Les différentes fonctionnalités d’un smartphone ou tablette (appareil photo, géolocalisation…) ne peuvent pas être développées responsive car il ne s’agit pas de faire du cas clients, mais bien d’adapter la structure de votre site sur différents points de rupture. Sinon il vous faudra créer une application native, elles sont plus adaptées à la personnalisation pour les terminaux aux petites dimensions.

A vous de jouer ! 😉

Share This