Comment tester votre site web sur mobile

Voulez-vous savoir comment tester efficacement la version mobile de votre site? Et quels sont les meilleurs outils pour tester les sites mobiles? Donc, cet article est pour vous.

Pourquoi devriez-vous prendre soin de l’optimisation de votre site mobile

À la fin de 2016, plus de 3,2 milliards de personnes avaient accès à Internet, et environ 2 milliards d’entre elles utilisaient des appareils mobiles. Selon les prévisions analytiques, un certain nombre de personnes, qui utilisent uniquement des appareils mobiles pour leurs activités Internet, connaîtront une augmentation annuelle de 25% au cours des cinq prochaines années.

Par conséquent, il est essentiel de vérifier si votre site Web est compatible avec les appareils mobiles.

Avant de commencer à tester la version mobile de votre site, essayez simplement de répondre à certaines questions courantes:

  • À quelle vitesse le site se charge-t-il?
  • Le contenu est-il attractif?
  • Le site attire-t-il l’attention sur les points principaux de votre entreprise?
  • Le site offre-t-il une bonne expérience?
  • Le site est-il facile et compréhensible pour naviguer?
  • La page de destination suscite-t-elle de l’intérêt pour les autres pages de votre site?

Les principaux facteurs d’optimisation de la performance mobile

Même si la réponse est «Oui» pour tous, vous devez faire attention aux autres facteurs d’optimisation de la performance mobile:

Vitesse de téléchargement est toujours associé à la latence du réseau, à la mémoire, au processeur et à la taille du cache. Tous sont beaucoup plus petits que ceux du bureau, le chargement prend donc plus de temps.

Chargement restrictif. Vous devez vous assurer que les utilisateurs ne téléchargent rien qui puisse affecter la vitesse du site.

Cadre réactif contribue à accélérer le prototypage des fonctionnalités et des dispositions mobiles.

Vite chargement temps vous donne un sérieux avantage concurrentiel. Les actions suivantes affectent le temps de chargement:

  • Réduire les dépendances
  • Réduire le traitement côté client
  • Réduire la dimension de l’image
  • Réduire le contenu
  • Eviter la redirection m-dot
  • Choisissez la bonne solution d’hébergement
  • Limiter les requêtes HTTP
  • Activer la compression

Voyons d’autres étapes à suivre pour vérifier le bon fonctionnement de votre site mobile.

Test de la connexion entre la version de bureau et la version mobile du site

Tests de redirections:

  • Les visiteurs mobiles doivent être redirigés vers la version mobile du site
  • Les visiteurs de bureau doivent être redirigés vers la version de bureau du site.
  • Les redirections permettent aux visiteurs d’accéder à la page dont ils ont besoin, pas à la page d’accueil.
  • Les visiteurs mobiles devraient pouvoir facilement trouver une option pour afficher la version de bureau du site.

Vérification d’en-tête Vary-HTTP. Si vos sites sont servis de manière dynamique, vous devez configurer un en-tête Vary-HTTP pour indiquer à Google et aux navigateurs que vous modifiez le code HTML par l’agent d’utilisateur.

rel = vérification des balises alternatives / canoniques. Si vos sites ont une URL distincte, les pages de bureau doivent être configurées avec un rel = « alter » tag pointant vers la version mobile de cette page. Les pages mobiles doivent être configurées avec une balise rel = « canonical » pointant vers la version de bureau de cette page.

Test de problèmes techniques

Sitemap XML mobile

  • Toutes les pages mobiles doivent être soumises à Google via un sitemap XML dans Google Webmaster Tools.
  • Les pages mobiles doivent être séparées des pages de bureau

Vitesse du site pour les appareils mobiles. Les utilisateurs mobiles, en particulier, auront probablement peu de temps à consacrer à votre application, de sorte qu’elle doit être diffusée rapidement. Outil de vitesse de page GoogleWebPagetest sont des outils utiles pour mesurer la vitesse d’un site.

Stockage et données:

  • Vérifier que le code du programme n’est pas facilement accessible
  • L’utilisateur n’efface pas le cache, assurez-vous donc que rien ne tombera en panne.

Test d’expérience utilisateur (UX)

Vue du site sur:

Smartphones: iPhone (iOS), Samsung Galaxy (Android), Nexus (un autre Android) et Windows Phone (Windows).

Tablettes: iPad (iOS), Samsung Galaxy Tab de différentes tailles (Android), Kindle Fire (Amazon) et Asus Transformer Book (Windows).

