Comment rendre son site responsive ?

18 Août, 2020  - écrit par  dans Noms de domaine

Les sites web responsive : Qu’est-ce que c’est ? Pourquoi est-ce indispensable ? Comment rendre son site responsive ? 

En décembre 2012, Mashable a déclaré 2013 comme l’ « Année de la conception de sites web responsive » [lien vers en anglais]. Même avant cela, la conception de sites web responsive était un concept important, mais depuis, il est devenu omniprésent. 

Si vous n’avez pas été amené à réaliser un nouveau site web récemment, ou voire même jamais, ce concept ne vous est peut être pas familier. 

Alors pourquoi est-ce devenu un concept indispensable et comment rendre son site responsive ? Suivez le guide.  

Qu’est-ce qu’un site responsive ?

Vous vous êtes peut-être déjà demandé pourquoi un site web est différent sur un smartphone et sur un ordinateur. Ce n’est pas un hasard s’il a été conçu de cette manière. 

Un même site web peut avoir un aspect différent selon les appareils car son design est responsive.  

Qu’est-ce qu’un site web responsive et qu’est-ce qu’un design responsive ? 

Si vous ne baignez pas dans l’univers de la conception web, cette terminologie peut vous sembler obscure, bien que le responsive soit aujourd’hui devenu une pratique commune. 

Les sites web responsive sont essentiellement des sites qui tiennent compte de l’appareil depuis lequel vous le consultez.Toutefois, ce n’est pas le type de navigateur ou d’appareil qui est adapté, mais la taille de la fenêtre. 

Le premier site web qui a changé en fonction de la taille de la fenêtre était audi.com en 2001. Dans Netscape Navigator l’idée était alors tellement innovante que la page devait  se recharger chaque fois que l’on changeait la taille de la fenêtre. 

Depuis, les choses ont grandement évolué. 

Aujourd’hui, le design responsive utilise les CSS (Cascading Style Sheets, les fichiers où sont stockés tous les styles de vos pages web) pour créer différentes mises en page, tailles d’image et menus pour des fenêtres de tailles différentes. 

Pourquoi utiliser le design responsive ? 

Si ce n’est pas déjà évident, vous devez vous efforcer de rendre votre site web responsive pour que l’expérience des visiteurs reste optimale, qu’ils le visitent depuis un téléphone, une tablette ou un ordinateur. 

En 2014, pour la première fois, le trafic web provenait davantage d’appareils mobiles que d’ordinateurs. Aujourd’hui, les utilisateurs passent 59 % de leur temps sur des appareils mobiles. [lien en anglais] 

Il est clair que l’époque où l’on concevait un site web uniquement pour les ordinateurs est révolue.

Toutefois, cette utilisation représente encore 41% des utilisateurs [lien en anglais], d’où la nécessité de rendre son site responsive sur tous les types d’appareils.. 

Et mDot ?

Parfois, vous remarquerez qu’une page web se charge sous la forme « m.example.com » lorsque vous la consultez sur votre navigateur mobile et « www.example.com » lorsque vous la consultez sur votre ordinateur. Est-ce un design responsive ? 

Non, pas exactement. Dans ce cas, l’expérience de l’utilisateur est prise en compte sur plusieurs appareils, mais en réalité, le propriétaire du site web a créé deux sites web distincts, l’un pour le mobile et l’autre pour le bureau. 

Un site web se trouve dans le sous-domaine « m » et l’autre dans le sous-domaine « www » (où il peut se trouver dans le domaine nu). 

L’avantage, c’est la véritable personnalisation de l’expérience mobile d’une manière quasi impossible à atteindre en utilisant des astuces CSS. Vous pouvez avoir envie de mettre l’accent sur certains éléments pour les visiteurs de votre site web mobile et plutôt sur d’autres depuis un ordinateur. Ou bien, pour des objectifs marketing, vous pourriez souhaiter que les utilisateurs mobiles entrent dans un entonnoir de vente distinct et séparé. 

L’inconvénient c’est que votre trafic web est réparti entre deux pages web différentes. Malgré les avantages de référencement des utilisateurs mobiles sur le site m.example.com, ils ne seront pas répercutés sur www.example.com

Comment faire un site web responsive ? 

Cela dépendra de la façon dont vous souhaitez construire votre site web, de votre degré d’ambition ainsi que de votre capacité à acquérir de nouvelles compétences. 

