• 010/84.67.94
  • info[a]a2com.be

Le Responsive Web Design
Qu'est-ce que c'est ?

slide1

Demander un devis !









Comment se comporte un site Internet Responsive sur PC et mobile ?

screen

L'image ci-dessus présente l’affichage habituel d’un site Internet sur un ordinateur :

la largeur de l'écran permet d'afficher le site sans problème, les textes sont de taille suffisante pour être parfaitement lisibles et il suffit de défiler verticalement pour voir le contenu des pages. Mais sur un téléphone mobile ou une tablette, la largeur physique de l'écran diminue énormément, voici alors comment s'affiche le même site sur un smartphone selon que le site soit responsive ou non.

Est-ce si important que mon site soit consultable sur mobiles et tablettes ?

Il suffit de regarder autour de soi pour constater que la navigation sur tablettes et smartphones est en forte croissance. Voici quelques chiffres :

  • Plus d'un milliard le nombre de tablettes et smartphones en circulation prévu pour 2015

  • Le trafic mobile a augmenté de 70% en 2012

  • En 2012, le seul trafic mobile a représenté 12 fois la totalité du trafic Internet de l'an 2000

  • La vitesse des connexions mobile a plus que doublé en 2012

  • En moyenne, l'utilisation des smartphones a augmenté de 81% en 2012

mobile
Responsive

Le site responsive s'est adapté à la largeur réduite de l'écran.
Pour simplifier la navigation entre les pages du site, le menu s'est concentré sur un seul onglet tout en haut à droite de l’écran.
La taille des textes est suffisamment grande pour les lire confortablement, et le contenu du site s'est réorganisé dans la hauteur sans déborder en largeur. Pas besoin de zoomer ou de faire défiler le site horizontalement par des manipulations tactiles difficiles. Il suffit de faire défiler le site verticalement avec un seul doigt pour le parcourir, comme nous le ferions avec une souris sur le PC.
Les boutons et liens sont faciles à pointer avec le doigt sans risque de cliquer à côté.

Non responsive

Le site qui n’est pas responsive s'affiche de la même manière que sur l'écran d’un ordinateur, mais sur une surface 80% moins large.
Sur un écran de smartphone dont largeur fait de 5 à 6 cm de large, le contenu devient trop petit pour être lisible. L’utilisateur doit donc effectuer des manipulations tactiles interminables en zoomant d’avant en arrière et de défilement horizontal/vertical pour rendre visibles les parties du site qu'il veut consulter. Ces manipulations tactiles sont très désagréables pour un visiteur. Celui-ci quittera rapidement le site.

Devons-nous créer 2 sites : un pour mobiles et un classique ?

C'était la seule solution avant la mise en place des sites responsives, mais les inconvénients de cette méthode la rendent obsolète au jour d’aujourd’hui :

Deux sites...deux fois plus à gérer : toutes les modifications du site mobile doivent être faites aussi sur le site classique, et inversement. Pour un site dont la mise à jour doit être faite régulièrement ceci est très difficile et engendre de nombreuses erreurs. Avec un seul site responsive vous économisez du temps et de l'argent et vous êtes sûrs que le contenu est à jour pour tous les appareils.

Optimisation du référencement : avec plusieurs sites votre contenu sera tout ou en partie dupliqué avec des adresses d'accès différentes, ce qui est très nuisible au référencement (pénalité pour "contenu dupliqué"). De plus les liens et mots-clefs seront divisés sur deux sites. Il est fort difficile de contourner ces difficultés de référencement.
La création de sites distincts pour mobiles et PC n'est pas l'option retenue par les grandes marques : l'approche responsive est utilisée par Microsoft et c'est la bonne solution, celle recommandée par Google aux webmasters !

Comment savoir si mon site est responsive ?

Il y a plusieurs moyens faciles pour savoir comment se comporte un site sur un mobile ou une tablette :

Allez voir votre site sur votre smartphone et tablette : si le site s'affiche intégralement comme sur votre PC mais plus petit parce que le navigateur a "zoomé" en arrière de façon à ce qu’il tienne en largeur, alors votre site n'est pas responsive.
Consultez votre site sur votre pc et réduisez la largeur de la fenêtre : si une barre de défilement horizontale apparaît, alors votre site n'est pas responsive. Vous pouvez faire ce même test sur notre site dans votre navigateur et observez comme le site se réorganise au fur et à mesure que la largeur diminue.