Testez facilement les différentes versions de votre site sur les smartphones/tablette android/ios et sur votre PC.
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é…
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.
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 !
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.
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…
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 ?
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.
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 !
N’oubliez pas que si vous souhaitez faire des « web app », le logiciel « phone gap » vous permet de transformer votre site en vraie application native…
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
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.
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 😉
Je ne connaissais pas cet outil. J’utilisais d’autres manières de contrôle, mais là je suis bluffé.
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 🙂
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.
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 !
Super pour tester un snapshot, mais malheureusement impossible de tester les interactions. C’est un bon début, mais il en faudrait plus.
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.
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.
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.