Un site mobile-friendly est un site internet ou une interface digitale qui a un affichage adapté à tous les formats d’écrans. Google a transformé son algorithme en « mobile-friendly » afin de favoriser les sites internet optimisés mobile dans les résultats de recherche. En effet, 66,6 % de la population mondiale utilise un mobile aujourd’hui. Découvrons ensemble les différents moyens d’adapter votre site à tous les formats d’écran.

Utilisation desktop vs utilisation mobile

Aujourd’hui, il existe une multitude de support de navigation et une augmentation de l’utilisation de ces outils face à l’utilisation Desktop. Il est donc devenu indispensable de répondre aux impératifs du mobile. Votre site internet doit être capable de s’afficher sur toutes les tailles d’écrans (ordinateurs, mobiles, tablettes). Avec un site mobile-friendly, améliorez l’expérience et la navigation de vos utilisateurs afin d’augmenter leur temps de navigation et les inciter à l’achat.

Comment concevoir un site web qui s’adapte automatiquement à la résolution ?

Pour rendre votre site internet « mobile-Friendly », c’est simple, il faut adapter la lecture de votre site internet aux différents appareils de navigation. Pour cela, il existe plusieurs techniques. Vous pouvez opter pour le design responsive ou le design adaptatif. Quelle solution est la plus adaptée pour votre site internet ?

Le responsive design :

Le Responsive Design (Responsive Web Design : RWD) permet à une interface web de s’adapter à la résolution d’écran de l’appareil utilisé. L’intérêt est de proposer une navigation agréable et lisible aux utilisateurs.

Ainsi, le visiteur peut visualiser le même site internet avec les mêmes informations sur ses différents appareils digitaux. C’est grâce au code CSS que le design et l’ergonomie resteront les mêmes. Le responsive design n’adapte pas votre site internet aux supports utilisés (mobile, tablette, desktop) mais plutôt à la fenêtre d’écran sur laquelle l’utilisateur navigue afin de garantir la qualité du contenu.

Les caractéristiques d’un design responsive

• Votre interface web est construit à l’aide de grilles dites flexibles. Chaque élément de votre site est représenté dans des blocs. Ces derniers vont se déplacer selon la taille de la fenêtre. Ils vont se positionner de manière adéquate afin de proposer une expérience utilisateur agréable. Les informations se réorganisent. Les colonnes deviennent flexibles pour se déplacer et s’adapter selon la taille de l’écran. 
  
• Les images se redimensionnent et se déplacent selon la taille de la fenêtre.

• Le design responsive demande plus de temps par rapport à un site adaptatif. Il doit être pensé pour tous les écrans.

• Cette conception peut impacter le temps de chargement de vos pages.

L’adaptive design

Cette solution permet à l’utilisateur de consulter l’interface web de manière optimale. En utilisant cette technique, vous devrez créer un mise en page pour chaque outil de navigation existant. La mise en page va changer selon les écrans afin de permettre à l’utilisateur de visionner l’ensemble du contenu.

L’adaptive design se fait grâce à un script qui vérifie l’appareil sur lequel l’utilisateur souhaite visionner le site internet pour ensuite accéder au modèle conçu de cet outil. Il doit aussi être pensé pour les interfaces dont l’écran peut être tourné. Les colonnes doivent suivent le mouvement pour tous les sens existants.

Les caractéristiques de l’adaptive design

• Vous conservez l’ergonomie et le contenu, quel que soit l’appareil utilisé.
  
•  Elle demande un plus grand coût et temps de travail.
  
• L’ UX est privilégié dans la création des modèles adaptés à chaque appareil. Vous devrez pensez la mise en page selon l’utilisation de l’appareil par les visiteurs.
  
• Le dimensionnement des images doit être pensé avant l’intégration sur votre site internet pour que l’utilisateur découvre l’intégralité de la photo en un seul coup d’œil. Vous pouvez indiquer des valeurs relatives pour leur taille, plutôt que des dimensions, utilisez des pourcentages plutôt que des px.

Concevoir un site mobile friendly, n’est plus une option mais une obligation lors de la création d’un site internet. Il permet d’offrir aux utilisateurs une expérience agréable et pratique qu’importe l’écran de lecture utilisé.

Pour choisir entre un design responsive ou adaptative, analysez les pratiques et les besoins de vos utilisateurs mais aussi le contexte dans lequel ils visitent votre site internet. La différence majeure à retenir est que le design responsive possède une seule version de mise en page qui s’adapte à chaque dimension de la fenêtre d’écran de navigation. Le design adaptatif propose différentes versions de mise en page adapté selon les résolutions d’écrans.

Après la publication de votre site internet, vérifier la représentation de votre site sur différentes tailles d’écran avec Responsinator.