Conception responsive « intégrée » dans un constructeur de site web

Les concepteurs de sites web en ligne ont généralement un design adapté « intégré » à l’outil de conception. Une fonctionnalité vous permet alors de visualiser votre site web à la fois sur un appareil mobile et sur un ordinateur lors du processus de conception. 

‘est la façon la plus simple d’intégrer une conception responsive puisque, en réalité, tout est pré-codé et pré-packagé pour vous. 

Utiliser un thème responsive dans votre CMS

Si vous souhaitez utiliser un CMS tel que WordPress pour créer votre site web et le rendre responsive, vous n’aurez alors qu’à choisir un thème qui respecte ces critères. 

Comme pour un outil de création de site web, la réactivité du site web est automatiquement gérée par le thème. 

⚠️ Voici le code HTML de base 

Incorporez un design responsive dans le code de votre site web

Toutefois, si vous devez personnaliser le thème de votre site sur votre CMS, ou si vous créez votre propre thème, la maîtrise de certains des éléments d’un design responsive sera nécessaire. 

Bien entendu, nous ne pourrons pas couvrir de manière exhaustive les bonnes pratiques du design responsive, mais voici quelques outils de base dont vous aurez besoin. 

Vue d’ensemble

Le « viewport » designe la zone d’une page web qu’un utilisateur peut consulter. Avant la démocratisation du responsive, les pages web conçues pour l’écran relativement large d’un ordinateur étaient écrasées dans l’étroite « fenêtre » des écrans mobiles, entraînant une expérience médiocre pour l’utilisateur. 

Finalement, le moyen de régler la fenêtre d’affichage en fonction de l’appareil a été introduit dans le HTML. Plus précisément, à l’aide de balises <meta> dans l’en-tête HTML. 

Voici à quoi ressemble cette balise <meta> : 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 Images

 Cependant, si une image dépasse de la fenêtre de visualisation (si elle est plus large que l’écran sur lequel elle est visualisée), les utilisateurs devront alors faire défiler l’image à gauche et à droite en plus de la faire défiler de haut en bas, ce qui n’est pas souhaitable. 

Pour remédier à cela, vous pouvez styliser les images avec des propriétés de largeur différentes. 

L’une d’entre elles est la largeur relative, où les images occupent un certain pourcentage de l’écran, ou de l’élément dans lequel elles se trouvent. Voilà à quoi cela ressemble :  

<img src="image.jpg" style="width:100% ;"> 

Vous pouvez également définir une largeur maximale, ce qui signifie qu’une image ne sera jamais plus grande que la largeur maximale que vous avez définie, mais qu’elle sera réduite sur les écrans plus petits. 

Voici ce qu’il en est : 

<img src="image.jpg" style="max-width:100%;height:auto ;"> 

Texte

Vous pouvez également redimensionner le texte en fonction de la taille de l’écran. Habituellement, la taille du texte est mesurée en « pt », mais vous pouvez également la mesurer en « vw » pour « viewport width ». Cela vous permet de définir la taille du texte en fonction de la taille de l’écran sur lequel il est affiché. 

Requêtes médias

Les requêtes média sont une technique de responsive utilisée en langage CSS. Elles permettent de définir des « points d’arrêt », qui autorisent le style et la mise en page de votre site à être d’une certaine taille sur un écran et d’une taille différente un autre. Le « point d’arrêt » est la largeur à laquelle il change. 

Vous pouvez concevoir votre site en fonction des appareils mobiles et utiliser votre requête média pour définir une condition spéciale lorsque l’écran est d’une certaine largeur ou juste plus large :  

@media only screen and (min-width: 600px) {

...

}

ou l’inverse :

@media only screen and (max-width: 600px) {

...

}

Vous pouvez vous en servir comme d’une condition pour presque tout contrôler. 

 Dans tous les cas, proposer un site web qui soit responsive en fonction de l’appareil utilisé est désormais absolument indispensable si vous souhaitez qu’il soit visité.

Bien que les options offertes par les thèmes des CMS et des éditeurs de sites web fassent le job, nous espérons que la lecture de cet article vous aura donné envie de vous plonger dans le code pour aller plus loin. Il n’y a pas de meilleure façon d’apprendre que de se lancer et d’essayer !