Testez facilement les versions mobiles de votre site avec Adobe Edge Inspect

Testez facilement les différentes versions de votre site sur les smartphones/tablette android/ios et sur votre PC.

adobe_edge_inspect

Si vous travaillez dans le web, vous avez dû vous rendre compte que depuis quelques années tous bougent très vite. La question de votre site en version smartphone ou tablette peut rapidement se poser. Vous avez dès lors différentes solutions, soit effectuer une version optimisée mobile (cela veut dire une autre version, 2 fois plus de travail), soit un css mobile (plus simple à mettre en place, mais comment être sûr vu les hautes résolutions des smartphones que c’est réellement un smartphone et non un vieux PC?) ou encore réaliser une version responsive (qui s’adapte à la résolution de l’appareil).

Pour ma part, bien que le responsive peut avoir des défauts, je le trouve très facile à mettre en place dès lors qu’on a des notions en CSS. Le tout est de passer les valeurs fixes (px) en valeurs relatives (%, em). Le problème qui peut se poser si vous souhaitez adapter votre site sur plusieurs appareils c’est que cela va vous prendre beaucoup de temps pour tester chacun de ses appareils… C’est la que l’application Adobe Edge inspect va nous faire gagner énormément de temps. Vous devez simplement installer l’application sur le navigateur chrome avec son serveur, installer les différentes apps sur les appareils que vous souhaitez tester et être connecté au même réseau WiFi. Après c’est un jeu d’enfant naviguer simplement avec votre navigateur principal et vérifier en temps réel l’affichage sur votre smartphone tablette. L’ayant utilisé dans le cadre d’un travail, je dois avouer que cette application m’a littéralement bluffé…

Ce contenu a été publié dans Web. Vous pouvez le mettre en favoris avec ce permalien.

19 réponses à Testez facilement les versions mobiles de votre site avec Adobe Edge Inspect

  1. Jean dit :

    Je n’étais pas spécialement enthousiasmé par le responsive, mais il faut dire que je n’en suis pas encore à la tablette. Merci pour cet article, je vais voir ce que ça donne.

  2. Android dit :

    Merci pour cet outil bien pratique que je ne connaissais pas. Il m’aurait été bien utile pendant la refonte de mon site en responsive design !

  3. Yoann dit :

    Avoir un site compatible avec toutes les plateformes est un véritable casse tête d’autant plus qu’il y a des problèmes de performance a prendre en compte avec les vieux smartphones par exemple.
    Cette application a l’air vraiment top pour tester sur tous les supports.

  4. Alain dit :

    Vraiment un super utilitaire pour voir ce que donne notre site sur tous les supports ! Avec le développement du mobile et de la tablette, je ne vois pas comment on peut raisonnablement passer à côté du responsive…

  5. Rose dit :

    Très pratique cet outil, je vais essayer ça tout de suite…en espérant que c’est bien fiable. il permet de tester la navigation en général ou juste un site ?

    • Ludovic dit :

      Vous surfez simplement avec votre navigateur principal (chrome) et vous regardez si le visuel de chaque page vous convient. Après pour tester l’ergonomie des boutons, etc. il faut le faire avec votre appareil directement. Maintenant si le menu fonctionne sur la page d’accueil il devrait marcher sur les autres pages. Cet outil permet de vérifier rapidement le visuel de votre site sur les différents appareils en votre possession.

  6. Dalika dit :

    Super je vais aller tester ça, par contre au delà d’adapter les formats à nos smartphone et tablette je me penche sérieusement sur les applications, transformer son site en « web app » pour Iphone par exemple est un bon moyen de croissance je pense !

  7. Joe dit :

    Ayant quelques commandes depuis les téléphones mobiles je commence à m’intéresser de plus en plus à la vitesse de navigation et à l’espace que prenne mes pages sur les différents supports. Le problème est que sur Tablettes nous utilisons la même interface que sur le Pc ce qui rend le tout difficilement lisible. Cette application va surement nous permettre d’améliorer nos performances

    • Ludovic dit :

      Je tiens à souligner que la différence notable entre le PC et la tablette résulte surtout de la différence de navigation… Avec une tablette point de « hover », il faut donc repenser toute la navigation si la version pc utilise des menus qui apparaissent au « survol ». De plus l’application sert à tester le responsive. Si vous cherchez à optimiser les performances, n’oubliez pas de réduire un maximum la taille de vos pages/images/css.

  8. Boutique tee shirt dit :

    Merci beaucoup pour ce partage
    c’est vrai que cela peut être utile, pour le moment prestashop fait ce travail à ma place j’ai bien l’impressioon, car sur smartphone c’est super et je n’ai pas fais grand chose pour 😉

  9. Je ne connaissais pas cet outil. J’utilisais d’autres manières de contrôle, mais là je suis bluffé.

  10. Franchise dit :

    Le responsive a un bel avenir devant lui mais il est encore pas très évident à apprivoiser aujourd’hui. Grâce à cet outil Adobe, rend service a plus d’un webdesigner 🙂

  11. comptable externe dit :

    Moi, je trouve très important ! le nombre de personnes qui consultent les sites depuis son mobile va vite augmenter par rapport aux utilisateur de PC.

  12. Bat00 dit :

    Le développement d’applications smartphone et tablette n’est pas justifié pour un grand nombre de sites. Le responsive est, je pense, actuellement la solution technique la plus intéressante. Merci pour la découverte de cet outil !

  13. livraison fleurs dit :

    Super pour tester un snapshot, mais malheureusement impossible de tester les interactions. C’est un bon début, mais il en faudrait plus.

  14. sari dit :

    Excellent ! Merci !
    C’est exactement ce que je cherchais.
    Avoir un site compatible avec tous les navigateurs est déjà bien compliqué mais compatible avec les mobiles c’est encore pire.
    Heureusement qu’on a des moyens comme ça pour nous y aider.

  15. Responsable SEM mais pas que, ouvert d’esprit sur le web et faisant de la veille référentielle continuelle, j’étais passé sur cet outils.
    J’ai donc pu le tester en faisant un peu d’intégration.
    La mise en pratique est un peu longue pour connecter un peu tous les device mais après ça fonctionne plutôt bien, quoi que la latence soit un peu exaspérante à la longue.
    Si ce n’est que pour tester sur votre Iphone ou Ipad je trouve la solution lourde. Si par contre, vous disposez d’un mur de device accroché devant vous tous connectés à la solution … là ça devient super intéressant !!
    Attention donc au différentes utilisation et que cet solution ne vous fasse pas perdre plus de temps qu’elle ne vous en ferrais gagner.

  16. Mariah dit :

    Le responsive web design – ou OneWeb de son autre nom – est pour moi l’avenir du web. Proposer des expériences utilisateurs adapatées à chaque device devient de plus en important aujourd’hui. Mais attention, il ne s’agit pas que de refaire la partie technique, car il faut aussi penser en terme de contenu, comme par exemple privilégier le texte sur les images dans la version mobile.

    Bref, très bon article, Adobe Edge est un outil qui semble véritablement très utile.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.