Avec la navigation Internet mobile qui devrait dépasser l’utilisation traditionnelle de l’Internet de bureau dès 2014, selon une étude rapportée par l’équipe marketing de Smart Insights, avoir un site Web qui s’affiche correctement dans un environnement mobile devient moins un problème de luxe pour les entreprises d’aujourd’hui et plus un “must have”.
Et lorsqu’il s’agit de créer et de lancer une version adaptée aux mobiles du contenu de votre site, vous avez plusieurs options différentes. Vous pouvez:
- Créez une version mobile distincte de votre site qui réside sur votre “m.domain.com”
- Utilisez un plugin pour créer automatiquement une version mobile de votre site à la volée
- Développez et publiez une application mobile contenant les mêmes informations que votre site Web.
- Utilisez un modèle de conception Web réactif qui se redimensionne en fonction d’un certain nombre de critères différents.
Examinons chacune de ces options plus en profondeur…
Versions de sites mobiles indépendantes
Le lancement de versions autonomes de votre site Web implique la création de deux copies distinctes de votre site Web : une qui se trouve sur votre URL principale et une qui est activée pour s’afficher sur votre sous-domaine “m.domain.com” chaque fois que votre site détecte qu’il est affiché dans un navigateur mobile. . Malheureusement, il y a deux problèmes principaux avec cette approche :
- Des versions de site distinctes vous permettent uniquement de créer une version de site mobile, ce qui ne vous servira à rien lorsqu’il s’agira d’accueillir la myriade d’appareils numériques différents utilisés aujourd’hui. Disons que vous concevez la version mobile de votre site pour qu’elle soit belle sur l’iPhone 5. C’est très bien pour certains utilisateurs, mais cela risque d’aliéner les utilisateurs de tablettes ou de smartphones avec des tailles d’écran différentes.
- Construire des versions de site sur plusieurs URL n’est pas idéal du point de vue du référencement. Bing s’est clairement prononcé en faveur des solutions à URL unique, et bien que Google ait été plus circonspect sur la question, il est facile de voir à quel point l’optimisation d’une version du site est moins compliquée et présente moins de possibilités d’erreurs que l’optimisation de plusieurs versions du site. .
Plugins de sites mobiles
Étant donné que les versions de site mobile ne sont pas vraiment une option, qu’en est-il des plugins de site mobile ? Des outils comme “WP Touch” sont disponibles gratuitement et simplifient la création de sites mobiles en vous permettant d’installer un logiciel simple et d’activer automatiquement des versions de sites mobiles qui s’affichent correctement dans un certain nombre d’environnements différents.
Du point de vue du référencement, il s’agit d’une alternative beaucoup plus solide à la création de sites distincts pour accueillir les appareils mobiles. Cependant, il y a une faiblesse clé dont il faut être conscient avec les plugins de site mobile : la perte d’éléments de marque importants.
Jetez un œil à la bannière suivante sur la page d’accueil de WP Touch Pro :
Bien que le bureau soit bien conçu et bien marqué avec des polices et des jeux de couleurs distinctifs, l’interface mobile perd tout cet attrait visuel. Bien que WPTouch et des outils similaires offrent la possibilité de contrôler certains éléments visuels, ils ne se rapprochent pas de la reproduction de votre site de bureau, ce qui coûte à votre entreprise la puissance qu’offre une présence Web bien marquée.
Développement d’applications mobiles
Donc, si afficher correctement le contenu de votre site Web de bureau dans un environnement mobile est si compliqué, pourquoi ne pas ignorer complètement le processus et publier simplement les informations de votre site via une application mobile ?
Eh bien, pas si vite… Une étude d’octobre 2012 du Pew Research Center a révélé que 60 % des internautes préféreraient lire les actualités dans leurs navigateurs mobiles, plutôt que via des applications Web :
Bien que l’étude ne porte que sur la consommation des médias, on peut dire sans risque de se tromper qu’étant donné cette préférence manifeste pour la lecture de texte via les navigateurs mobiles, les applications mobiles ne devraient jamais être considérées comme un véritable substitut aux versions de sites Web mobiles.
Conception de site Web réactif
La dernière option, et celle préférée par la plupart des internautes et des référenceurs, lorsqu’il s’agit de créer des sites Web mobiles, est connue sous le nom de “conception de site Web réactif”.
Fondamentalement, une conception de site Web réactif est une conception de site qui modifie automatiquement ses paramètres d’affichage, en fonction du type d’appareil affichant le site. Si un visiteur du site Web arrive sur le site à l’aide d’un ordinateur de bureau, la mise en page du site s’affiche en pleine largeur. Mais si le site détecte qu’il est affiché sur un appareil mobile, il s’aligne automatiquement pour s’afficher correctement dans le nouveau navigateur.
Cela se produit en raison de la présence de deux technologies importantes : la grille fluide et les requêtes multimédia CSS3.
Alors que de nombreux sites sont conçus sur une base de pixels fixes, ce qui signifie que la mise en page a une largeur définie qui ne changera pas, quel que soit l’endroit où elle est affichée, les mises en page de sites réactifs utilisent un “grille fluide. « Les grilles de fluides représentent une avancée par rapport aux conceptions de distribution de liquide précédentes, car elles sont conçues en proportions plutôt qu’en pourcentages arbitraires. Lorsque des grilles fluides sont utilisées, la mise en page de votre site Web se redimensionne automatiquement en fonction du changement proportionnel des résolutions d’écran.
Bien sûr, les proportions ne peuvent vous mener que très loin. Si votre site Web utilise une mise en page à 3 colonnes, le redimensionnement de la mise en page de votre site sur un écran de navigateur mobile de 300 pixels se traduira par une mise en page assez étroite.
C’est là que Requêtes média CSS3 En particulier, les conceptions de sites Web réactifs utilisent la requête multimédia de largeur minimale, qui permet aux sites Web d’offrir conditionnellement différents ensembles de CSS en fonction de la taille détectée du navigateur. Par exemple, les requêtes peuvent être configurées pour déclencher différentes règles CSS lorsqu’elles détectent des navigateurs inférieurs à 320 px, 480 px, 600 px, 768 px, 900 px ou 1 200 px, ce qui représente la plupart des différentes tailles d’écran disponibles sur les ordinateurs de bureau et les appareils mobiles d’aujourd’hui.
Poursuivant avec notre précédent exemple de mise en page à 3 colonnes, la combinaison de la grille liquide avec les requêtes multimédias permet aux concepteurs de définir un point de “rupture”, où le style du site Web change radicalement. Au lieu de redimensionner la disposition à 3 colonnes à une taille d’écran différente, les requêtes multimédias permettent aux concepteurs de passer à une disposition à une seule colonne dès qu’il est déterminé que la disposition ne s’affiche plus correctement.
Et, mieux encore, parce que tout cela se produit à partir d’une seule conception de site, il n’y a aucun des problèmes de référencement qui résulteraient autrement de l’affichage de ces différentes versions sur des sous-domaines de site Web distincts.
La conception de sites Web réactifs n’est pas une solution parfaite, mais c’est la meilleure que nous ayons actuellement. Selon Jeffrey Veen, auteur de “The Art and Science of Web Design”:
“Chaque jour, le nombre d’appareils, de plates-formes et de navigateurs qui doivent fonctionner avec votre site augmente. La conception Web réactive représente un changement fondamental dans la façon dont nous créerons des sites Web pour la prochaine décennie.
Pour créer une version de site Web réactif, vous avez deux options différentes. Vous pouvez:
- Passez à un thème réactif pré-construit (qui est largement disponible via des services comme ThemeForest), ou
- Engagez un développeur Web pour créer une version réactive de votre site actuel.
Passer à un thème réactif est l’alternative la moins chère, mais cela peut signifier perdre certains des éléments de marque trouvés dans la conception actuelle de votre site (puisque le remplacement de votre thème ou modèle implique de modifier une toute nouvelle conception à partir de zéro). Si vous n’êtes pas attaché à la conception de votre site actuel, cela pourrait être une excellente approche pour maintenir les coûts bas tout en continuant à accueillir les utilisateurs de sites Web mobiles.
D’un autre côté, bien que l’embauche d’un développeur Web pour personnaliser le code de la nouvelle version de votre site Web réactif puisse être plus coûteuse, les coûts en valent souvent la peine pour économiser sur les maux de tête du développement et préserver la marque du site Web sur lequel vous avez travaillé si dur. créer. .
Peu importe laquelle de ces deux options de conception de sites réactifs vous choisissez, tant que vous choisissez ! La navigation sur les sites Web mobiles et la conception de sites Web réactifs sont la voie de l’avenir. Ne risquez pas de perdre des visiteurs mobiles sur votre site parce que vous ne pouvez pas vous résoudre à appuyer sur la gâchette de ce type de technologie puissante !
Image : Matts Macintosh