Vous devriez utiliser des outils comme Google Analytics pour identifier les dispositifs souvent utilisés par vos visiteurs.

Taille des liens. La marge entre les liens doit être au moins de 28×28 pixels. Ainsi, chacun d’entre eux devrait être facile à cliquer avec le doigt.

Flash. La plupart des navigateurs mobiles ne peuvent pas restituer le contenu Flash. Par conséquent, si vous souhaitez que votre site soit compatible avec les appareils mobiles, n’utilisez pas Flash.

Fenêtre d’affichage permet aux navigateurs mobiles de redimensionner les pages afin qu’elles s’adaptent parfaitement aux appareils. C’est pourquoi vous devez le configurer.

Pop-ups. Il y a deux raisons de ne pas utiliser les fenêtres publicitaires intempestives dans la version mobile de votre site:

  • Les pop-ups ralentissent le temps de chargement de la page
  • Les pop-ups sont trop faciles à cliquer accidentellement. Ainsi, ils éloignent les visiteurs de la page sur laquelle ils veulent être.

Les éléments finissent. Les éléments les plus importants doivent être au sommet. Le placement des autres éléments devrait avoir un sens.

La navigation. Assurez-vous que toutes les pages du site mobile sont accessibles aux visiteurs.

Contenu

  • Il devrait y avoir une page mobile équivalente pour chaque page de bureau
  • Le nombre de pages mobiles peut dépasser le nombre de pages de bureau, car il est souvent plus facile de naviguer sur les sites mobiles.
  • Vérifiez qu’il n’y a pas lexical, ni les fautes de grammaire dans le contenu de votre site.
  • Si votre site Web ne s’adresse pas uniquement aux visiteurs locaux, vous devez fournir test de localisationen d’autres termes, vérifier les aspects linguistiques et culturels appropriés pour un lieu donné.
  • Les images inutiles doivent être supprimées.

Vidéo

  • Vérifiez que les vidéos sont chargées et fonctionnent correctement
  • Utilisez un lecteur vidéo HTML5, car il est facile à rendre et léger pour les téléphones.
  • Rendez vos vidéos réactives

Page de résultats du moteur de recherche, SERP:

Vérifiez que l’URL de votre mobile est conviviale et riche en mots clés.

Google élimine les méta-descriptions pour mobiles d’environ 120 caractères. Par conséquent, les vôtres ne doivent pas dépasser cette limite.

Bien que Google vous attribue environ 70 caractères (512 pixels) dans le titre de votre page, la largeur de l’écran force le titre de la page à deux lignes. C’est pourquoi vous devez vérifier que chaque titre de page a une belle apparence sur deux lignes.

Trop plug-ins gâché toute l’expérience de votre site mobile. Vous devez donc consulter les plug-ins que vous utilisez et supprimer ceux dont vous n’avez vraiment pas besoin.

10 astuces pour optimiser la version mobile de votre site

Résumer, voici 10 bouts de conseil pour vous aider à vérifier que la version mobile de votre site est accessible aux visiteurs:

  1. Assurer la compatibilité avec les smartphones et les tablettes
  2. Vérifier le temps de chargement normal
  3. Rendre la navigation sur le site aussi simple que possible
  4. Assurez-vous que les boutons sont assez gros pour les personnes ayant le gros doigt
  5. Pas de gros blocs de texte. Utilisez des puces et des phrases courtes.
  6. N’utilisez pas Flash.
  7. Ne pas utiliser les pop-ups.
  8. Assurez-vous que les images ont la taille optimale.
  9. Vérifiez que votre numéro de téléphone est à un clic avant d’être composé
  10. S’assurer que le site Web peut accéder à votre position par GPS

Alors, maintenant, quand nous savons exactement ce qui doit être testé, examinons quelques outils et manières de le tester.

Test sur les vrais appareils

Dans un monde parfait, chaque site Web devrait être testé sur tous les appareils mobiles populaires sur lesquels il pourrait être consulté. Bien entendu, les tests sur les appareils réels présentent de nombreux avantages:

  • Les tests sont fournis dans un environnement réel avec des conditions très réelles
  • Les tests sont fournis sur le système d’exploitation réel, avec les réglages du fabricant.
  • Les performances réelles d’un périphérique sont plus faciles comparées à d’autres options virtuelles
  • Tester l’interopérabilité est plus facile
  • Réplication facile des bugs
  • La résolution de l’écran et la luminosité peuvent être facilement testées dans une série de scénarios différents
  • Des fonctions telles que les notifications push, la géolocalisation et l’orientation, ainsi que la connectivité Wi-Fi peuvent être testées
  • Le fonctionnement dans des conditions d’interruptions entrantes, comme les SMS et les appels, pourrait être testé
  • Le fonctionnement dans des conditions de drainage de la batterie pourrait être testé

