Comment adapter son site au mobile (responsive design) ?

Web

Face au changement des habitudes de consommation de l’internet et aux modifications de Google en la matière, posséder un site internet responsive n’est plus la cerise sur le gâteau, mais cela est devenu une nécessité obligatoire pour chaque webmaster. Voici rapidement comment faire de votre site le champion des sites responsive.

2 méthodes pour transformer votre site en responsive

La première méthode consiste à créer un sous-domaine dédié au mobile. Le template css que vous utiliserez (ou les fichiers) sera uniquement consacré aux internautes utilisant un device mobile.Comment détecter? Tout simplement en se basant sur le user-agent detecté par votre serveur (le referer agent). Quelques lignes comme celle-là pourront vous aider à vous baser sur le navigateur de l’utilisateur pour le rediriger ou pas vers le sous-domaine dédié au mobile.

<?php if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))  {   header('Location: http://yoursite.com/iphone');   exit(); } >

Le principal inconvénient de cette méthode est que vous devrez en permanence maintenir 2 sites internet, ne pas avoir forcément d’effet sur le SEO et le linking externe. Adieu l’effet escompté donc des tweets, ceux-ci bénéficieront au site internet d’une version précise et pas à l’autre.

La deuxième méthode consiste à se baser sur les media queries et le CSS3 pour adapter votre site internet et le rendre entièrement responsive. La manipulation n’est pas compliquée du tout. Il s’agit de modifier une balise html dans le header de votre site web et ensuite d’ajouter des medias queries directement dans le corps de votre fichier css principal. La démarche est parfaitement expliquée comme souvent sur le site du zero.

En gros, vous devrez ajouter cette balise:

<meta name="viewport" content="width=device-width" />

puis dans un deuxième temps revoir les dimensions des principales balises (div, span…) pour adapter le rendu au support utilisé. Quelques heures de travail sont nécessaires, vous allez principalement manipuler du css, un peu de html et aucun php dans ce cas.

Tester votre mobile et son rendu mobile

Il existe deux moyens pour tester rapidement le rendu de votre site internet sur les supports mobiles. Le premier moyen consiste à utiliser votre navigateur  et à aller dans la barre de développement. Vous pourrez sélectionner l’option (un petit carré) qui vous permettra rapidement de passer d’une résolution à une autre pour vous rendre compte du rendu de votre site sur les différents supports. Cette barre de développement est soit directement installée dans votre navigateur ou vous pouvez l’installer en téléchargeant firebug, l’application de firefox.

La deuxième option consiste à passer le test auprès des robots Google, qui se chargeront de vous donner rapidement le compte rendu de la situation. Vous pouvez découvrir l’outil en ligne sur cette adresse. Google envoie un bot sur votre page, l’analyse et vous fait un rapport. Charge à vous d’améliorer votre site et de le rendre compatible avec le mobile. Vous trouverez ensuite sur le site de Google des tas de recommandations à suivre pour transformer votre site en mobile champion.

Fiverr, la plateforme avec des milliers d'offres de freelances

Découvrez notre séléction de produits pour les particuliers et professionnels.

4 thoughts on “Comment adapter son site au mobile (responsive design) ?

    1. Sur Chrome, il suffit de faire ctrl + maj + i : cela permettra de faire apparaître la barre de développement et tout en haut à droite, il faut choisir « vue adaptative ». Vous pourrez ainsi changer de vue et de format et ainsi tester le côté responsive de votre site internet.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *