Comment tester mon site sur mobile ?

Le web actuel impose certaines règles afin d’être adapté sur tous les supports. Ordinateurs de bureau, ordinateurs portables, tablettes, smartphones et parfois même télévisions. L’une de ces règles est d’avoir un site web adaptatif, plus couramment appelé responsive.

Le responsive est une forme de conception de site web permettant d’offrir une expérience de consultation adaptée à tous les supports. Comme dit précédemment, vous pouvez aussi bien visualiser et naviguer dans votre site sur un ordinateur que sur votre smartphone.

Comment savoir si mon site est adapté ?

Depuis quelques temps, les thèmes proposés dans e-monsite sont tous responsive. Si vous créez un site aujourd’hui, votre thème sera adapté. Si vous n’avez pas encore ce genre de thème, il est possible d’en changer.

Choisir le thème ne fait pas tout, il faut également utiliser du contenu adéquat en utilisant par exemple une colonne pour afficher une grande image plutôt que de l’insérer entre deux paragraphes dans un éditeur visuel. Mais même après avoir créé tous vos contenus de la sorte, il faut toujours vérifier que votre site est bien responsive. Nous allons vous expliquer comment procéder pour le tester.

Première solution

La première solution est la plus simple. Comme un visiteur, vous pouvez vous rendre simplement sur votre site depuis votre smartphone ou votre tablette afin de vérifier que tout fonctionne. Nous vous conseillons de tester les différents menus et liens afin d'avoir un avis global sur la navigation.

Néanmoins, certaines personnes ne disposent pas de ces appareils, ou ont un smartphone trop ancien avec un navigateur web non mis à jour. Dans d’autres cas, il est parfois plus pratique de tester directement sur le navigateur de votre ordinateur.

Directement dans le navigateur

Certains navigateurs disposent d’options permettant de visualiser le rendu sur différents formats. Nous prendrons ici en exemple les navigateurs Google Chrome et Mozilla Firefox.

Avec Google Chrome

Rendez-vous sur votre site via le navigateur
Appuyez sur la touche F12 de votre clavier
Une fenêtre apparaît à droite ou en bas de votre écran. En haut à gauche de celle-ci se trouvent deux petites icônes.
Cliquez la seconde icône, représentant un smartphone et une tablette.
Vous pouvez choisir la taille de l’écran sur la barre horizontale du haut. Elle vous permet de tester sur diverses résolutions, comme le Nexus 5X, l’iPhone 6 ou encore l’iPad Pro.

Avec Mozilla Firefox

Google Chrome n’est pas le seul navigateur à proposer ce genre d’outils. Mozilla Firefox permet également de tester votre site.

Sur ce navigateur, rendez-vous également sur votre site
Appuyez sur la touche F12 de votre clavier
Une fenêtre apparaît en bas de votre écran. En haut à droite de celle-ci se trouvent l'icone avec un smartphone et une tablette.
Vous pouvez choisir la taille de l’écran sur la barre horizontale du haut.

Via une extension Chrome

Le point fort de nos navigateurs actuels sont qu’ils sont ouverts à plus de possibilités. En téléchargeant des extensions, vous pouvez utilisez de nouveaux outils. Des extensions spécialisées dans la visualisation de votre site dans un petit format existent. Pour information, il n’existe pas d’extension de la sorte sur Mozilla Firefox.

Sur Google Chrome, il est vous est possible de télécharger l'extension Responsive Viewer. Cliquez sur Ajouter à Chrome pour l’installer. Celle-ci vous affichera une petite icône en haut à droite de votre navigateur. Lorsque que vous êtes sur votre site, cliquez sur cette icône. Une liste de smartphones et tablettes sous Android et iOS (Apple) vous sera proposées, à chaque fois en portrait ou paysage (landscape). Il vous suffit de sélectionner un élément dans la liste pour tester l'affichage du site dans le format de cet élément.

Via un site spécialisé

Une dernière solution existe. Si vous ne voulez pas installer d’extension sur Google Chrome ou que vous utilisez un navigateur différent, des sites web permettent de visualiser le résultat en responsive :

Rendez-vous sur le site Piresponsive
Dans la barre affichée au centre de l’écran, tapez l’adresse de votre site sous forme « www.mon-site-pro.e-monsite.com» ou « www.mon-site-pro.com» si vous possédez un nom de domaine.
La barre horizontale du haut vous propose de changer l’affichage en choisissant entre ordinateur, tablettes et smartphones. Bien que datés, les affichages proposés fonctionnent toujours de nos jours.
Vous pouvez modifier l’affichage pour passer de portrait à paysage en cliquant sur l’icône concernée à droite de l’icône smartphones.