Tester un site pour les mobiles est important pour éviter les appels désagréables du client qui se plaint que le site que vous avez réalisé pour lui n'est pas optimisé pour tous les appareils.
La nécessité de tester les pages web sur le plus grand nombre possible d'appareils se heurte aujourd'hui à la coexistence sur le marché d'appareils aux caractéristiques totalement différentes. Il y a ceux qui utilisent un smartphone avec un écran de 3 pouces pour surfer sur le web, ceux qui préfèrent une tablette ou un ordinateur portable, et ceux qui utilisent de grands écrans de 27, 30 pouces.
Si, en plus de la variété des appareils, nous analysons également la fragmentation des systèmes d'exploitation, des navigateurs et même des différentes versions d'un même navigateur, nous pouvons comprendre que la tâche de tester un site web de manière complète est extrêmement complexe.
Mais ne vous inquiétez pas : une approche organisée des tests est possible. L'utilisation des bons outils, en plus de choix techniques précis (comme un bon cadre CSS réactif), nous permet de ramener le résultat à la maison de manière organisée.
C'est pourquoi on a créé ce guide, qui se concentre sur l'utilisation d'outils gratuits pour tester les pages Web sur les mobiles et les ordinateurs de bureau, sur un nombre raisonnablement élevé d'appareils, de systèmes d'exploitation et de navigateurs.
Pour vous permettre de ne consulter que les parties qui vous semblent les plus utiles et intéressantes, vous pouvez consulter ce guide dans la table des matières ci-dessous.
Tests sur toutes les versions d'Internet Explorer
Il fut un temps où les différentes itérations d'Internet Explorer étaient un cauchemar pour le concepteur de sites web qui, habitué à utiliser des navigateurs plus standard comme Firefox ou Chrome, se retrouvait à corriger des bogues imprévisibles et des erreurs d'origine obscure. L'habitude de Microsoft de snober de nombreuses normes fonctionnelles et répandues a rendu furieux les développeurs du monde entier.
Heureusement, aujourd'hui, les choses ont un peu changé. Explorer, à partir de la version 10 et encore plus avec la version 11, est maintenant un navigateur assez rapide et équipé de tous ces "accessoires", tels que les animations css3 et html5, qui vous permettent de construire une expérience web moderne.
Outils de développement et versions d'Explorer
Si vous disposez d'un ordinateur Windows, Explorer fournit les outils de développement, accessibles avec la touche "F12" ou avec l'élément de menu contextuel "inspecter l'élément". Ce panneau, similaire à celui présent dans d'autres navigateurs, ou au plugin FireBug, gère une fonction supplémentaire très intéressante, à savoir la possibilité de tester des pages web en utilisant le moteur de rendu des versions précédentes d'Explorer, jusqu'à la 7.
Cela signifie qu'avec Explorer 11, vous aurez en fait 5 navigateurs en 1, et vous pourrez exécuter vos tests rapidement et efficacement !
Tester Explorer sur Mac et Linux avec Virtualbox
Comment obtenir cette fonctionnalité sur une plateforme non-Windows ? La solution la meilleure et la plus fiable consiste à virtualiser Windows pour en faire votre système d'exploitation de confiance tout cela est entièrement gratuit.
C'est ce dont vous aurez besoin :
Virtualbox est un logiciel gratuit qui vous permet de créer des machines virtuelles pouvant exécuter des systèmes d'exploitation alternatifs sur votre machine. Comme la machine virtuelle est "simulée" par le système, aucune partition supplémentaire n'est nécessaire, et le système virtuel peut être démarré ou arrêté comme une application normale.
Pour télécharger l'image Windows, entrez dans le site créé par Microsoft, qui est entièrement dédié au téléchargement d'outils pour tester les pages Web, notamment des machines virtuelles, des diagnostics et des services de test en ligne (vous pouvez également les essayer moyennant paiement, un service fourni par BrowserStack).
Sur le site, vous trouverez toute une série d'images de systèmes d'exploitation Windows compatibles avec Virtualbox. Veillez à choisir celui qui convient le mieux et à télécharger toutes les parties. On recommande de toujours télécharger la version la plus récente ; de cette façon, vous disposez de plus de versions d'Internet Explorer grâce à la possibilité de tester les moteurs de rendu précédents.
Une fois que vous avez téléchargé et décompressé tous les fichiers, l'installation de l'image sur Virtualbox n'est qu'une question de clic. Il ne vous reste plus qu'à lancer le programme et à profiter de votre système d'exploitation alternatif. Pour accéder au bureau, et avec lui à la version bureau d'Explorer, il suffit de cliquer sur le carré correspondant.
Vous serez alors en mesure d'exécuter la dernière version d'Internet Explorer et d'accéder à l'internet pour consulter n'importe quel site web. Si, toutefois, vous souhaitez tester un site localement, peut-être en utilisant un serveur MAMP, vous devrez effectuer une configuration supplémentaire. Ce guide offre des instructions sur la façon d'utiliser Virtualbox avec localhost.
Pouvez-vous faire confiance à ce que vous voyez sur l'écran ? De première main, la machine virtuelle est fiable à 99%. On a testé des dizaines de sites et les résultats ont toujours été parfaits. Cependant, comme il s'agit d'une simulation, on est enclin à dire que le test sur une machine réelle reste la meilleure alternative. Bien sûr, il n'est pas très confortable d'avoir chez soi des appareils différents, alors... souvent il est conseillé de se contenter de la virtualisation !
Test sur les navigateurs "standard" : Chrome et Firefox
Les navigateurs tels que Chrome, Firefox, mais aussi Safari desktop et Opera utilisent le même moteur de rendu sur tous les systèmes d'exploitation. Cela signifie que nous pouvons être raisonnablement sûrs qu'un site testé sur, disons, Chrome Linux, fonctionnera de manière similaire sur les versions correspondantes dans d'autres systèmes d'exploitation.
Encore une fois, comme nous l'avons vu dans le cas d'Explorer, si vous voulez une couche supplémentaire de vérification, vous pouvez installer Virtualbox, et télécharger les images virtuelles dont vous avez besoin et faire un test de site mobile pour vérifier les mêmes navigateurs sur différents systèmes d'exploitation.
OSX n'est pas installable sur Virtualbox, car Apple ne fournit pas d'image adaptée à cet effet. La seule solution légitime serait donc d'utiliser un vrai ordinateur Mac, sur lequel visionner les pages, peut-être en se faufilant dans un Apple Store et en utilisant les ordinateurs exposés...
Test mobile su Android, iOS, Windows Phone
Le trafic mobile n'a cessé de croître ces dernières années. À l'heure où nous écrivons ces lignes, un tiers des pages web sont ouvertes à l'aide d'un smartphone ou d'une tablette. Il devient donc essentiel de tester tous nos sites sur des appareils mobiles, ou du moins d'essayer d'émuler au mieux leurs fonctionnalités.
En ce qui concerne le test sur les mobiles, nous avons trois solutions :
Solution 1 : test du site sur plusieurs appareils mobiles
Si vous avez un ou plusieurs smartphones et/ou tablettes à votre disposition, la vie est sans aucun doute plus facile. La nouvelle intéressante pour ceux qui possèdent un Mac et un appareil iOS (ou le simulateur) est que, grâce à Safari, vous pouvez utiliser les outils d'analyse de bureau pour tester le site mobile.
Cela signifie qu'à côté d'un test à 100 %, il n'y a pas d'autre solution.En toute confiance, nous pouvons déboguer javascript, CSS et HTML directement depuis votre ordinateur, en utilisant les outils que vous affectionnez le plus.
Solution 2 : émulateurs iOS et Android
Apple pour iOS et Google pour Android fournissent des émulateurs spécifiques. Le simulateur iOS est intégré à la suite de développement xCode, fournie gratuitement par Apple.
La bonne nouvelle est que le processus d'installation est simple. Les outils sont accessibles via le menu déroulant dans le dock, après avoir démarré xCode. La mauvaise nouvelle, c'est que xCode est une application réservée à OSX. Les utilisateurs d'autres systèmes devront donc opter pour l'une des deux solutions suivantes.
Le simulateur Android fait partie du kit SDK Android et peut être téléchargé gratuitement. Une fois que vous avez téléchargé le paquet, vous devez effectuer quelques tâches de configuration simples. Vous pouvez trouver des instructions détaillées sur l'installation d'Android Studio ici.
Pour tester sur Windows mobile, moins répandu mais qui reste un acteur important, Microsoft fournit le kit de développement logiciel spécifique, à coupler avec Visual Studio, équipé d'un émulateur. Dans ce cas également, cependant, le paquet est exclusif pour les utilisateurs du système d'exploitation Windows.
Solution 3 : Outils doux
On a récemment découvert un service en ligne qui vous permet de tester des sites à distance : Keynote. Bien qu'elle ne soit pas parfaite et qu'elle utilise des outils de simulation approximatifs, l'idée reste intéressante.
Une autre solution très "terre à terre" pour tester votre site mobile consiste à redimensionner la fenêtre de votre navigateur au minimum autorisé (généralement autour de 400 pixels) et à voir ce qui se passe.
Pour rendre le résultat plus fiable, vous pouvez également modifier l'agent utilisateur du navigateur (Safari est équipé de cette fonction, pour les autres navigateurs, vous devrez télécharger une extension appropriée) et utiliser des navigateurs dotés d'un moteur de rendu webkit, ce qui représente aujourd'hui environ 90 navigateurs mobiles ei en circulation.
Cette solution a l'avantage d'être très rapide et vous évite de devoir quitter votre poste de travail habituel ; elle est donc adaptée aux tests et vérifications rapides, mais reste un peu approximative et pas fiable à 100%.
Capture d'écran à l'aide de BrowserShots
Une dernière solution, qui vous permet d'effectuer un test "global" et de rendre le résultat de plusieurs dizaines de combinaisons de navigateurs et de systèmes d'exploitation, est le site BrowserShots.
Ce site, dont le service est offert gratuitement, vous permet d'entrer une url de votre choix et, après une période d'attente de quelques minutes, vous recevrez en retour toutes les captures d'écran.
D'autres outils permettant de tester les sites sur plusieurs navigateurs et de vérifier le responsive design
Si les outils et services énumérés ci-dessus ne vous ont pas suffi, Fabio Sarcona a sélectionné d'autres ressources précieuses pour vous. Jetez un coup d'œil ci-dessous.
Tests croisés entre navigateurs
Vous voulez tester la compatibilité de votre site Web avec différents navigateurs et systèmes d'exploitation en un seul clic ? Cross Browser Testing est l'outil que vous recherchiez. Il suffit de choisir votre navigateur (plus de 750 versions sont disponibles), d'entrer l'URL du site que vous voulez tester et le logiciel vous renverra une interface graphique qui simulera le navigateur de votre choix.
Vous pouvez également tester votre site web en version mobile. Il existe différentes interfaces qui simulent des appareils tels que l'iPhone ou Android pour une phase de test vraiment complète et simple.