Réalisation de votre site web en « Responsive design », c’est quoi ?

2013 restera comme l’année, entre autre, où le mobile aura dépassé l’ordinateur en quantité de connexion à internet. Et la tendance n’est pas prête de s’inverser. En 2015, nous devrions être pas moins de 2 milliards d’utilisateurs de l’internet mobile, contre 1,6 milliards d’internautes sur ordinateur. Avec ses 13 millions de smartphones et près de 4 millions de tablettes vendus en 2012, la France n’est pas en reste sur ce secteur.

Mais qui dit changement de pratique, dit adaptation du marché à ses nouveaux usages. Quand seulement 2% des ventes en ligne provenaient de mobiles en 2012, ce ne sont pas moins de 20% des internautes qui prévoient en 2013 d’acheter via leur smartphone et 15% depuis leur tablette. Chiffres qui ne devraient cesser d’augmenter avec le temps et l’explosion du nombre de “mobinautes”. Mais pour cela, encore faut-il disposer de sites web adaptés à la navigation sur mobile ou tablette…

Combien de fois vous est-il arrivé de vouloir consulter un site sur votre smartphone et de devoir constamment zoomer avec deux doigts et balayer l’écran au fil de votre lecture ? L’impression qui s’en dégage est un peu celle qu’on aurait à devoir lire un livre ou le journal avec une loupe. Résultat : on préfère souvent remettre à plus tard la consultation du site. Ou pas.

Eshop promotion réalise le site e-commerce de Photo Online

Eshop promotion réalise le site e-commerce de Photo Online

Pour palier à ces problèmes de lecture sur smartphone ou tablette, certaines sociétés ont opté pour le développement d’un “site mobile”. Son principe est simple : remplacer le site web existant par une version allégée et adaptée à l’affichage sur petit écran. Son inconvénient : le site mobile n’étant qu’une version allégée du site “classique”, il arrive souvent qu’une grande partie du contenu de ce dernier ne soit pas accesible dans la version light.

Une autre stratégie d’adaptation au mobile consiste à créer une application spécifique, reprenant dans un format mobile le contenu du site. Mais si ce choix peut s’avérer payant, du fait de l’engouement pour les plateformes de diffusion d’apps tels l’appstore d’Apple ou l’Android Market Place de Google, il n’en demeure pas moins un inconvénient : son coût. Créer une application mobile coûte encore relativement cher, pour une rentabilité parfois incertaine…

La troisième solution, qui nous semble la plus adaptée dans nombre de cas, porte le nom de “Responsive web design”.

Qu’est-ce que le reponsive web design ?

Théorisé par le web designer américain Ethan Marcotte, le responsive web design consiste à créer un site web dont l’affichage s’adapte à la résolution de l’écran sur lequel il est consulté. Ainsi le site n’a pas besoin d’être développé dans plusieurs versions, comme c’est le cas avec les sites mobiles. Une seule version du site existe, visible sur tous les supports.

Cération de votre site web en responsive design avec eshop-promotion

responsive design

es avantages d’une telle solution sont donc énormes. Tout d’abord économiquement : les temps de développement sont largement réduits, du fait qu’une seule version du site est créée. Et le fait que celui-ci puisse s’afficher correctement sur les différentes tailles d’écran augmente de fait ses chances d’être consulté depuis n’importe où. Dans le cas d’un site e-commerce, on comprend tout de suite les bénéfices d’une telle technologie : l’internaute/client n’étant plus assigné à son seul ordinateur pour effectuer ses achats, les opportunités de ventes s’en trouvent donc démultipliées.

Techniquement, comment ça marche ?

Pour savoir si un site est développé en responsive web design, depuis un ordinateur, rien de plus simple : réduisez la taille de la fenêtre de votre navigateur. Si la mise en page du site bouge et s’adapte à la taille de la fenêtre, c’est que le site est “responsif”. Si la mise en page reste figée, c’est qu’il ne l’est pas. Simple. Et maintenant, comment ça marche ?
Le responsive web design utilise deux composants principaux pour fonctionner : les media queries et les unités relatives. Les media queries permettent d’indiquer au navigateur quelles feuilles de style utiliser, en fonction de la résolution d’écran du terminal de consultation. Si la résolution est inférieure à un certain nombre de pixels, le navigateur ira rechercher dans la feuille de style les données correspondantes pour afficher correctement les différents éléments du site.

Les avantages du responsive web design

Les avantages du responsive web design sont donc importants : non seulement il permet de n’avoir à développer qu’un seul site web et de diminuer les coûts, mais il permet également d’optimiser l’expérience utilisateur, d’offrir un meilleur référencement (Google aime les sites responsifs et les promeut donc dans ses résultats de recherche) et enfin d’augmenter le nombre potentiel de visiteurs.

Et maintenant, la question qui s’impose : votre site est-il responsif ? Si non, et au vu de ces différents arguments, n’auriez-vous pas intérêt à ce qu’il le devienne ? L’agence TYPY est devenue experte dans le développement de site en responsive web design et saura tout autant créer que refondre un site pour le rendre pleinement compatible avec les nouvelles exigences de mobilité des internautes..

Article Pierre-Olivier Capéran
Directeur de création

 

Don`t copy text!