Guide responsive design : adaptez 100% de votre site web aux appareils mobiles

mars 26, 2020mars 26, 2020 Benjamin L

Aujourd’hui, je vous apporte un guide dans lequel je vais vous expliquer les aspects les plus importants pour avoir un site web responsive. Je vais passer en revue les éléments les plus pertinents dont vous devez tenir compte pour que votre site web soit parfaitement adapté aux appareils mobiles, de base pour offrir une expérience utilisateur correcte. En outre, je vous apporte une liste de conseils que vous ne devez pas ignorer si vous voulez laisser résolus tous les détails sur votre site web.

Avantages d’un site web responsive. Statistiques et données.

Utilisation accrue des téléphones portables

Le temps passé à utiliser des appareils mobiles au quotidien augmente d’année en année.
7 personnes sur 10 sont connectées chaque jour via leur téléphone portable pendant plus de trente minutes.
90 % des utilisateurs se connectent à internet depuis leur téléphone portable tous les jours ou presque.
70 % des gens regardent leur téléphone portable pendant la première demi-heure qui suit leur réveil.
L’utilisation des SMS a diminué, mais l’utilisation des applications de messagerie instantanée continue d’augmenter.
D’ici 2021, les téléphones portables seront responsables de 80 % des opérations bancaires.
Le nombre de personnes faisant des achats en ligne via un appareil mobile augmente d’année en année.

7 personnes sur 10 se connectent chaque jour via leur téléphone portable pendant plus de 30 minutes

Utilisabilité et expérience de l’utilisateur

La navigation à partir d’appareils mobiles est en augmentation, il est donc important de disposer d’un site web optimisé, adapté et utilisable sur tous les appareils. Vous améliorerez ainsi l’expérience de l’utilisateur sur votre site web. Dans ce billet, vous pouvez voir ce qu’est la convivialité et comment l’améliorer.

Bénéfique pour le référencement

Un site web responsive vous permettra de couvrir un plus large éventail de dispositifs à partir desquels ils pourront vous trouver lorsqu’ils effectueront des recherches sur Google, de sorte que vous pourrez capter davantage de trafic vers votre site web.

Vous augmenterez votre taux de conversion : les utilisateurs se sentent plus confiants pour acheter un produit sur un site web adapté aux téléphones portables.
Plus facile à optimiser : L’url est la même pour la version mobile que pour la version de bureau, vous n’avez donc à optimiser le contenu pour le référencement qu’une seule fois. Vous gagnerez du temps et de l’argent.

Guide réactif. Adaptez à 100% votre site web aux appareils mobiles

Risques de ne pas avoir un site web responsive

Si vous ignorez l’importance d’avoir un site web adapté aux appareils mobiles, vous risquez de manquer des opportunités et de courir les risques suivants :

Perte de la communauté

Les nouveaux utilisateurs réagissent à leur première impression d’un site web. S’ils ont des difficultés à consulter votre site, ils risquent de ne pas revenir et vous perdrez des lecteurs potentiels.

Perte de trafic vers votre blog

La consommation de contenu provenant des téléphones portables pourrait représenter entre 20 et 40 % de votre trafic.

Moins d’abonnés à votre liste de diffusion

Si votre Blog et votre formulaire d’abonnement ne sont pas correctement optimisés pour être utilisables sur les mobiles, vous ne ferez que frustrer vos utilisateurs, qui finalement ne s’abonneront pas.

Si vous n’avez pas un site web réactif, vous pouvez perdre la communauté et le trafic web, ainsi que les abonnements.

Comment connaître le nombre de visites que vous recevez depuis les appareils mobiles grâce à Google Analytics

Pour connaître le pourcentage de visites que vous recevez des mobiles et des tablettes, cliquez sur “Ajouter un segment” en haut de votre tableau de bord Google Analytics et sélectionnez “mobiles et tablettes”.

Vous aurez ainsi un aperçu du nombre de personnes qui visitent votre site web à partir d’un téléphone portable. Les résultats vous seront présentés comme suit :

Google Analytics vous permet également de connaître le nombre de visites que vous recevez à partir d’appareils mobiles. En accédant à votre compte Google Analytics, depuis Audience > Mobile, vous aurez un aperçu des sessions sur votre site web à partir de différents appareils.

