Responsive Webdesign : quoi, pourquoi et comment ?

Responsive webdesign : deux mots qui n’ont pas pu vous échapper si vous vous intéressez de près ou de loin au domaine du web. Mais qu’est ce que c’est exactement ? A quoi sert le webdesign ? Et quelles sont les bonnes pratiques à respecter pour obtenir un résultat optimal ?
Differents types d'écrans

Le webdesign et le responsive, comment les définir ?

Avant de parler d’utilité, d’importance ou même de trouver des exemples d’utilisation, il est important de définir ce qu’est le responsive web design.

Le Webdesign

Bien souvent utilisé à contre-sens de sa définition d’origine, il ne se limite pas simplement à la conception graphique d’un site. Le design est souvent confondu à tort avec le graphisme, or le webdesign ne se résume pas simplement au visuel et aux couleurs d’un site.
Le webdesign désigne les étapes de la conception d’un site web et plus particulièrement de son interface. Il permet de mettre en place une architecture interactionnelle, d’organiser les pages, l’arborescence et la navigation sur tout le site. On trouve également une part de graphisme dans le webdesign. En effet, il permet de mettre en place une harmonie entre toutes les pages d’un site.

Qu’est ce qu’un site responsive ?

Site non-responsive et site responsiveAvec l’émergence des smartphones, tablettes et autres supports portables, le webdesign a dû s’adapter et c’est pourquoi est apparue la notion de responsive.
Le responsive webdesign englobe les différentes techniques de conception permettant de proposer un contenu s’adaptant automatiquement au contenant. Tel de l’eau dans un verre ou une bouteille, le contenu du site doit pouvoir s’adapter parfaitement à l’espace disponible, que ce soit un smartphone, une tablette ou un écran 24 pouces.
On peut ainsi définir le responsive webdesign comme la conception de site web visant à créer des sites offrant un contenu adapté et une navigation optimale quelque soit le support de consultation.

Quels sont les objectifs et les enjeux du responsive webdesign ?

2016 marque l’ère du « mobile-first« . En effet, les français sont plus nombreux à préférer se connecter au web via leur smartphone plutôt que via leur ordinateur. Ce changement s’explique principalement par les performances des nouveaux smartphones et tablettes.
Depuis avril 2015, Google pénalise les sites non responsives, un nouvel algorithme permettra de repérer les sites qui ne sont pas optimisés pour l’affichage mobile. Résultat : les sites non responsive verront leur référencement fortement chuter dans résultats des moteurs de recherche. Google met à disposition un test d’optimisation mobile permettant de vérifier si votre site sera concerné par ce nouvel algorithme.
Il est ainsi de plus en plus important de créer un site web pensé d’abord pour le mobile. Ces 3 règles sont à respecter :

  • rendre son site consultable sur tout les supports
  • adapter le contenu au support (utiliser des images légères et du texte court)
  • proposer un site clair et ergonomique, en respectant la règle des 3 clics (l’internaute doit pouvoir trouver son information en 3 clics)

Exemple de sites web optimisés et à optimiser

Site responsive et adapté aux supports

Exemple d'un site responsive
Les éléments du header sont repositionnés, la carte est réduite ou disparaît sur mobile. Le texte n’occupe pas une place prépondérante et le site est ergonomique.

Site non responsive avec une présentation unique

Exemple de site non responsive
Ce site ne propose pas de contenu adaptable aux tablettes ou mobile. Il s’agit simplement d’un dézoom dans la page, ce qui rend le texte trop petit et illisible. 
Rédigé par Laurence Junger 

Laisser un commentaire

Bouton retour vers haut de page