Malheureusement, le monde dans lequel nous vivons n’est pas parfait. Voici quelques démérites des tests sur les vrais appareils:

  • Il y a beaucoup d’appareils mobiles
  • Les tests sur les appareils réels sont coûteux et prennent beaucoup de temps
  • Même si votre entreprise dispose d’un large éventail d’appareils mobiles, les employés, situés dans d’autres bureaux ou travaillant à distance, n’auront pas accès à tous les appareils.
  • La maintenance de l’appareil est également coûteuse

Test mobile en ligne sur les appareils réels

Nous devons donc trouver un autre moyen de tester le site mobile. Il existe des outils spéciaux, qui utilisent réellement la connexion à distance à de vrais périphériques. Certains de ces outils sont présentés ci-dessous.

Tests Keynote Mobile (anciennement Keynote DeviceAnywhere)

keynote logo

Solution basée sur le cloud Keynote Mobile Testing, qui possède la bibliothèque complète de vrais appareils mobiles.

Bien entendu, il s’agit bien plus que d’un simple outil de test de page mobile. Mais si nous considérons les tests Keynote Mobile comme un outil de ce type, il convient de mentionner les avantages suivants:

  • Véritable réseaux d’opérateurs mobiles et Wi-Fi
  • Prise en charge du premier jour pour les nouveaux appareils à mesure qu’ils sont commercialisés
  • Il génère automatiquement une liste de périphériques en fonction de critères de couverture: mémoire, CPU, fabricants, version du système d’exploitation, support, etc.
  • Base de données détaillée des fonctionnalités par périphérique et système d’exploitation
  • Assistant facile à utiliser pour vous aider à déterminer rapidement les périphériques à prioriser pour le développement et les tests

Quelques démérites de Keynote Mobile Testing:

  • Keynote Mobile Testing n’examine pas les informations vitales de l’appareil
  • Il n’y a pas de support de réservation de périphérique

BrowserStack

logo de la pile du navigateur

BrowserStack est un outil de test inter-navigateur, qui vous donne accès à la très grande variété de véritables appareils mobiles.

Voici quelques fonctionnalités du BrowserStack:

  • Vaste spectre iOS et Android: versions iOS allant d’iOS 3 à iOS 10, Android – de Donut (1.6) à Nougat (7.1)
  • Vérifications rapides avec captures d’écran
  • Analyse Web pour votre site Web
  • Déboguez facilement vos sites Web mobiles avec les outils de développement Chrome sur iOS et Android.
  • Accès aux appareils supplémentaires par paramètres géographiques
  • Gestes naturels et interactions
  • Option de test de sécurité

Quelques points faibles du BrowserStack:

  • Les performances du serveur semblent se dégrader au fil du temps lorsque de nombreux utilisateurs testent
  • BrowserStack a tendance à être assez coûteux et l’option gratuite est très limitée.
  • Une façon de simuler le pincement à 2 doigts sur les téléphones et les tablettes

Laboratoire de qualité continue Perfecto Mobile

Logo Perfecto

Perfecto Mobile Continuous Quality Lab est une autre plate-forme basée sur le cloud qui ne propose pas uniquement une option de test de page mobile. Dans le cadre du test de la version mobile de votre site, les avantages suivants doivent être déterminés:

  • Test en temps réel sur plus de 500 appareils différents
  • Non seulement Android et iOS, mais aussi les plateformes WinPhone, Symbian et Blackberry sont disponibles pour des tests
  • Partage d’appareil
  • Tests d’automatisation simultanés sur plusieurs appareils
  • Support de capture d’écran

Certains des inconvénients de la qualité continue de Perfecto Mobile sont les suivants:

  • Image indistincte (souvent illisible)
  • Long temps de réponse
  • La version d’essai gratuite est limitée à 60 minutes.

Test avec des émulateurs mobiles

Un autre moyen possible de résoudre le problème du manque d’appareils réels consiste à utiliser des outils spéciaux, qui émulent ou simulent ses fonctionnalités.

L’utilisation de ce type d’outils vous permet d’identifier les problèmes et les problèmes liés au site Web et de prendre des mesures correctives pour rendre le site Web attrayant et fonctionnel sur les appareils mobiles.

