Test et analyse d’un site sur plus de 2200 mobiles avec MITE Keynote

MITE (Mobile Interactive Testing Environment) est un logiciel qui a été développé par la société Keynote. Cette dernière se spécialise dans la mesure et les tests de qualité sur mobile. Je ne connaissais pas l’outils jusqu’à peu car j’utilise d’autres systèmes semblables à celui-ci. Je dois dire que la qualité du logiciel est étonnante. Il inclut une flopée de fonctionnalités :

  • Il est gratuit
  • Il gère une quantité impressionnante de mobiles et tablettes
  • Il permet d’analyser et de corriger les points bloquant du site testé
  • Il permet de créer des macros (un peu comme à la Sick submitter ou Zeno Poster)
  • Il permet de jouer avec la géolocalisation
  • Il gère les actions tactiles
  • etc.

 

mite tester mobiles

 

Comment fonctionne MITE ?

MITE est un simulateur. Il envoie en fait les mêmes en-têtes qu’un mobile de façon à se faire passer pour lui. Cela n’inclut pas seulement le User Agent mais également toutes les en-têtes spécifiques a chacun des modèles de la base de donnée de supports qui sont envoyés lorsqu’ils accèdent à un serveur web. Le serveur ne peut donc pas différencier un vrai mobile de MITE.

En outre, MITE simule le comportement de téléchargement d’un mobile en téléchargeant le même nombre de fichiers simultanés qu’un appareil peut télécharger. Par exemple, MITE télécharge quatre images simultanément sur l’iPhone 4 parce que c’est le nombre de threads simultanés qu’il peut exécuter.

Comme je ne prends pas tout pour argent comptant, j’ai fait quelques tests. Voici tous ce que le serveur renvoie lorsque je tente d’y accéder avec mon PC et Chrome :

[Accept] => text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
[Accept-Charset] => ISO-8859-1,utf-8;q=0.7,*;q=0.3
[Accept-Encoding] => gzip,deflate,sdch
[Accept-Language] => fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
[Cache-Control] => max-age=0
[Connection] => keep-alive
[Host] => www.lije-creative.com
[User-Agent] => Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11

 

Voici ce que j’obtiens avec un Samsung Galaxy SII :

