Je bosse depuis quelques temps sur un petit projet personnel et j'ai eu envie de le partager ici pour avoir vos retours.
Ça s'appelle Screen Sizer, et c'est une application web qui affiche une page web (via un URL) et qui permet de redimensionner cette page pour la tester sous différentes résolutions d'écran. L'intérêt principal étant de vérifier un responsive design de façon simple et rapide.
C'est un clone assumé de Screenfly au niveau des fonctionnalités standards :
- Le site web s'affiche dans un iframe
- On peut redimensionner cet iframe soit avec des tailles prédéfinies (Dekstop, Tablette, Smartphone…), soit avec des dimensions personnalisées
- On peut partager le test via un lien (utile pour montrer le rendu d'un site à un client, par exemple)
Les principales différences sont :
- La licence : Screen Sizer est sous licence libre (GPLv3)
- L'internationalisation : Screen Sizer peut-être traduit en différentes (Anglais et Français dispo pour le moment)
- Utilisable en local ou déployable de façon traditionnelle avec un serveur web
- La possibilité de personnaliser facilement l'outil (tailles disponibles, CSS, JS, template…)
Le tout est écrit en Python/Flask, avec un peu de jQuery côté client. Une démo est disponible, et les sources sont consultables sur l'inévitable GitHub, de même que les instructions d'installation.
# Vue adaptative sous Firefox
Posté par Flo_ . Évalué à 10.
Dans Firefox on peut aussi changer la résolution d'affichage avec Ctrl+Shift+M.
PS : j'arrive pas à accéder à la démo, « Adresse introuvable ».
[^] # Re: Vue adaptative sous Firefox
Posté par obsidien . Évalué à 1.
Merci pour le trick Firefox, que je ne connaissais pas !
Concernant la démo inaccessible, le problème vient d'une erreur de ma part dans la config DNS. C'est corrigé mais il faudra probablement un peu de temps avant que ça soit répercuté.
Au cas où, si il y a des personnes qui veulent tester tout de suite, vous pouvez rajouter cette ligne dans votre fichier /etc/hosts :
176.31.98.11 screensizer.eliotberriot.com
[^] # Re: Vue adaptative sous Firefox
Posté par flagos . Évalué à 3.
On trouve la même chose sur Chrome, a savoir une vue qui s'adapte a la resolution des différents devices, avec une préselection d'appareils courants.
Bon la l'avantage, c'est qu'on montrer un souci a quelqu'un qui ne sait pas comment marche ces outils, juste en lui filant l'adresse.
[^] # Re: Vue adaptative sous Firefox
Posté par zebra3 . Évalué à 6.
Question idiote : redimmensionner la fenêtre, ça ne suffit pas ?
Article Quarante-Deux : Toute personne dépassant un kilomètre de haut doit quitter le Tribunal. -- Le Roi de Cœur
[^] # Re: Vue adaptative sous Firefox
Posté par claudex . Évalué à 6.
C'est vachement moins précis.
« Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche
[^] # Re: Vue adaptative sous Firefox
Posté par obsidien . Évalué à 3.
En théorie oui, mais ce n'est pas toujours pratique pour switcher rapidement entre différentes résolutions.
D'autre part, l'avoir sous forme d'appli web permet de partager facilement un test précis (tel site, sous telles dimensions), plutôt que de dire aux gens de redimensionner leur navigateur.
Enfin, pour des résolutions plus large que ton écran, le redimensionnement manuel est plutôt pénible.
[^] # Re: Vue adaptative sous Firefox
Posté par freem . Évalué à 0.
Hum… je me demande si, avec un gestionnaire de fenêtre qui expose ses commandes via une IPC, ce ne serait pas scriptable de façon précise?
Bon, ça reste loin d'être pratique sauf pour les amateurs de ligne de commande, et il faut encore que le WM le permette ( je ne suis pas sûr qu'i3 permette ce genre de joyeusetés, il faudra que je vérifie le jour ou j'en aurait l'utilité ).
Mais même une fois redimensionnée à une taille supérieure il reste le problème d'avoir la vue d'ensemble: si la fenêtre est plus grande que l'écran, il faut l'agiter dans tous les sens, alors qu'avec un outil adapté, on peut juste scroller dans la fenêtre.
[^] # Re: Vue adaptative sous Firefox
Posté par Ignatz Ledebur . Évalué à 3.
En ligne de commandes, il suffit de jouer avec xrandr en remaximisant la fenêtre du navigateur, ce que tout WM sait faire a priori. C'est ce que j'ai toujours fait, mais maintenant que je connais l'excellent truc de firefox/chrome exposé plus haut, ce sera encore plus simple. :)
[^] # Re: Vue adaptative sous Firefox
Posté par freem . Évalué à 1.
Ah, je ne savais pas que xrandr peut manipuler les fenêtres… bon à savoir ça.
[^] # Re: Vue adaptative sous Firefox
Posté par Ignatz Ledebur . Évalué à 1.
C'est plus au niveau du display que de la fenêtre en fait, ce qui n'a au final pas d'importance puisqu'on est de toute manière obligé de maximiser le navigateur pour évaluer les limites du rendu.
[^] # Re: Vue adaptative sous Firefox
Posté par claudex . Évalué à 5.
À condition de calculer préalablement la taille de tes bordures de fenêtre + barre d'outil et de prédire si l'ascenseur sera visible ou non.
« Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche
[^] # Re: Vue adaptative sous Firefox
Posté par barmic . Évalué à 3.
Je n'en ai pas le besoin donc ça reste une réflexion en l'aire, mais tu peut très bien avoir un tag awesome pour le quel tu défini par défaut un layout avec des taille d'écran que tu souhaite (en mode portrait et en mode paysage), il reste à utiliser un navigateur dépourvu d'interface comme surf et de créer une règle awesome pour lui associer toujours le même tag.
Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)
# Question
Posté par Seb . Évalué à 3.
Je profite du sujet pour poser une question,
Je ne me suis encore jamais penché sur le design responsive, mais de ce que j'ai compris, ça se base essentiellement sur la taille de l'écran en pixels.
Comment dans ces conditions gérer correctement un écran de mobile qui peut avoir une résolution de 1920x1080, cad la même résolution qu'un écran 24" de bureau?
[^] # Re: Question
Posté par claudex . Évalué à 10.
Parce que le pixel de CSS n'a rien à voir avec le pixel de l'écran (même si son nom vient de là) http://www.w3.org/Style/Examples/007/units.en.html
« Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.