Suivez-nous

Applications

Viewport teste le responsive design, gratuitement

Viewport est gratuit, et il permet de tester vos designs “responsive”. Découverte.

bpepermans

Publié le

 
1-viewport.jpg

Les développeurs de sites web le savent, la création de sites Internet mobiles dédiés n’est plus d’actualité et il est désormais plus efficace de concevoir des interfaces adoptant les règles du “responsive webdesign”.
En fonction de règles (les “breakpoints” : points de rupture provoquant un changement de disposition des blocs) placées au sein des feuilles de styles (CSS) l’organisation des blocs d’une page web est ajustée pour adapter l’affichage aux dimensions du navigateur du terminal utilisé (ordinateur de bureau, smartphone, tablette, etc…).

L’application Viewport, devenue gratuite (au lieu de 4,99 €), entend faciliter les tests des pages web avec de nombreux outils pratiques comme la détection des règles responsive, les copies d’écran intégrales (toute la hauteur de la page) et l’enregistrement des tests d’utilisation en vidéo.

Au lancement, Viewport se présente comme un navigateur web simplifié : boutons précédent / suivant, barre d’adresse, choix des règles de test et capture d’écran.

Point de rupture

Lorsque l’application détecte des “points de rupture” provoquant un changement de présentation, l’application permet de tous les afficher sous forme d’onglets et de tester les différents affichages.

Nous avons tout de même noté quelques défauts dans ce système de détection : par exemple, si le site MacPlus fonctionne parfaitement en responsive Viewport indique qu’il ne trouve pas de règles d’adaptation dans les feuilles de styles.
Heureusement, vous pouvez définir vos propres règles dans les préférences, en définissant des bornes en pixels et en choisissant un “User Agent” (pour éventuellement activer des règles spécifiques au navigateur).

Viewport propose une liste de navigateurs assez récents mais nous aurions apprécié que pour les terminaux mobile l’application modifie automatiquement les dimensions conformément à la taille de l’écran.
Viewport propose bien Safari 8 pour Mac mais se limite à Safari pour iOS 7 (iPhone, iPod Touch et iPad) et se contente de Google Chrome 29 et Firefox 23 même si ce n’est pas franchement gênant à l’heure actuelle.

Lorsque vous naviguez entre les différents onglets correspondant aux “breakpoints” détectés ou personnalisés, Viewport les considère comme indépendants, ne reflétant pas votre navigation dans le site à partir d’un des onglets.

Captures allongées et animés

L’autre fonctionnalité intéressante de Viewport réside dans la possibilité de faire des captures d’écran des pages web affichées.

**Capture intégrale

La “prise de vue” ne se limite pas à la zone affichée mais contient la page dans toute sa (grande) longueur.
Viewport propose également de réaliser en un clic, une capture de chaque onglet.

Toutes les images sont enregistrées sur le Mac, dans le dossier “Images” de l’utilisateur.

**Capture vidéo

À elle seule, la fonctionnalité de capture vidéo peut faire oublier tous les autres défauts de l’application. En effet, Viewport appelle cela le “mode test utilisateur” (User testing mode) qui enregistre votre navigation dans la page web avec une mise en valeur du pointeur.

Dédiée aux tests utilisateurs, l’application enregistre également la vue (et le son) de l’iSight du Mac dans une vignette placée en bas de page. Vous pouvez imaginer faire tester votre site par différents utilisateurs qui enregistreraient leurs commentaires au fur et à mesure.

Les vidéos, au format MP4 (30 ou 60 images par seconde), se retrouvent dans le dossier Vidéos de l’utilisateur.

En quelques mots

Viewport peut s’avérer pratique pour tester rapidement quelques pages, mais nous regrettons fortement les quelques défauts signalés pour une utilisation quotidienne et intensive de l’outil.

C’est certes une version 1.0 mais qui n’a pas évolué depuis sa sortie au mois de janvier… Le passage au gratuit peut avoir deux significations : l’abandon du logiciel par son développeur ou au contraire, l’arrivée imminente d’une nouvelle version.

Nous avons pris contact avec le développeur pour en savoir plus, mais en attendant, si vous êtes amené à créer des sites web modernes, Viewport reste pratique malgré ses quelques défauts et grâce à ses puissants outils de capture.

Viewport (gratuite) sur le Mac App Store.