Ce qui est intéressant, c’est que vous pourrez voir la marque des appareils qui vous rendent visite, ce qui vous permettra d’optimiser la taille de certains éléments de votre site web, en fonction de la résolution de l’écran.

Vérifiez que votre site web est correctement préparé pour les appareils mobiles

Dans un site web réactif, l’idéal est que vous puissiez lire tous les contenus sans avoir à zoomer avec les doigts. Avec Screenfly, vous pouvez consulter votre site web sur différents appareils de différentes marques, avec plusieurs tailles d’écran différentes.

Comment créer un blog responsive et adapté aux appareils mobiles ?

Il existe différentes façons d’avoir un site web responsive.

Créer une version mobile indépendante de votre blog

La création d’une version totalement indépendante de votre site web peut présenter des avantages tels que l’amélioration des temps de chargement. Comme il s’agit d’une conception différente, les images et autres éléments peuvent être optimisés bien davantage. Cela améliorera la vitesse de votre site car ils ne sont pas utilisés dans la version de bureau, qui sera plus lourde.

Si vous utilisez WordPress, le moyen le plus simple et le plus économique de rendre votre version mobile réactive est d’utiliser un plugin qui le fait automatiquement, tel que WPtouch Pro.

Utilisez un thème responsive pour l’ensemble de votre site web

Les thèmes de CMS tels que WordPress ou Joomla sont généralement tous réactifs.

L’intérêt de ces modèles est qu’ils détectent la taille de chaque écran et adaptent le contenu de manière à ce qu’il soit vu et adapté correctement. Il existe plusieurs sites permettant de télécharger des modèles adaptés, tels que Themeforest ou Studiopress.

Conseils pour la création et l’adaptation de votre site web aux appareils mobiles

Remplacer les liens textuels par des boutons visibles et facilement cliquables

Tous les boutons de votre site web doivent être visibles et cliquables à une taille optimale. Il est important de minimiser les liens dans le texte et de les transformer en boutons. De cette façon, l’expérience utilisateur sera optimale et vous gagnerez des clics sur des liens qui pourraient ne pas être visibles au premier coup d’œil.

Quelle doit être la taille des boutons tactiles pour être utilisable sur un téléphone portable ?

Apple recommande un minimum de 44px en largeur et 44px en hauteur dans votre guide
Microsoft recommande une largeur de 34px et une hauteur de 26px.
Nokia suggère des boutons qui ne sont pas plus petits que 0,7 cm de large et de haut, ou 48px de large et de haut.

Comment créer des menus et des boutons adaptés aux téléphones portables ?

Dans le cas des menus, il se peut que votre modèle ne s’adapte pas correctement et ne les affiche pas bien. Dans ce cas, vous pouvez utiliser un plugin appelé “Responsive Menu”, qui place un menu déroulant de type Hamburger et totalement réactif.
En ce qui concerne les boutons, si vous utilisez WordPress ou un CMS similaire, votre modèle intègre probablement un système de codes courts pour inclure des boutons de différentes tailles. Vous pouvez également utiliser plusieurs plugins qui font exactement la même chose.

Utiliser des formulaires conviviaux pour les téléphones portables

Les champs à remplir dans un formulaire vu du téléphone portable doivent être suffisamment grands pour pouvoir être remplis sans avoir à zoomer. Une façon simple et correcte de capturer des courriels sur les mobiles est d’utiliser des plugins tels que Sumo Me ou Optinmonster.

Ces plug-ins donnent à vos formulaires une belle apparence sur tous les appareils, vous permettant de profiter pleinement du potentiel de vos Lead Magnets.

Utiliser des passerelles de paiement adaptées aux appareils mobiles

Si vous avez une boutique en ligne, vous pouvez utiliser des plugins de paiement tiers tels que Clickbank, pour les produits numériques, ou Gumroad, qui crée une passerelle de paiement mobile très simple et utilisable.

Si vous utilisez des modèles premium pour les CMS comme WordPress ou Prestashop, il est probable que les passerelles de paiement soient assez bien optimisées.

Créer des contenus facilement scannables sur de petits appareils

Nous consommons beaucoup de contenu provenant du mobile, où nous recherchons généralement quelque chose de spécifique ou nous arrivons par les réseaux sociaux, attirés
pour un titre accrocheur.