[Accept] => application/xml, application/xhtml+xml, text/html;q=0.9, text/plain;q=0.8, image/png, */*;q=0.5
[Accept-Charset] => utf-8, iso-8859-1, utf-16, *;q=0.7
[Accept-Encoding] => gzip
[Accept-Language] => fr-FR, en-US
[Cache-Control] => max-age=0
[Host] => www.lije-creative.com
[User-Agent] => Mozilla/5.0 (Linux; U; Android 2.3.3; fr-fr; GT-I9100 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
[X-Wap-Profile] => http://wap.samsungmobile.com/uaprof/GT-I9100.xml

 

Voici ce que j’ai avec un vieux Blackberry 6280 :

[Accept] => application/vnd.rim.cod, application/vnd.rim.html, application/vnd.wap.multipart.alternative, application/vnd.wap.multipart.mixed, application/vnd.wap.multipart.related, application
/vnd.wap.wmlc, application/vnd.wap.wmlscriptc, image/gif, image/png, image/vnd.rim.png, image/vnd.wap.wbmp, text/html, text/plain, text/vnd.sun.j2me.app-descriptor, text/vnd.wap.wml, text/vnd.wap.wmlsc
ript
[Accept-Language] => En
[Cache-Control] => max-age=0
[Connection] => keep-alive
[Host] => www.lije-creative.com
[User-Agent] => BlackBerry6280/3.7.0 UP.Link/5.1.2.2

 

blackberry-6280

 

Les résultats sont plutôt concluants pour ma part. L’outil est très rapide mais parfois un peu défaillant.

 

L’analyse d’un site avec MITE

MITE donne plusieurs informations quand vous naviguez sur un site internet :

accueil mite keynote

 

Le cadre rouge permet de visualiser votre site tout simplement. Le cadre vert vous donne une note basée sur plusieurs critères accompagnée d’informations sur la page :

  • poids
  • temps de téléchargement
  • statut HTTP
  • nombre d’images
  • nombre d’éléments dans la page

 

Le score est calculé sur une échelle de 0 à 100 et se base sur des résultats de tests qui impactent le contenu et les performances des pages web ainsi que si le site est développé selon les standards mobiles W3C. La moyenne de ces tests donne le score de MITE.

Enfin, le cadre bleu donne le résultat de tous les tests effectués sur la page courante. En cliquant sur l’un d’eux, MITE vous donne le résultat du test. Si je prends le test “JavaScript at bottom” (il est de mise de mettre tous les fichiers JavaScript à la fin des pages pour améliorer le chargement de celui-ci), MITE m’affiche ceci :

test javascript

 

Vous avez également 3 modes de vue (cf cadre vert). Vous pouvez par exemple afficher le chargement de tous les fichiers de la page comme à la Google Page Speed :

performence

 

Vous pouvez rapidement passer d’un iPhone, à un Android ou un Blackberry afin d’auditer le sites sur différents OS :

liste mobiles

La création de Macro

Vous commencez à cerner l’importance de développer des sites de qualité compatibles avec les mobiles, c’est d’ailleurs pour cette raison que vous êtes tombé sur cet article. Le problème est que cela prends pas mal de temps d’identifier les points bloquants sur différents mobiles. Les développeurs de MITE Keynote ont pris en compte ce point. C’est intéressant notamment pour les agences qui souhaitent se placer sur le secteur de la création de sites compatibles mobile.

Le principe de fonctionnement est simple, un client vous contacte et aimerait que son site soit compatibles sur tous les iphones et la majorité des téléphone Android. Android possède beaucoup de version et l’affichage d’une page peut différer d’un mobile à un autre ou d’une version à une autre. Dans un premier temps, il faut sélectionner un mobile et naviguer sur le site. MITE enregistre les différentes étapes et les résultats des différentes pages. En mode avancé, la macro ressemble à ça :

StartPage( "Agence web basée à Strasbourg (Alsace) | LIJE Creative" );

Page.setEndOfPageOnEndDOMMessage( 1 );
Page.setEndOfPageOnHTTPInactivity( 2000 );
Start("https://www.lije-creative.com" );
Page.clearEndOfPageSettings();

StartPage( "Portflio | Nos créations" );

Page.setEndOfPageOnEndDOMMessage( 1 );
Page.setEndOfPageOnHTTPInactivity( 2000 );
ClickOnLink( "PORTFOLIO" , "https://www.lije-creative.com/portfolio/" , 9 , "" );
Page.clearEndOfPageSettings();

StartPage( "Devis : création de site et de logo et référencement" );

Page.setEndOfPageOnEndDOMMessage( 1 );
Page.setEndOfPageOnHTTPInactivity( 2000 );
ClickOnLink( "DEVIS" , "https://www.lije-creative.com/devis/" , 10 , "" );
Page.clearEndOfPageSettings();

StartPage( "Blog SEO, veille et actualités technologiques" );

Page.setEndOfPageOnEndDOMMessage( 1 );
Page.setEndOfPageOnHTTPInactivity( 2000 );
ClickOnLink( "BLOG" , "https://www.lije-creative.com/blog/" , 11 , "" );
Page.clearEndOfPageSettings();

StartPage( "Labo | Expérimentations techniques" );

Page.setEndOfPageOnEndDOMMessage( 1 );
Page.setEndOfPageOnHTTPInactivity( 2000 );
ClickOnLink( "LAB" , "https://www.lije-creative.com/lab/" , 12 , "" );
Page.clearEndOfPageSettings();

StartPage( "Page 6" );

Page.setEndOfPageOnEndDOMMessage( 1 );
Page.setEndOfPageOnHTTPInactivity( 2000 );
ClickOnLink( "SERVICES" , "https://www.lije-creative.com/services/" , 3 , "" );
Page.clearEndOfPageSettings();

StartPage( "Page 7" );

Page.setEndOfPageOnEndDOMMessage( 1 );
Page.setEndOfPageOnHTTPInactivity( 2000 );
ClickOnLink( "CRÉATION DE SITE" , "https://www.lije-creative.com/services/creation-de-site/" , 4 , "" );
Page.clearEndOfPageSettings();

 

Lorsque votre macro est terminée, vous pouvez la lancer rapidement sur plusieurs mobiles en les sélectionnant dans la fenêtre suivante :

macro

 

Puis, une fois lancée :

macro MITE lancee

 

Vous pouvez par la suite visualiser rapidement les résultats des tests :

résultats tests

 

Vous pourrez par la suite regrouper plusieurs tests sur plusieurs mobiles en simultané et en modifiant même des paramètres de géolocalisation :

liste tests

 

MITE renferme pas mal de pépites. Testez le et comparez le aux alternatives actuelles du marché. Vous serez surpris.

PhoneGap et jQuery Mobile : tuto connexion serveur distant
Site pour les mobiles : 6 points importants

4 Comments on “Test et analyse d’un site sur plus de 2200 mobiles avec MITE Keynote”

  1. Hello Jérôme

    Je me posais la question suivante : si on part du principe qu’en dehors d’Android, de iOS et de Windows Phone, on abandonne le reste des autres OS car “on” considère que ces gens là n’ont qu’à mourir parce qu’ils ont pas un smartphone digne de ce nom, et que de toute façon, ce sont pas de bons consommateurs, non rien à f***** de ces gens qui ne cliquent pas sur les pubs ou ne remplissent pas les formulaires de lead………

    …..Oui, c’est excessif :) héhé !

    Je la refais en étant moins excessif mais pragmatique :

    Si on pars du principe que le monde du mobile et des tablettes se résume à
    – Android 1.6+, idéalement 2.0+
    – iOS 5+
    – Windows Phone 7.5 +

    il suffit de se fixer un seuil de compatibilité avec les 3 navigateurs standards de ces OS. Et uniquement ceux là.
    Car les personnes qui changent de navigateur sont des utilisateurs avancés qui mettront à jour leur navigateur. Et donc leur smartphone !

    Et donc, rien à faire de la compatibilité avec les smartphones :)

    CONCLUSION

    quand on a du budget, on peut se permettre d’être compatible avec plus de navigateurs, de versions et de smartphones… quand on a du budget :)

    Et quand on a pas de budget, on essaye de se conformer à un framework (de site ou de template) dont on aura vérifié la couverture de compatibilité mobile au préalable. Cela permet d’éviter de se poser la question de la compatibilité.

    NOTA : que le template soit responsive ou pas ne change rien au problème. Les gens savent scroller au pire :)

    1. Salut Loran,

      J’ai déjà bossé pour une banque quand j’étais au Canada. On avait utilisé jQuery Mobile pour le prototyping mais dans ces cas précis, se dire que c’est compatible d’après les specs et le tableau donné par jQuery ne suffit pas. On avait acheté pour l’occasion 5 mobiles différents et Blackberry devait absolument être compatible (beaucoup utilisé au Canada). Effectivement, ils avaient pas mal de budget ;)

      Donc on peut bien sûr s’aider d’un framework mais ça n’empêche pas de faire des tests quand on sait que derrière, des dizaines de milliers de personnes navigueront sur le site.

      Si possible, sur mobile je ne veux pas scroller. Quand je tombe sur un site responsive bien codé je me sens comme dans mon canapé. C’est le confort. Mais si tu veux vendre et que tu as un site ecommerce, tu vas devoir passer par là ;)

  2. Lorsque j’ai lu cet article je me suis dit “wow, c’est peut-être ce que je cherche depuis des mois !”. Je l’ai donc installé et testé sur plusieurs sites responsives que nous avons réalisés ces derniers mois et le résultat est pitoyable, ça ne ressemble pas du tout à ce que l’on voit sur les terminaux en réalité. Du coup, désinstallé immédiatement. Useless.

    1. J’ai l’ai testé sur quelques sites et pour ma part, il fonctionnait plutôt bien. Comme je recherche toujours, comme vous, l’outil idéal, pouvez-vous me donner les sites qui ne ressemblait pas du tout aux visuels du logiciel ? Quel système et appareil avez-vous utilisé ?
      Il me paraissait jusque là le plus abouti en terme de fonctionnalités et d’efficacité.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *