Aujourd'hui plus que jamais, il est essentiel de veiller à ce que votre processus de développement intègre les meilleures pratiques et techniques pour obtenir une représentation mobile efficace de votre présence en ligne.
Que vous travailliez dans le droit, la santé, la restauration, le secteur technologique ou tout autre domaine, une implémentation mobile de haute qualité de votre application est essentielle. site est une étape cruciale à l'ère du mobile-first.
Cet auteur recommande de se concentrer sur plusieurs aspects des meilleures pratiques de développement mobile, notamment le référencement technique, le développement de sites web et les principes de conception mobile, afin de créer une présence en ligne cohérente et capable de résister à la transition vers l'ère du mobile-first de Google.
Sans plus tarder, voici 12 bonnes pratiques sur lesquelles vous devriez vous concentrer pour obtenir un site web mobile de haute qualité.
1. La section « Au-dessus de la ligne de flottaison » n'a pas entièrement disparu.
Il est important de se rappeler que dans un environnement mobile, où le défilement est infini, la partie visible sans défilement n'a pas complètement disparu.
Sur une interface mobile, il est toujours préférable d'avoir au moins une partie du contenu textuel visible sans défilement, afin de montrer à l'utilisateur qu'il y a une raison de faire défiler la page.
Les avantages psychologiques et le désir de voir ce que vous proposez ne disparaissent pas complètement, vous devez donc toujours optimiser votre offre sur différents appareils mobiles.
2. Ne vous concentrez pas toujours sur le consommateur mobile.
Avec la fusion des appareils mobiles et des ordinateurs de bureau, les objectifs et les désirs des utilisateurs de ces plateformes convergent également.
En vous concentrant sur ce que votre utilisateur souhaite accomplir en fonction de la plateforme, vous créez une approche globale qui permet d'atteindre plus efficacement les clients via votre site web.
Qu’un utilisateur achète un produit ou effectue des recherches sur les services que vous proposez, la combinaison des objectifs des utilisateurs et des acquisitions de clients de l’entreprise se poursuivra.
À tel point que se concentrer spécifiquement sur ces idéaux et ces valeurs deviendra moins nécessaire. Non pas moins important, attention, simplement moins nécessaire à mesure que cette fusion entre mobile et ordinateur se poursuit.
3. Utilisez des techniques de conception réactives
L'époque des sites web distincts en m-dot (m.example.com) est révolue.
Il n'existe aucune raison valable d'utiliser une telle implémentation à l'ère du mobile-first.
La structure peut s'avérer très désordonnée, avec de multiples URL créant des problèmes de contenu dupliqué si elles ne sont pas correctement optimisées.
De nombreuses techniques permettent d'assurer une transition efficace, mais sinon, les implémentations m-dot ont disparu avec l'avènement des nouvelles technologies.
Aujourd'hui, la mise en œuvre idéale repose sur une conception adaptative. Ces conceptions utilisent des requêtes média pour définir les résolutions d'affichage prises en charge.
Chaque résolution distincte constitue ce qu'on appelle un « point de rupture » dans la conception, ou le point auquel la conception réactive passe d'une résolution à l'autre.
L'avantage de cette structure est qu'elle évite les problèmes de contenu dupliqué que l'on rencontre avec une implémentation m-dot.
De plus, votre application mobile utilisera les technologies les plus récentes.
4. Privilégiez le code aux images pour améliorer la vitesse de votre site.
Avez-vous vraiment besoin d'utiliser ce fond bicolore comme motif répétitif de 2 pixels de large sur 1200 pixels de haut ?
Sinon, si vous ne le faites pas et que vous pouvez le coder à la place, codez-le.
Bien qu'une modification aussi mineure n'ait pas d'impact majeur sur la vitesse du site, les optimisations peuvent s'accumuler au fur et à mesure de leur mise en œuvre.
La prochaine fois que vous effectuerez un audit de site ou que vous créerez un site web, demandez-vous : « Ai-je vraiment besoin de cette image ici ou puis-je simplement l'intégrer au code ? »
Si l'image n'est vraiment pas nécessaire, coder l'objet pourrait contribuer à augmenter considérablement la vitesse du site, en particulier pour les sites web qui utilisent une quantité excessive d'éléments graphiques.
5. Personnaliser WordPress pour les appareils mobiles
De nombreux plugins sont disponibles pour WordPress.
À tel point que certains offrent même des fonctionnalités pour une compatibilité mobile accrue.
Les plugins les plus utiles à cet effet sont Duda Mobile, W3 Total Cache, ainsi que les plugins de minification HTML et CSS.
6. Assurez-vous que tout le contenu est identique sur ordinateur et mobile.
L'objectif de cette bonne pratique est d'éviter les contenus dupliqués et les accusations de dissimulation.
Par mesure de sécurité, assurez-vous toujours que le contenu de votre site soit identique sur la version ordinateur et sur mobile.
L'une des meilleures techniques à utiliser pour y parvenir est la conception réactive.
Pour ceux qui ne le savent pas, le responsive design consiste à créer une feuille de style qui utilise des « media queries » pour adapter automatiquement les designs à une grande variété de plateformes et d'appareils.
Si vous souhaitez optimiser au maximum la vitesse et concevoir un design léger et performant, pensez à utiliser les sprites CSS pour réduire les requêtes côté serveur.
7. Adopter une approche de développement « de haut en bas ».
Une approche de développement « descendante » signifie que vous prenez en compte toutes les conséquences potentielles de chaque décision prise dans une conception, du début à la fin.
Vous développez d'abord pour mobile, et non pour ordinateur, puis vous ajoutez le design mobile par la suite. Cette approche de développement est idéale car elle évite d'introduire des problèmes dans la version finale.
Voici un exemple : vous créez un site web pour ordinateur. Aux trois quarts du processus environ, vous décidez de créer un site mobile par-dessus.
Vous créez la maquette. Mais après l'avoir codée et avoir testé les transitions, vous découvrez un bug ici. Puis un autre là. Et encore un autre. C'est parce que l'approche ascendante ne fonctionne pas et entraîne une dérive du périmètre du projet.
Il s'agit du phénomène par lequel des problèmes imprévus surgissent à la dernière minute, provoquant des bugs inattendus et une augmentation des heures de travail qui n'avaient pas été prévues lors de la définition initiale du projet.
En réalité, si l'approche descendante de la conception adaptative pour mobiles avait été prise en compte dès le départ, ces bugs et ces problèmes à résoudre n'apparaîtraient pas à la fin, évitant ainsi ce problème redouté.
8. N’utilisez pas de publicités interstitielles intrusives pour vendre votre produit.
Oui, nous le savons. Votre produit est tout simplement exceptionnel. C'est d'ailleurs pour cela que nous visitons probablement votre site web et que nous nous renseignons avant d'acheter.
Mais nous n'avons pas besoin d'une publicité intrusive qui bloque notre activité sur l'ensemble de votre site pour nous importuner lors de la vente.
Dans la mesure du possible, limitez au maximum les publicités interstitielles intrusives et placez-les en bas ou sur le côté, avec au moins la possibilité de cliquer dessus pour les supprimer.
Il est important de noter que Google pénalise les publicités interstitielles intrusives. Il est conseillé de consulter leurs guides pour développeurs et leurs consignes aux webmasters à ce sujet, ainsi que leur article de blog dédié.
9. Identifiez les faiblesses de votre mise en œuvre et vérifiez les erreurs
Les faiblesses ne sont pas toujours synonymes de lenteur du site.
Cela peut signifier des problèmes d'implémentation sur différents écrans et différentes plateformes (par exemple, Windows Phone contre iPhone).
J'aime utiliser BrowserStack.com à cette fin.
Il n'y a rien de pire que d'arriver à la phase finale de la mise en œuvre mobile et de voir son client découvrir des problèmes que l'on aurait dû déceler soi-même pendant le processus de développement !
10. N'utilisez pas de vidéo Flash
Cela devrait être une pratique courante à notre époque, mais je vois encore des sites qui l'utilisent.
La vidéo Flash a disparu dès qu'Adobe a racheté Macromedia et l'a abandonnée, ouvrant la voie à la vidéo HTML5.
Si vous n'utilisez pas au moins la vidéo HTML5 sur votre site web, vos utilisateurs pourraient en subir les conséquences.
11. Utiliser les données structurées de Schema.org
Les données structurées Schema.org sont importantes non seulement pour identifier les pages de votre site contenant des informations structurées spécifiques que les moteurs de recherche doivent consulter, mais aussi, lorsque l'indexation mobile sera pleinement opérationnelle, pour lesquelles il faut s'attendre à une utilisation accrue de Schema.
Il s'agit d'une méthode concise et facile pour comprendre des informations qui peuvent ensuite être traduites en extraits enrichis dans les résultats de recherche mobile.
Quoi qu'il en soit, l'auteur est d'avis que les données structurées Schema doivent être utilisées même sur les applications de bureau, car elles peuvent vous aider à apparaître dans les extraits enrichis des résultats de recherche en fonction de votre mot-clé cible. Correctement implémentées, elles peuvent ainsi améliorer la visibilité de votre site.
12. Ne bloquez pas les scripts de support comme JavaScript, CSS ou les images.
Cela devrait relever du bon sens lors du développement de sites web pour n'importe quelle plateforme, qu'il s'agisse d'ordinateurs de bureau ou de mobiles, mais certaines personnes continuent de le faire.
Il est important de s'assurer que les scripts nécessaires au bon fonctionnement de votre site mobile ne sont pas bloqués, car ce blocage peut entraîner des problèmes tels que des erreurs 404 logicielles sur mobile et sur ordinateur.
Mais si vous empêchez Google d'explorer ces fichiers, il ne pourra pas les explorer pour vérifier que votre site web fonctionne correctement.
Lorsqu'ils ne peuvent pas le faire, cela peut entraîner une baisse de leur classement car ils ne peuvent pas comprendre pleinement votre site web.
Le « mobile first » est arrivé : et la nécessité de sa mise en œuvre a atteint un seuil critique.
Avec l'arrivée de l'index mobile-first de Google, la mise en œuvre d'un site web multiplateforme, multi-appareils et compatible avec plusieurs plateformes est désormais devenue une priorité absolue.
Cela signifie que plus vous tardez, plus… pas non seulement une implémentation mobile, mais pas La mise en place d'une solution mobile adaptée vous coûtera cher à bien des égards.
Pas seulement des classements.
Si vous n'êtes pas encore passé au mobile, pourquoi pas ?
_____
by Brian Harnish
Source: searchenginejournal.com
