Mar
17

Simulation mobile pour tester votre site web.

L’affichage de votre site ou blog peut être géré différemment selon le navigateur qui le consulte. Plus particulièrement il est intéressant de réaliser une structure graphique différente pour les mobiles. Un site web classique n’étant pas forcément adapté à la lecture sur des écrans de petit format.

Outil permettant de visualiser votre blog/site sur Smartphone

Quand on gère différemment l’apparence de son site sur smartphone, comment savoir à quoi il ressemble quand on n’a pas ce genre d’appareils ?

Il existe des solutions simples mais il faut quand même connaître les limites de ce procédé.

Identification du navigateur

Pour commencer comment un site web fait-il pour savoir que le navigateur qui le lit s’appelle Opera, Firefox, Chrome ou Safari ou que l’appareil qui le consulte est un simple ordinateur, un Iphone ou un Blackberry

Chaque navigateur envoie un identifiant qui lui est propre et qui s’appelle un User-agent. Il y’en a non seulement un par navigateur mais bien souvent un par version.

Prenons quelques exemples :

Internet explorer 10.6 : Mozilla/5.0 (compatible; MSIE 10.6; Windows NT 6.1; Trident/5.0; InfoPath.2; SLCC1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 2.0.50727) 3gpp-gba UNTRUSTED/1.0

GoogleBot 2.1 : Googlebot/2.1 (+http://www.googlebot.com/bot.html)

Ipad 2 : Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.0.2 Mobile/9A5248d Safari/6533.18.5

Il n’y a donc plus qu’à repérer cet identifiant puis diriger le lecteur vers une page ou un template différent en fonction du User-agent reçu.

C’est très facile, par exemple en PHP, puisque la variable $_SERVER[‘HTTP_USER_AGENT’] vous la donne.

Bon tout le monde n’est pas programmeur bien sûr. Les CMS proposent des plugins qui permettent de faire ça en quelques clics.

Sites web simulant un mobile

La solution la plus simple consiste à trouver des sites web émulant un smartphone.

Mais attention, il faut faire un tri car la plupart ne prennent pas en compte le User-agent. Le résultat c’est que, sur ces sites, vous aurez juste votre affichage classique à la taille de l’écran ce qui est complètement stupide.

Il faut donc bien sélectionner ceux qui prennent en compte les identifiants.

Prenons deux exemples.

Le site E-outils qui fonctionne correctement et qui affiche mon thème pour smartphone :

Affichage de site web avec le bon user-agent

Simulateur avec gestion du User-agent

Maintenant un exemple avec le site Testiphone  complètement inutile :

Emulateur d'Iphone à ne surtout pas utiliser

Site web ne prenant pas en compte le User-agent

C’est mon thème classique qui s’affiche alors que sur un vrai Iphone c’est le thème pour smartphone qui doit normalement apparaître.

Outil pour modifier le User-agent

Vous pouvez aussi utiliser une extension si vous utilisez Firefox ou Chrome. Pour les deux le plugin s’appelle User agent switcher.

Une fois installé vous aurez un nouveau menu qui apparaîtra dans Outils (Firefox) et qui aura le nom du User-agent que vous aurez choisi qui, par défaut, s’appelle : Default User Agent. Comme c’est original :).

Menus pour atteindre User agent switcher

Menu "Outil" puis "Default User Agent"

En cliquant sur l’un des agents proposés, vous naviguerez désormais comme si vous utilisiez le navigateur sélectionné.

La liste par défaut des identifiants est franchement mince. Vous pouvez l’agrandir en téléchargeant une liste plus complète de User-agents.

Une fois téléchargée, retournez dans vos extensions, sélectionnez User agent switcher puis cliquez sur Préférences.

Cliquez ensuite sur le bouton Importer pour rechercher le fichier précédemment téléchargé.

 

Importe de la liste des User-agents

Cliquez sur OK puis redémarrez Firefox.