Contenu du texte

Vous devez le rendre visuellement attrayant à scanner. Vous pouvez ainsi diriger les yeux de vos lecteurs vers les points d’intérêt et rendre leur lecture plus supportable. Vous pouvez le faire :

Créez des titres attrayants avec une bonne taille de police.
Séparez le contenu par des sous-titres.
Placez les images entre les paragraphes.

Contenu multimédia

Vos vidéos et images insérées dans votre site web doivent être correctement redimensionnées.

Vidéos réactives dans WordPress : Vous pouvez introduire le code qui apparaît à partir de l’option “Insérer”, ou mettre l’Url directement.
Plugins pour rendre les vidéos réactives : Si la méthode précédente ne fonctionne pas, vous pouvez utiliser le plugin “Advanced responsive video embedder”.
Pour insérer d’autres contenus comme des Tweets ou des publications Instagram, dans WordPress cela fonctionne également en plaçant simplement l’Url de la publication.

Profitez des contrôles réactifs dans Visual Composer

Le célèbre plugin WordPress, Visual Composer, permet d’ajuster et d’adapter vos colonnes sur les téléphones portables et autres appareils.

Cette option se trouve dans l’onglet Options réactives, dans les paramètres de chaque colonne.

Cette option vous permet de contrôler la réactivité des colonnes pour divers appareils et de faire varier la largeur des colonnes par défaut.

Vous pouvez également masquer chaque colonne dans les différents appareils afin de ne pas afficher un bloc spécifique qui ne vous intéresse pas.

Utiliser des modèles d’e-mail responsive.

Non seulement vous devez vous concentrer sur le blog ou le web, mais vous pouvez aller plus loin. Tout ce que nous avons vu est lié aux blogs ou aux sites web. Mais les courriels que nous envoyons depuis nos plateformes pour faire du marketing par courriel doivent être vus correctement.

C’est très important car plus de 60 % des e-mails que nous ouvrons pour la première fois à partir du téléphone portable.

Aujourd’hui, il est facile d’avoir des e-mails attrayants sur les téléphones portables avec Mailchimp ou Aweber. Ces plateformes utilisent des modèles totalement réactifs et s’adaptent parfaitement à tous les appareils.

Si votre modèle de courrier électronique n’est pas optimisé pour les mobiles, vous pouvez le résoudre en choisissant un modèle simple à une seule colonne pour éviter aux utilisateurs de devoir zoomer.

Comment inciter les utilisateurs à ouvrir vos e-mails

Plus important encore que de montrer quelques e-mail responsive, c’est de les faire ouvrir.

Pour qu’ils fassent le plus de clics sur vos e-mails, il est très important, tout d’abord, de connaître le nom de l’expéditeur. N’oubliez pas que vous pouvez modifier le nom affiché dans vos e-mails lorsque vous mettez en place votre campagne de marketing par e-mail.

Sur les téléphones portables, le nom de l’expéditeur du courriel ressort bien plus que le sujet lui-même. Vous devez en tenir compte et écrire des noms courts afin qu’ils ne soient pas coupés ou que les points de suspension ne soient pas retirés.

Le sujet des courriels doit comporter entre 5 et 7 mots. Ainsi, vous vous assurerez qu’aucune partie cachée n’est laissée derrière vous pour empêcher qu’il soit lu dans son intégralité. Il vaut mieux avoir un sujet court à lire que d’avoir à faire la moitié de ce que l’on veut dire.

Utilisez Media Queries pour affiner votre conception de site web responsive

Les Media Queries vous permettront de rendre votre site web totalement réactif. Vous pourrez appliquer des styles CSS à certains éléments de votre site web, de sorte qu’ils ne s’affichent que lorsque le modèle a une certaine résolution.

Ce que vous pouvez faire avec Media Queries est d’appliquer ces styles CSS, mais à condition qu’ils n’aient un effet que lorsque l’écran du navigateur est plus bas ou plus haut que la largeur que vous spécifiez.

Dans notre cas, ce qui nous intéresse, ce sont les règles “largeur minimale” et “largeur maximale”, ou ce qui revient au même, “largeur minimale” et “largeur maximale”, car pour que le contenu réponde aux besoins, nous serons intéressés par l’application de ces styles lorsque la fenêtre du navigateur se trouve en dessous ou au-dessus d’une largeur donnée.