Les gens confondent souvent “émulateur” et “simulateur”. Bien que les deux sons presque identiques, il existe encore une différence entre eux.

Un émulateur remplace le périphérique d’origine. Il peut exécuter le même logiciel et les mêmes applications que le périphérique d’origine sans les modifier et ne peut même pas indiquer la différence entre le système dupliqué et le système dupliqué.

Par ailleurs, un simulateur peut configurer un environnement similaire à celui du système d’exploitation du périphérique d’origine, mais ne tente pas de répliquer son matériel.

Ainsi, les émulateurs sont préférables pour les tests de sites mobiles, alors que les simulateurs sont meilleurs pour les tests d’applications mobiles.

Voyons quelques émulateurs souvent utilisés

MobileMoxie

logo mobile moxie

MobileMoxie Emulator fait partie intégrante de MobileMoxie Marketing Toolset. Il vous aide à offrir des expériences mobiles exceptionnelles à vos clients. C’est facile a utiliser. Entrez simplement l’URL de votre site Web dans le champ approprié.

moxie mobile

Windows Phone Emulator

logo de téléphone windows

Windows Phone Emulator est l’environnement mobile spécial où vous pouvez tester, afficher et déboguer des applications Windows Phone et utiliser le navigateur pour consulter des sites Web. Quelques avantages de Windows Phone Emulator:

  • SDK complet avec émulateur de périphérique
  • Plusieurs résolutions d’écran
  • Outil de capture d’écran
  • Simulation d’accéléromètre

Limitations de Windows Phone Emulator:

  • Cela ne fonctionne que sous Windows.
  • Le niveau de luminosité de l’émulateur est toujours «élevé»
  • Caméra et vidéo sont utilisés avec des limitations

Emulateur Android Studio

logo studio android

L’émulateur Android Studio vous permet de créer un appareil mobile virtuel pour exécuter des applications Android et tester des sites Web mobiles. L’émulateur est situé dans le package du SDK Android.

Avantages de l’émulateur Android Studio:

  • Cela fonctionne sur Windows, Mac OS X, Linux
  • L’émulateur Android Studio peut transférer des informations plus rapidement qu’avec un périphérique matériel connecté.
  • Environnement unifié où tous les appareils Android peuvent être utilisés

Quelques inconvénients de l’émulateur Android Studio:

  • Si vous avez juste besoin du navigateur pour tester les sites Web mobiles, vous devriez télécharger beaucoup de choses inutiles
  • Quelques limitations techniques: 8 Go de RAM sont recommandés; 4 Go d’espace disque disponible sont recommandés.

Emulateur Mobile Opera 

logo de l'opéra

Opera Mobile Emulator est une démonstration en direct du navigateur de téléphone mobile d’Opera, qui fonctionne comme lors d’une installation sur un combiné. Certains outils de débogage supplémentaires sont également disponibles, tels que les raccourcis clavier, le sélecteur de profil et divers indicateurs de ligne de commande.

Les principaux avantages de l’émulateur Opera Mobile:

  • Il est simple à installer et à utiliser. Vous n’avez pas besoin d’installer de SDK complexes ou quelque chose comme ça.
  • Trois modes de saisie sont disponibles: tactile, clavier et tablette.
  • Il est préconfiguré avec une série de profils de téléphone et de tablette
  • Tous les modes peuvent être activés et contrôlés par des liens et des contrôles
  • Débogage à distance avec de vrais appareils

Quelques points faibles de l’émulateur Opera Mobile:

  • Vous pouvez vérifier l’aspect des pages uniquement dans le navigateur mobile Opera.
  • Moins de support média

Outils adaptés à la mobilité et de validation

Il est bien connu que Google indexe les sites Web compatibles avec les appareils mobiles ou non. C’est pourquoi vous devriez utiliser des outils spéciaux pour vérifier si votre site Web répond aux critères généralement acceptés.

En règle générale, tous ces outils sont faciles à utiliser. Il vous suffit de saisir l’URL de votre page dans le formulaire approprié.

Test de Google adapté aux mobiles

logo des développeurs google

Le test de compatibilité mobile de Google est l’outil qui vous indique si Google considère que votre page est compatible avec le mobile ou non. Si votre site Web réussit le test, un message vert indiquant «Génial! Cette page est adaptée aux téléphones portables ». Si le message ne passe pas, le message sera rouge et indiquera «Pas compatible mobile».

