Vous avez sûrement entendu parler de tout ce ramdam autour du web mobile, Et vous avez peut-être entendu parler de ce que l’on a appelé récemment le « mobilegeddon » et vous pensez que vous avez probablement besoin d’un site web mobile décent. Maintenant, vous vous demandez comment rendre votre site web mobile-friendly. Mais votre site web a été construit il y a quelques années, sans penser une seule fois aux visiteurs du web mobile, qui n’existaient pas alors. Que pouvez-vous alors faire ? Comment rendre votre site mobile ?
Qu’est-ce qui est compatible avec les téléphones portables ?
Pour créer ou adapter votre site web à un environnement mobile, il nous sera utile d’avoir une idée de ce que nous visons. Quelques évidences nous viennent directement à l’esprit :
- Les pages Web devraient s’adapter à la plupart des écrans d’appareils mobiles, sans avoir à effectuer de panoramique ou de zoom.
- Les images et les tableaux ne doivent pas dépasser la largeur de l’écran.
- Les boutons et les liens doivent être assez grands, pour être facilement tapés avec les doigts et les pouces sur les écrans tactiles.
- Les pages devraient se charger rapidement, même sur les connexions lentes.
Ce dernier point est très important. Que ce soit pour les ordinateurs de bureau ou mobiles, la rapidité de chargement des pages devrait être un objectif clé. Et cela est particulièrement important pour les mobiles, Surtout que les utilisateurs mobiles seront généralement sur des connexions plus lentes que les utilisateurs sur les ordinateurs de bureau et les ordinateurs portables. En gardant cela à l’esprit, nous pouvons penser à d’autres paramètres qui peuvent définir ce qu’est le mobile-friendly :
- Le poids de la page doit être faible : c’est-à-dire que la taille de la page, en octets et en kilo-octets, doit être réduite au minimum puisque les petites pages se chargent plus rapidement et les grandes pages plus lentement.
- HTML, JavaScript et CSS devraient tous être agrégés et minimisés (c’est-à-dire en supprimant les espaces vides et autres fonctions superflues) pour limiter les tailles.
- La mise en cache : autant de ressources de pages Web que possible doivent être mises en cache. Cela signifie qu’ils seront récupérés et téléchargés en une seule fois par le navigateur. Lorsque la même page sera demandée à l’avenir, la copie locale en cache sera utilisée au lieu d’aller sur le site Web pour la télécharger à nouveau. Cela permet de gagner du temps lors des visites ultérieures.
- Le placement du script et du code de style : le fait de placer des codes JavaScript et CSS inutiles au début de vos pages Web peut bloquer votre page pendant qu’elle les traite. En ne plaçant que le code essentiel pour le rendu de la page initiale, vous pouvez améliorer le temps de chargement de la page.
- Les images doivent être compressées dans la mesure du possible pour réduire le temps de chargement.
Maintenant que nous avons une meilleure idée de ce que c’est que d’être sur le marché du web mobile, comment rendre votre site Web disponible pour les mobiles ?
Votre site est-il compatible avec les appareils mobiles ?
La première chose à faire avant de se lancer dans un projet pour rendre votre site mobile, c’est de vérifier s’il est déjà compatible mobile. Il existe un certain nombre d’outils et de services en ligne qui :
- testent si votre site est compatible avec les mobiles ;
- vous conseillent sur la façon de résoudre les problèmes liés à la mobilité.
Certains outils incluent PageSpeed Insights de Google et mobiReady.
Les outils de test mobiles sont en pleine croissance. Pour utiliser ces outils, il vous suffit généralement d’entrer l’URL de votre page Web dans une zone de texte et le service s’éteindra et exécutera une série de tests sur votre page Web. Les tests incluront les éléments mentionnés ci-dessus dans la section, ce qui est mobile-friendly ». Il présentera ensuite une liste de choses que vous devriez envisager de modifier.
Comment rendre votre site web mobile
Il existe quelques options et comme beaucoup de choses, cela dépendra de votre temps, de votre budget et de votre expertise technique.
1. Construire un site mobile séparé
Cette approche consiste à créer un modèle mobile distinct pour votre site Web. Si vous utilisez un CMS tel que WordPress ou Drupal, alors le problème est vraiment de créer un nouveau thème adapté au mobile ou d’utiliser l’un des nombreux thèmes adaptés au mobile disponibles et de disposer d’un
mécanisme approprié pour s’assurer que les appareils mobiles soient dirigés vers la page mobile et les appareils de bureau vers la page web dédié au type web bureau. Cette méthode est connue sous le nom de détection d’appareils et est utilisée par des entreprises comme Google pour s’assurer que chacun bénéficie d’une expérience optimale.
L’inconvénient est que vous devez conserver deux modèles de site distincts et selon votre budget, les frais initiaux pourraient vite augmenter pour vous.
2. Utiliser un outil de mobilisation de contenu tel que goMobi
C’est le plus rapide et le plus simple : un certain nombre de services sont disponibles et créera une version mobile de votre site depuis votre bureau. Indiquez que votre site de bureau est à http://mysitecom, puis quand vous donnez cette URL à goMobi, il parcourra votre site, en convertissant chaque page qu’il trouve en une version équivalente conviviale pour mobile à http://mysitecom. Ensuite, en utilisant la redirection de l’appareil de goMobi, chaque fois qu’un utilisateur visite le site avec un appareil mobile, il ou elle sera automatiquement redirigé vers la page mobile équivalente. Problème résolu. Avec de nombreuses options de configuration et la possibilité de passer outre les décisions automatiques prises par le système, vous pouvez modifier l’apparence et le comportement de votre site mobile.
Un grand avantage de cette approche est qu’elle ne nécessite aucune connaissance technique et qu’elle coûte très peu cher par rapport à l’une des solutions alternatives sur mesure que nous énumérons ci-dessous.
3. Utiliser une conception réactive
Cette approche de la conception de site Web est construite autour d’un modèle de page Web qui est flexible et fluide, de sorte qu’il se comprime et se développe pour s’adapter à des écrans plus petits et plus grands. Les conceptions réactives feront des choses comme pousser les éléments de page plus bas verticalement s’ils ne s’adaptent pas horizontalement sur un écran plus petit.
L’avantage de cette approche est que vous n’aurez à vous soucier que de la conception d’une seule page. Ainsi, la mise à jour de la conception de votre page Web est un peu plus facile lorsque vous aurez besoin de refaire la conception, plus tard.
L’inconvénient principal est qu’il ne satisfait pas entièrement. Les pages devraient charger rapidement suivant les exigences de convivialité mobile que nous avons mentionnées ci-dessus. Puisqu’un seul dessin est utilisé pour les appareils de bureau et les appareils mobiles, ils reçoivent généralement des pages de même taille : les images peuvent être surdimensionnées ou cachées sur l’appareil mobile, mais elles sont téléchargées quand même. Si vous choisissez cette voie, vous devriez la gérer avec soin pour vous assurer de ne pas vous retrouver avec une oie en épinette. Selon l’étendue de la conception, il pourrait être coûteux pour le travail sur mesure. Mais si vous utilisez un CMS, il pourrait être possible d’obtenir un modèle sensiblement similaire et relativement bon marché.
4. Adaptatif ou RESS
Certaines entreprises souhaiteront ou exigeront plus de contrôle sur leur site Web mobile. Les solutions RESS peuvent offrir ce contrôle. Ces solutions peuvent fournir des images et des modèles de page optimisés en fonction de l’appareil. Cela présente les avantages d’une conception réactive, ainsi que les avantages d’avoir un site mobile séparé. Vous aurez probablement besoin d’un développeur de niveau supérieur pour cela, mais ce n’est pas nécessairement plus cher que la conception réactive par exemple. Si vous pouvez vous permettre cette approche, c’est la meilleure alors adoptez la.
5. Les erreurs courantes à éviter
Enfin, les problèmes les plus courants selon Google sont les suivants :
- fichiers JavaScript, CSS et image bloqués,
- contenu illisible,
- redirections défectueuses,
- erreur 404 mobile uniquement,
- interstitiels de téléchargement d’applications,
- liens transversaux non pertinents,
- pages mobiles lentes.
Après avoir exécuté votre site à travers l’un des outils de vérification conviviale mobile, vous aurez peut-être quelques éléments à corriger. Il est possible que tout ce que vous avez à faire est d’aborder les quelques éléments ci-dessus, soit par vous-même ou mieux en embauchant un développeur pour faire le travail.