Voilà, votre liste est désormais beaucoup plus intéressante. Vous avez tout un tas de mobiles, de tablettes, de systèmes d’exploitations et de navigateurs.

Limitations

Cette technique n’est pas à 100% fiable. Il faut donc être conscient des limites de cette méthode.

Le User-agent ne permet pas de choisir la version d’une technologie.

Théorie

Par exemple si vous utilisez User agent switcher depuis le dernier Firefox, celui-ci prendra en compte les commandes CSS3.

Admettons que vous utilisiez le User-agent de MSIE6 qui ne connaissait pas le CSS3 puisque ça n’existait pas à l’époque.

Comme vous vous servez d’une version de Firefox qui comprend le CSS3, vous afficherez votre site comme si IE6 connaissait le CSS3.

Pratique

Pour faire plus simple ce blog a des bords arrondis grâce à la commande css3 : border-radius.

Avec un vrai Internet Explorer 6 les bords seront au carré car cette commande n’existait pas  lors son exploitation.

Avec le User agent switcher ou les simulateurs, les bords seront arrondis car votre navigateur les comprend.

 

Donc attention, faire une simulation sur mobile avec cette technique ne permet pas tout mais est très utile pour vérifier le comportement de votre site web sans avoir tout les appareils du marché à portée de main.

Et vous, avez-vous déjà pensé à vous adapter à votre public venant d’un mobile ?

Articles similaires :

11 Comments to “Simulation mobile pour tester votre site web.”

  • Thierry 21 mars 2012 à 11 h 57 min

    Bonjour Arnaud,

    Article fort intéressant, je vais donc allez voir ce que donne mon site avec l’émulateur que tu conseilles.

    Bonne journée,
    Thierry
    Thierry Articles récents..Cachez-vous la barre de menu de votre blog ?My Profile

  • agrumeprod 21 mars 2012 à 16 h 02 min

    Je vois que tu utilises Wptouch. N’hésites pas à personnaliser le plugin.

    • Thierry 22 mars 2012 à 6 h 35 min

      Bonjour Arnaud,

      C’est justement après avoir fait un essai sur e-outils que je me suis rendu compte que l’affichage sur iPhone n’était pas adapté. Pourtant sur mon smartphone sous Androïd cela était correct.

      J’ai donc installé WPtouch car je n’avais pas encore pris le temps de le faire.

      Voilà grâce à ton article c’est réparé.

      Bonne journée,
      Thierry
      Thierry Articles récents..Cachez-vous la barre de menu de votre blog ?My Profile

      • agrumeprod 22 mars 2012 à 13 h 12 min

        C’est toujours un plaisir de rendre service ;)

  • Clem from Forfait mobile 22 mars 2012 à 13 h 24 min

    Avec la montée en puissance du web sur mobile, il est essentiel de pouvoir proposer une version mobile fluide et pratique de son site internet. Mais en effet, difficile d’avoir un aperçu de notre travail sans mobile adapté.

    En tout cas, merci pour ce petit tutoriel facilement compréhensible et très bien présenté :)

  • agrumeprod 22 mars 2012 à 13 h 28 min

    Cet article tombe en plein dans ton sujet de blog :)

  • Arnaud 20 avril 2012 à 21 h 29 min

    Bonjour,

    un grand merci pour ce tuto qui m’a beaucoup aidé.

    Bonne continuation

  • Richard 5 septembre 2012 à 15 h 00 min

    Regardez également http://www.emulateurmobile.com : il tient compte du user-agent et affiche le téléphone dans sa taille physique réelle.

  • Arnaud 5 septembre 2012 à 17 h 03 min

    Merci pour l’info.

    Il a l’air bien pensé ce site de test.
    Je vais regarder ça de plus près.

  • Affiliation rencontre 14 octobre 2012 à 20 h 25 min

    Je passe aussi sous WP Touch !
    Bien pratique cet article, merci !
    Affiliation rencontre Articles récents..Pourquoi se lancer dans l’affiliation rencontre ?My Profile