Comment convertir un site Web pour un navigateur mobile

Les appareils mobiles, comme les smartphones et les tablettes, représentent plus de la moitié de tout le trafic Internet. Pourtant, selon une étude réalisée par BrightEdge en 2014, plus d'un quart des sites Web visités ne sont pas configurés correctement pour ces appareils, ce qui leur coûte en moyenne 68 % de perte de trafic. Modifier correctement votre propre site Web pour les navigateurs mobiles nécessite une planification et des tests. Le codage lui-même, cependant, n'est généralement pas très difficile, en particulier si vous êtes déjà familiarisé avec CSS. Si vous utilisez une plate-forme comme WordPress, vous n'avez pas du tout besoin de connaître le code.

Plateformes communes

Depuis l'avènement de l'iPhone, les développeurs derrière des plateformes de sites Web comme WordPress, Joomla et Drupal ont intégré la conception mobile. Drupal, par exemple, est livré avec des thèmes adaptés aux mobiles dans son installation d'origine. Chacune de ces plates-formes a des thèmes mobiles conçus pour démarrer dès que votre site Web détecte qu'il est accessible par un navigateur mobile. D'autres thèmes sont déjà adaptés aux mobiles et répondront aux gestes tactiles de la même manière qu'ils répondent aux clics de souris, sans modifier de manière significative la conception ou la mise en page de votre site Web sur différents appareils.

Utiliser CSS et HTML

Pour les sites Web HTML, utilisez une feuille de style en cascade, ou fichier CSS, pour présenter la version mobile de vos pages lorsqu'elles sont accessibles par un navigateur mobile. Bien qu'il soit possible de coder CSS pour détecter des appareils spécifiques, une approche plus courante consiste à spécifier des mises en page en fonction de la taille de l'écran en pixels. Si vous le souhaitez, vous pouvez avoir un style pour les grands écrans, un pour les tablettes et un pour les téléphones portables. L'utilisation de CSS a l'avantage supplémentaire de n'avoir à écrire le code qu'une seule fois - dans le fichier CSS. Chacune de vos pages n'a alors besoin que d'une seule ligne de code pour dessiner ses styles à partir de CSS.

Fonctionnalités interactives à écran tactile

Si vous avez configuré une page Web pour qu'elle soit une expérience interactive pour les visiteurs utilisant JavaScript ou HTML5, il est essentiel que vous sachiez comment votre site Web réagira aux événements tactiles, non seulement sur un navigateur mobile, mais également sur un nombre croissant d'ordinateurs de bureau à écran tactile. . Dans la plupart des cas, vous devriez envisager d'ajouter des événements tactiles et des gestes à votre code de conception. Dans JQuery, par exemple, l'équivalent d'un clic de souris sur un écran tactile est un événement de tapotement, déclenché lorsqu'un utilisateur touche puis lève un doigt de l'écran. En fonction de votre page, vous pouvez également désactiver les paramètres par défaut sur le navigateur mobile, comme pincer pour zoomer ou faire glisser pour faire défiler, en utilisant les événements "preventDefault".

Test et vérification

La meilleure façon de tester votre nouveau site Web mobile est d'utiliser votre propre appareil mobile. Examinez le style et la mise en page, naviguez avec des touches et des gestes et examinez attentivement vos images pour vous assurer qu'elles sont nettes. Vous pouvez également utiliser le navigateur Web de votre ordinateur pour émuler un affichage mobile. Sur Google Chrome, par exemple, appuyez sur "F12" pour ouvrir la console du développeur. Cliquez sur l'icône "Paramètres", puis sur l'onglet "Émulation" pour sélectionner un appareil tel qu'un Google Nexus ou un Apple iPad.