Adobe a mis en place un outil gratuit pour contrôler le rendu de votre design sur de nombreux appareils mobiles (smartphones et tablettes). Voici une explication rapide pour le mettre en place.
Installer Adobe Edge Inspect (anciennement Adobe Shadow)
Pour commencer vous aller devoir installer IN sur votre poste et l’extension sur le navigateur Chrome. Vous trouverez le logiciel IN sur le site d’adobe (applications et extension Chrome) : http://forums.adobe.com/docs/DOC-2495
Vous trouverez aussi les liens pour les applications IOS, Androïd et Kindle.
Installer les applications sur les mobiles
Ensuite vous devrez installer les applications sur tous vos mobiles. Nous avons fait des tests sur un tablette Samsung (Androïd) et sur une tablette iPad1 et cela fonctionnait.
Connecter vos applications à votre ordinateur
Vous lancer le logiciel sur votre ordinateur, ainsi que les applications sur les mobiles. Vous allez ensuite sur Chrome où vous ouvrez la page à tester. Vous devriez voir une icône bleu avec “Sd” apparaître dans la barre de Chrome :
Vous allez sur votre appareil mobile et vous ouvrez l’application. Vous devriez voir apparaître le nom de votre ordinateur. Nous avons tester avec un PC sous Windows 7 et sous un Mac et les deux apparaissent bien alors qu’ils sont sur des connections internet différentes.
Vous choisissez ensuite l’ordinateur, l’application va vous fournir un code qu’il faudra recopié dans l’extension Chrome de votre ordinateur.
Affichage du code avec l’application sous Androïd
Saisie du code dans l’extension Sd sur Chrome
Affichage de la page web de votre navigateur dans la tablette
Si votre CSS utilise via des media queries (soit avec des switch soit en responsive des spécificités) d’affichage pour les tablettes et les mobiles, l’affichage sur l’application les prendra en compte.
Les temps de latence entre les modifications faites sur l’ordinateur et l’affichage sur le mobile sont relativement court.
Voir la vidéo (Anglais)
[iframe http://tv.adobe.com/embed/877/12009/ 515 296]
Lire aussi :
- Sur Alsacreations http://www.alsacreations.com/actu/lire/1427-le-web-mobile-avec-adobe-shadow.html
- Guide d’installation en anglais http://forums.adobe.com/docs/DOC-1673
Publié le 22 août 2012
