Présentez-nous votre projet : 01 69 21 21 96

Qu’est-ce que le responsive design ?

Définition Responsive Design et Media Queries

Un site responsive est un site qui s’adapte automatiquement au terminal que l’affiche. En fonction du type d’écran ou de sa taille, le texte, les colonnes et les images s’ajustent, se redimensionnent et se déplacent automatiquement en fonction de la résolution de l’écran. Le but est d’apporter un confort de navigation et une ergonomie optimale pour tout le monde et sur tous les appareils.

Les Media Queries sont des éléments du CSS d’un site. Le CSS gère la mise en page d’un site internet. Une Media Queries est une règle qui définit des propriétés CSS en fonction de certaines résolutions d’écrans précises. Les Media Queries permettent de proposer des propriétés différentes pour certaines résolutions. On peux donc sans problème définir qu’un titre sera affiché en 32 pixels sur les grands écrans, mais en 20 pixels sur tous les écrans inférieurs à 720 pixels de large. Il est généralement nécessaire de concevoir 3 variations de design qui seront automatiquement sélectionnés en fonction de la largeur d’écran ou du terminal utilisé : smartphone, tablette tactile et PC fixe.

Les différences entre responsive design et site mobile dédié

La différence entre un site en responsive design et un site mobile est que le site responsive lui est conçu pour s’adapter à tout type d’écran ce qui est pratique, mais peut poser problèmes sur certains points comme par exemple le temps de chargement : les images sont les mêmes sur ordinateur et sur mobile, même si elles sont affichées en plus petit. Un site responsive doit donc être bien conçu.

Ce qui nous amène à un inconvénient des sites mobiles. Ils sont créés exclusivement pour smartphone et tablette et donc il faut créer une copie du site déjà existant pour faire ce site mobile. Cela comporte de nombreuses problématiques en matière de référencement naturel pour éviter que Google considère un site mobile comme une copie du site original.

Les avantages du Responsive Design

Voici les avantages d’un site en responsive design :

  • Il y a très peu de maintenance à réaliser,
  • Le coût de développement a un retour sur investissement plus intéressant qu’un site mobile spécialisé, le temps de développement est moins long donc moins coûteux,
  • Le site n’a qu’une seule URL et s’affiche automatiquement en fonction de l’écran sans demander de quelle manière l’utilisateur souhaite naviguer,
  • Les colonnes et les images s’ajustent, se redimensionnement et se déplacent automatiquement selon la résolution d’écran ce qui permet une bonne ergonomie en gardant la qualité de l’information du site web,
  • La conservation du référencement naturel, il n’y a qu’un seul et même site à optimiser.

Les inconvénients du Responsive Design

Voici les inconvénients d’un site en responsive design :

  • Mal conçu, le temps de chargement peut-être long  sur mobile, du fait d’images non optimisées (au niveau de leur taille et poids),
  • Le développement est plus complexe. Chaque support a ses propres contraintes, il faut adapter la navigation et l’ergonomie aux résolutions les plus populaires pour rendre l’expérience de l’utilisateur bonne sur n’importe quel terminal,

L’importance du web mobile

Aujourd’hui il est plus qu’important d’avoir un site responsive. Selon les statistiques, depuis 2012 le trafic mobile a augmenté de 70% il représentait à lui seul 12 fois la totalité du trafic internet de l’an 2000, l’utilisation des smartphone a elle augmenté de 81%. La vente de smartphones et de tablettes ne cesse d’augmenter. En 2010 c’était environ 270 millions de smartphones vendus, en 2013 c’est 561 millions de smartphones et 170 millions de tablettes vendues et en 2015 c’est maintenant 775 millions de smartphones et 318 millions de tablettes vendues par an.

C’est aussi important pour le référencement, Google met en avant les pages étant adaptés au mobile pour satisfaire ses utilisateurs. rien de plus frustrant que de naviguer sur son smartphone et de se retrouver sur un site qui n’est pas adapté. Si vous surfez sur votre smartphone et que vous voyez écrit en dessous de la balise title « site mobile », c’est que le site et adapté pour la navigation sur mobile.

Comment savoir si un site est responsive ?

Pour savoir si un site est responsive allez sur n’importe quel page et réduisez la largeur de la fenêtre de votre navigateur web, si le design du site ne bouge pas et qu’une barre de défilement horizontale apparaît c’est que le site n’est pas responsive (ou mal responsive). Si vous observez que le site se réorganise au fur et à mesure que la largeur diminue c’est que le site est responsive.

Vous pouvez aussi vérifier sur smartphone il suffit d’ouvrir votre navigateur et d’aller sur un site, si le site est adapté à la largeur de l’écran et que vous pouvez lire le texte sans avoir à zoomer c’est que le site est responsive. Si à l’inverse le site s’affiche comme sur un ordinateur et que vous avez à zoomer pour pouvoir lire le texte c’est que le site n’est pas responsive. En savoir plus sur la création de site internet.

Tous les sites conçus par notre agence sont responsive !

Demandez votre devis gratuit

Back to Top