Dans ce cas, la page sera abaissée dans les résultats de la recherche mobile au profit de pages similaires provenant d’autres sites compatibles avec la technologie mobile.

mobiReady

logo mobiReady

MobiReady permet d’évaluer l’état de préparation mobile de votre site Web en utilisant les meilleures pratiques et normes du secteur. Le rapport gratuit fournit à la fois un score (de 1 à 5) et une analyse en profondeur des pages pour déterminer les performances de votre site sur un appareil mobile. Les principaux avantages de mobiReady sont les suivants:

  • Rapports d’erreur détaillés
  • Test à l’échelle du site
  • Un outil de visualisation pour voir à quoi ressemble votre site sur un écran de téléphone portable
  • Tests W3C mobileOK
  • Il conseille d’améliorer l’état de préparation de votre site Web pour les appareils mobiles

Service de checker W3C mobileOK

logo w3c

W3C mobileOK checker est un service gratuit de W3C (le consortium mondial pour les standards Web) qui permet de vérifier le degré de convivialité des documents Web sur le Web, et en particulier de déterminer si un document Web est «mobile OK».

Les tests sont définis. dans le MobileOK Basic Tests 1.0 spécification. Ce n’est que si l’âge du Web réussit à tous les tests qu’il obtiendra le statut «mobileOK».

Les autres options, qui pourraient être validées:

Varvy

logo varvy

Varvy est une collection d’outils gratuits permettant de tester le référencement, la vitesse et les fonctionnalités mobiles d’un site Web.

Les principales caractéristiques de Varvy:

  • Test de conformité aux directives Google
  • Optimisation de la vitesse de la page
  • Un large éventail de conseils et de directives pour optimiser les performances des pages Web

Tester des outils de vitesse de site Web

Comme mentionné ci-dessus, la vitesse de téléchargement et d’exploitation de votre site Web a un impact direct sur le nombre de ses visiteurs.

Il existe des outils simples et avancés pour tester la vitesse des pages, l’optimisation des moteurs de recherche et les performances du navigateur mobile. Vous devez mesurer non seulement la vitesse de votre site Web, mais également celle de vos concurrents. Suivez les recommandations concrètes pour améliorer vos résultats.

Voici quelques outils qui peuvent vous aider à le faire.

Page Speed Online de Google

google page speeed test logo

Page Speed Online de Google est un outil complet qui vous permet non seulement de vérifier les performances, mais également de vous fournir de nombreuses informations. En plus de cela, il contient également un rapport sur les meilleures pratiques que vous pouvez utiliser pour les appareils mobiles, afin d’optimiser leurs performances.

Pingdom

logo pingdom

Pingdom vous permet d’identifier ce qui est rapide, lent, trop gros et les meilleures pratiques que vous ne suivez pas. Tous les tests sont réalisés avec de vrais navigateurs Web, de sorte que les résultats correspondent à l’expérience de l’utilisateur final. Les tests sont enregistrés afin que vous puissiez suivre vos performances dans le temps.

GTmetrix

Logo GTmetrix

GTmetrix vous permet d’effectuer des tests à partir de plusieurs régions et d’analyser vos performances sur mobile. Obtenez la vitesse de chargement de votre site ainsi que des recommandations concrètes pour faire face à vos goulots d’étranglement.

Impact de charge

logo d'impact de charge

Load Impact permet d’exécuter des tests de charge à grande échelle avec jusqu’à 1,2 million d’utilisateurs simultanés. Il génère une charge à partir de 10 emplacements différents simultanément, et ajoute même d’autres emplacements sur demande. Load Impact simule le trafic exactement comme cela se passerait dans la vie réelle.

Moniteur Dotcom

logo dotcom-moniteur

Le test de vitesse de Dotcom-Monitor permet à un utilisateur de sélectionner le navigateur à partir duquel il souhaite effectuer le test: Chrome, Firefox, Internet Explorer et les navigateurs mobiles, notamment iPhone, iPad, etc. Vous avez la possibilité de tester votre site Web à partir de 20 endroits dans le monde.

Une fois le test terminé, les utilisateurs peuvent consulter des rapports de performances et une analyse graphique en cascade. L’espoir, les informations et les outils mentionnés dans cet article seront vraiment utiles pour augmenter la disponibilité de votre site pour la téléphonie mobile. Nous aimerions connaître votre expérience de son utilisation pratique. Peut-être que vous pouvez recommander d’autres outils. Faites le nous savoir dans les commentaires.