Voici un exemple de la manière dont vous pourriez ajuster la taille de vos h2 et h3 uniquement pour les petits appareils.

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

h2 {
font-size: 25px;
}
 
h3 {
font-size: 22px;
  }       
}

Dans la version mobile, il peut être intéressant de cacher certaines rayures qui, si elles sont affichées sur des écrans plus grands. Les éléments plus visuels ou animés qui ne sont pas si importants peuvent être cachés avec le CSS.

Pour ce faire, vous devez nommer cet élément avec une classe et appliquer la règle “display : none”, au moyen d’une requête média :

@media (max-width: 480px) {

.loquesea {
  display: none;
  }
}

Pour cacher un élément uniquement dans les mobiles, par exemple, l’auteur des billets de blog, la première chose à faire est d’identifier la “classe” de cet élément. Avec l’inspecteur Chrome, c’est très facile à faire.

Si vous vouliez ne pas montrer l’auteur des entrées mobiles, le code à utiliser serait le suivant.

@media screen and (max-width: 480px) {
.post-author {
   display: none;
  }
}

Opérateurs logiques : vous pouvez écrire des requêtes en utilisant des mots comme “et”, “pas” et “seulement”.

En utilisant l’opérateur et dans vos requêtes, vous pouvez combiner plusieurs règles, telles que la taille et l’orientation de l’écran :

@media screen (min-width: 700px) and (orientation: landscape) {

Votre CSS }

Dans ce cas, la Media Query ne s’appliquerait que dans les cas où l’écran est horizontal.

Je vous montre ici un exemple de Media Query que j’ai utilisé pour adapter correctement le formulaire d’abonnement de mon site web.

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

#mailchimp input.email {
  width: 100%;
   }
}


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

#mailchimp input[type="submit"] {
  width: 100%;
  }
}

Comme vous pouvez le voir, j’ai posé comme condition que lorsque l’écran est inférieur à 480px, le champ de l’e-mail et le bouton d’abonnement occupent 100% de la largeur de l’écran.

Dans ce cas, j’utilise l’identifiant “mailchimp” pour appliquer cette règle.

En fonction de la configuration de vos requêtes médias, vous pouvez définir des règles adaptées à différentes tailles d’écran. Les formats les plus utilisés sont les suivants :

320px
480px
600px
768px
900px
1200px

Il s’agit de tailles recommandées à un niveau général, bien que si vous souhaitez peaufiner les détails, la bonne chose à faire serait d’ajuster votre gabarit à la largeur de chacun des appareils.

Types de “médias” que nous pouvons utiliser dans nos requêtes : Nous avons la possibilité d’adapter la réactivité de notre site web au détail et de l’adapter, par exemple, à une télévision. Pour cela, nous utiliserions le support télévisuel, et le code pourrait être le suivant :

@media tv and (min-width: 800px) and (orientation: landscape) {

Votre CSS }

Ce sont quelques-uns des autres moyens disponibles :

all
screen (celui utilisé pour les écrans d’ordinateur et les téléphones portables)
braille
embossed
handheld
print
projection
speech
tty
tv

Expressions : En plus des types de médias, nous avons les expressions qui peuvent être utilisées :

width
height
device-width
device-height
orientation (paysage ou portrait)
aspect-ratio (16/9 par exemple)
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

Si vous voulez en savoir plus sur la façon d’éditer votre site web dans WordPress, je vous recommande de lire cet article sur le code HTML et CSS.

Utiliser les dimensions relatives dans le CSS

Les dimensions des éléments de votre site web, en CSS, peuvent être définies par des valeurs absolues, par exemple en px, ou par des valeurs relatives, comme le pourcentage, qui sont calculées en fonction d’une autre valeur préalablement définie.

Il est intéressant d’utiliser une valeur en pourcentage lorsque nous établissons des marges ou des rembourrages dans notre toile. Pourquoi ? Parce qu’il est évident qu’un padding-gauche de 150 px sur un grand écran n’est pas la même chose que sur l’écran d’un téléphone portable. En utilisant des pourcentages, les éléments seront adaptés en fonction de valeurs telles que la largeur de chaque dispositif.

Outre le pourcentage, il existe d’autres unités de mesure relatives largement utilisées, telles que em et rem.

