Tester des sites avec responsivetest.net

12
12
vues
 

Responsivetest.net est un excellent site développé par Nguyen Huu Phuoc (qui est aussi à l’origine de Bootstrap validator) et généré par Bootstrap 3, AngularJs, jQuery and jQuery UI.
Ce site permet à tout bon webdesigner de tester le responsive d’un site. Bien d’autres sites le font comme responsinator ou des sites comme BrowserStack avec qui Microsoft s’était associé pour le modern.ie dont je vous parle dans cet article.
Mais pour le premier je trouve pas qu’il soit bien d’avoir tous les résultats sur une même page obligeant à scroller sans cesse pour revoir les résultats en rafraîchissant ou parce que l’on ne se souvient plus si nous l’avions bien vu au premier passage…
Et pour le deuxième, générer des screenshots prend énormément de temps et en plus de ça, aucune navigation interne n’est possible (aucune possibilité de voir comment fonctionnent les sous-menus par exemple comme une iframe permet de le faire).

C’est pourquoi je vous propose d’aller jeter un œil a responsivetest.net pour ceux qui ne connaissent pas encore.
Au programme une interface réglée, et des sous-menus pour les 4 types d’appareils que l’on utilise : le mobile, la tablette, l’ordinateur portable et l’ordinateur de bureau.
Dans ses sous-menu vous pourrez sélectionner la marque et le modèle de l’appareil à tester.

responsivetest pour le S4
Ici un aperçu de graphyzart.fr sur un Samsung S4.

Et ce qui est excellent avec responsivetest.net c’est de pouvoir effectuer la rotation de l’appareil en un clic (le bouton vert)
Et hop !

responsivetest pour le s4 en mode paysage
Un aperçu de graphyzart.fr sur un Samsung S4 en mode paysage.

Personnellement je préfére cet interface qui est claire et précise. Le seul scroll se trouve dans la fenêtre de votre site (sauf bien sûr si vous voulez acceder au résultat sur I-mac 27 » et que vous n’avez qu’un 21 ou 24 »).
Encore avantage c’est que vous pouvez aussi tester des sites en locale à l’aide de XAMPP, MAMP, WAMP… ou leurs proches camarades.

Si je devais trouver des défauts, je dirais les règles.
Elles… que dis-je, elle (au singulier) chevauche le header des sites, ce qui gène la lisibilité des mesures sur certains sites.
Et effectivement le manque de la règle en hauteur. Car bien que l’on sache qu’une page peut être infini, on aimerait avoir la hauteur de l’appareil utilisé affiché autrement qu’en x x y. Ce qui permettrait de savoir au pixel près si notre design passe sur tel ou tel format.

Et un deuxième petit défaut se trouve peut-être dans le choix des appareils qui reste encore mince face à la multitude des existant, cependant la taille de la fenêtre est personnalisable pour des dimensions sortant de celles proposé par la site.
Après c’est peut-être des chichis, mais il faut bien trouver des défauts pour que ce genre d’outil évolue dans le bon sens.