em : Il s’agit d’une unité relative pour définir la taille de la police. En utilisant em, la taille de la police augmentera progressivement en fonction de la taille initiale définie.
rem : c’est une unité similaire à em, mais elle prend comme référence la taille établie dans le corps du document. De cette façon, le redimensionnement des documents n’est pas dupliqué, ce qui affecte la taille, mais il conserve la taille de la police à tout moment.

Nous pourrions utiliser la mesure em de la manière suivante :

Tout d’abord, nous devons définir une valeur pour la taille de la police. Dans le code suivant, nous avons défini cette taille, et la taille pour différents appareils utilisant Media Queries.

body {
  font-size: 18px;
}

@media (max-width: 1280px) {
  body { font-size: 16px; }
}

@media (max-width: 800px) {
  body { font-size: 13px; }
}

Il ne reste plus qu’à définir la taille de chacun des différents éléments (titres, paragraphes, listes…). Dans le code suivant, nous indiquons que les h2 sont 2,3 fois la taille normale, les paragraphes sont 1,3 fois la taille normale et les listes sont 1,2 fois la taille normale.

h2 { font-size: 2.3em; }
p  { font-size: 1.3em; }
li { font-size: 1.2em; }

Réduire les effets et les animations comme les carrousels

Vous devez vérifier que tous les effets visuels de votre site web s’affichent correctement sur les différents appareils. Les effets tels que les animations ou les effets de survol peuvent être bien montrés sur les grands écrans mais échouent ou ne sont pas montrés du tout sur d’autres appareils.

Méfiez-vous des Sliders et des Carousels

Les sliders sont des éléments très visuels et attrayants sur les grands écrans. N’oubliez pas que ces images seront redimensionnées et adaptées sur les mobiles. Certains peuvent être cachés, ils ne seront donc plus utiles. Vous voudrez peut-être les adapter ou les cacher.

Il en va de même pour les carrousels. Ils sont déjà quelque peu déroutants pour l’utilisateur, qui ne détecte parfois pas qu’il doit cliquer pour afficher plus de contenu. Dans le cas des téléphones portables, il peut être beaucoup moins judicieux de les utiliser, il peut donc être pratique de ne pas les montrer.

Utiliser une taille de texte lisible

Sur les mobiles, je recommande que vos textes soient au moins 15 px afin que tous les utilisateurs puissent lire votre contenu sans avoir à zoomer.

Pour modifier la taille, vous pouvez utiliser les Media Queries comme je vous l’ai dit dans le conseil numéro 7, en introduisant le code CSS suivant :

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

p {

font-size: 12px;

}
}

Contrôler et tester en permanence

Il est très important que vous vérifiiez votre site web sur plusieurs appareils afin que tout fonctionne correctement. Si vous manquez un petit défaut dans les appareils mobiles, vous risquez de perdre un trafic précieux.

Chaque fois que vous incluez un nouvel élément, vous devez le tester et vous assurer qu’il ne quitte pas votre site web parce que vous vivez une mauvaise expérience d’utilisateur.

Conclusions finales pour un site web responsive

Avoir un site web responsive aujourd’hui est fondamental. Non seulement vous devez vérifier qu’il s’adapte correctement aux mobiles et aux tablettes, mais aussi, avoir un site web réactif signifie que tous les éléments principaux sont utilisables.

Tous ces éléments principaux de votre site web doivent être prioritaires dans un site web réactif. Les éléments qui impliquent de générer davantage de conversions doivent être adaptés au maximum. Et peut-être la programmation de votre site web ou de votre modèle devrait-elle être modifiée ou adaptée à cette fin pour optimiser la conversion sur ces appareils.

Je vous recommande de vous concentrer sur des éléments tels que les champs de vos formulaires de contact et d’abonnement, la taille de la police de vos titres ou du corps du texte dans les petits appareils, ou les éléments animés tels que les carrousels ou les curseurs. Vous pouvez adapter ces éléments avec Media Queries, ou ne pas les afficher sur les petits appareils.

Connaissez-vous d’autres points intéressants pour adapter votre site web aux appareils mobiles, ou une technique de réponse intéressante ? Si tel est le cas, n’hésitez pas à laisser un commentaire avec vos opinions.

Découvrez également :