MA NOTE
Responsivetest.net
PARTAGER
Article précédentLes super Flammands de Sasha Goldberg
Article suivantCampagne Veet pour Halloween
Yann Isabel
Je suis un jeune Intégrateur / Développeur Front-end issu du domaine du print et totalement passionné par l'univers visuel. Vous pouvez voir quelques-unes de mes créations ainsi que mon parcours sur yannisabel.com
  • C’est pas mal mais vu que browser based ça ne teste qu’un moteur de rendu (celui du navigateur) donc en gros ça permet juste de voir différentes résolutions typiques d’un site (mais pas différents navigateurs et différents OS) du coup, utiliser la vue adaptative de l’inspecteur Firefox ou Chrome revient sensiblement au même (la preselection des appareils en moins, mais en vérité, on a pas une media query par appareils, donc c’est pas si indispensable).
    Il va falloir qu’ils trouvent petit trucs pour se rendre indispensables 🙂 A suivre !

     
    • Le truc des media queries c’est de pouvoir adapter soi-même son contenu. Et vu la multitude de format que l’on a à présent (Surtout quand on voit l’émergence des phablettes qui viennent un peu étoffer le bouquet) je pense que ce type d’outil peut vite devenir important (pas indispensable je l’admet) mais il arrive rarement de n’avoir que 3 media queries (large, medium, small).
      On se sert de ceux-là comme base puis on adapte.

       
  • Il fut un temps, pas si reculé, ou les périphériques était assez standards et où on cherchait à faire du design « pixel perfect », en gros on voulait juste convertir des fichier photoshop en html fixed pour du 960 pixels de large et on était content.
    Le template le plus populaire était la grille 960.gs (http://960.gs/)
    Mais maintenant, avec la multipliciét des supports et des résolutions, l’approche est devenu très différente. L’utilisation même de photoshop pour le web design est fortement critiquée.
    http://boagworld.com/design/has-responsive-design-killed-photoshop-for-web-designers/
    http://rafaltomal.com/should-we-still-use-photoshop-to-design-websites/
    Je suis du côté de ceux qui maintenant pensent uniquement en terme de design et non plus en terme de hardwares.
    Prends l’exemple du plugin Responsive Mobile Tools pour Brackets.
    http://www.leebrimelow.com/responsive-design-with-adobe-brackets/
    Le mec fais son responsive non pas en disant « oui mais sur iphone 4 faut que machin mais attends ya plus que X% des gens qui l’utilisent, oui mais 50% d’entre eux le fait en mode paysage, oui mais l’iphone 6 va sortir et lui il sera plus large etc…), mais juste en ajustant la résolution. Et quand le design break, bim, une media query. Du coup avec 3-4 queries, le design est fait. pas la peine de se soucier du marcher, tu sais juste que tu dois brasser entre 320 et 2200 pixels de large. Et si t’as des trucs à ajuster entre les deux, t’ajustes, mais sans te soucier pas du hardware. Et là, tu gagnes du temps et de l’efficacité. Un site web c’est pas une page web, y a pas besoin de penser à la dimension du papier avant, quelques résolutions clés suffisent 😛

    C’est d’ailleurs l’approche choisie par tous les templates HTML populaires du moment, qui au final, n’ont que 4-5 width de query différents, ce qui est bien pour faisable car tout est en unité relatives (%, rem, etc…)

     
    • C’est bien ça. Il faut tout de même ajuster. Le Plugin que tu as envoyé en lien est carrément fou ! J’adore ! Et cette photo du mec qui se fait arrêté ? Sérieux ? ^^
      Et personnellement je pense que le marché est important. La preuve en est que beaucoup de framework sont basé mobile first. Car beaucoup de gens utilise leur mobile pour naviguer sur le net et non plus leur ordinateur, voir même certains n’ont d’ordinateur que sur leur lieu de travail.
      Pour avoir eu moi-même des rendu très différents sur des appareils qui semblaient proche je pense que le côté hardware devient important (après tu l’a très bien souligné il y a aussi une question de moteur de rendu).
      Cependant je trouve que tu nous offre certaines clés intéressantes.
      Toujours un plaisir !

      P.S : je vais installer ce plugin.

       
      • Toujours un plaisir de participer à tes articles aussi, pour lesquels je ne manque pas de faire tout un tas de recherches pour être sûr de pas dire des conneries 😛

        Quand au plugin bracket, dude… Il est pas énorme sérieux ! 😀 Dommage que ce soit pas compatible avec les thèmes WordPress (php), ça aurait été génial ! Peut-être en update ? A suivre 😛

         
        • On dit tous parfois quelques bêtises ou on peut aussi se contredire mais alimenter de telle conversation ça fait toujours avancer. Ça n’est pas la première fois que tu me fais me triturer le cerveau, et j’adore ça ! D’autant que, oui, tes commentaires sont toujours plein de références !
          Et oui c’est clair que pour des thèmes WordPress ce serait un excellent moyen de gagner du temps.

           
          • HAHA 😀
            Allez un dernier lien pour la route, sur la notion de Design In Browser, je l’avais noté il y a quelques jours 😛
            http://blog.teamtreehouse.com/responsive-web-design-in-the-browser-part-1-kill-photoshop
            J’adore les règles dont il parle. Surtout la dernière 😛

             
          • ah ça c’est intéressant aussi ! Cependant je ne peux pas dire que je suis entièrement d’accord !

            Photoshop rallonge le temps de productivité d’un site certes, mais accélère celui de « créativité » ce qui est l’étape qui précède la production. Car avoir un navigateur certes, mais une page blanche reste une page blanche. Si on ne commence pas à coucher ses idées sur papier (ou photoshop directement) on perd du temps à essayer des choses qui finalement ne sont pas concrètes. (Du coup dans un sens je trouve qu’il fait plus gagner de temps qu’il n’en fait perdre).

            Statique et pourquoi ? N’oublions pas que malgré son évolution énorme, photoshop est avant tout un logiciel de retouche d’image. Pour le web il a des outils mais qui n’aident généralement qu’au maquettage (personnellement l’outil tranche et l’export html/CSS me sortent par les yeux).
            Après créer du flat dans un navigateur O.K mais avec photoshop justement ta seule limite est ta créativité.

            Le client en revanche ne peux pas utiliser la création, certes, mais c’est pas photoshop qui va créer l’interactivité du site, c’est logique.

            Quant à la dernière que tu dis adorer je pense que le problème est pris à l’envers. Il faut connaître son contenu pour créer le contenant (quand on élabore le cahier des charges avec un client ça permet déjà d’élaguer les idées). Ce qui implique que oui le contenu est très important mais le design est là pour le mettre en avant. Les 95% de typographie dont il est question, je dis « très bien » mais la mise en forme de cette typographie est apparenté au Design et au message qu’il fait passer. Ce que l’on voit en premier dans le design n’est pas ce que l’on lit et comprend, mais ce que l’on comprend sans lire.

            Si on est pas professionnel et que Photoshop est trop cher il y a des alternatives gratuites comme GIMP qui permettra de créer ses boutons et ses backgrounds.

            Alors ça peut questionner mais il y a des parties qui me révolte un peu quelque part.

             
          • Je comprends pas trop tu dis quil faut pas oublier que Photoshop c’est un logiciel de graphisme à la base… bé, c’est exactement ce qu’il dit ^^ C’est un super logiciel pour faire du graphisme, de la retouches photo, pas de la création d’interface 😛 Utiliser gimp en alternative ne changera rien au coeur du problème.

            Il y a des logiciels dédiés à la création de user interface où tout devient plus facile (la création d’un panneau, d’un, bouton, d’une grille baseline, d’unité relative etc…). Oui photoshop est un logiciel de photo de dessin et d’impression, mais même avec CSS hat et autres maispour du webdesign il ne vaut pas un logiciel d’interface (et non je ne parle pas de dreamweaver ^^)
            Prends Antetype par exemple.
            http://www.antetype.com/
            Tu vois comment aligner des éléments, changer les couleurs, changer la polices, la tailles relatives du texte etc est plus facile ?
            Après ça empeche pas de préparer des artworks et textures ailleurs, mais l’interface elle même… 😛
            Mais en layout…. Je veux dire sérieusement t’as déjà fait un tableau (genre 5*6) sous photoshop ? C’est le truc le plus galere au monde, à ce jour il n’y a aucun outil natif ou plugin qui permet d’avoir des tableaux dont les cellules sont ajustables sous photoshop ^^
            Ou pire, quand tu fais une maquette et qu’on te dis que le texte est trop petit. VU que rien n’est relatif, il faut juste TOUT refaire 😀 Je dis pas que c’est pas possible, je dis juste que c’est pas optimisé pour de la mise en forme de contenu dynamique (taille variable). Pas du tout !

            Je ne compte plus les articles que je lis qui parlent du futur du web deisgn comme étant le design In browser.
            http://www.smashingmagazine.com/2014/05/23/next-generation-responsive-web-design-tools-webflow-edge-reflow-macaw/
            http://webdesign.tutsplus.com/articles/tips-for-designing-in-the-browser–webdesign-10340
            http://www.webdesignerdepot.com/2014/06/designing-in-the-browser-pro-tips-to-make-it-work-for-you/
            (que des articles 2013/2014)
            Regarde Webflow !!
            https://webflow.com/
            Et Typecast !
            http://typecast.com/

            😀

            Et ces sur ces mêmes sites que j’ai appris à convertir des PSD en html… mais ça, c’était il y a plusieurs années maintenant 😛
            Bien sûr les habitudes sont dures à perdre. Et quand on est confortable dans un workflow on est plus rapide dans celui là que d’en changer. Mais c’est ça qui est bien, peu importe le chemin, tant qu’on arrive au bout… et à temps 😛

             
          • Juste pour se marrer :
            http://www.google.fr/trends/explore#q=photoshop%20webdesign
            http://www.google.fr/trends/explore#q=design%20in%20browser
            😀
            (sur le graph 1 nous voyons que les Français semblent attacher à leur habitudes :P)

             
          • ça vaudra le coup de faire un petit article là dessus un peu plus tard 😉

             
          • J’ai dû me laisser emporter un peu. Cependant je suis tout à fait d’accord avec ce que tu dis, c’est à la lecture de l’article on avait l’impression que le mec descendait photoshop sur des parties qui finalement ne le concerne pas du tout ou peu, car oui comme tu as pu en citer plusieurs, les créateurs d’interfaces sont ailleurs. C’est comparer un boeuf et un chameau.