[Résolu] Ruler pour mesure sur Toggle device toolbar

Bonjour,

Je travaille avec un graphiste donc je me dois de respecter ses maquettes au pixel près quand je développe. Je travaille sur Chrome et j'ai une extension de ruler qui fonctionne bien sur une vue desktop. Là je me retrouve à travailler sur un site Mobile first donc je dois mesurer mes écarts. Or j'utilise l'inspecteur Chrome pour voir la vue mobile et ma règle ne marche pas dessus. Dc j'utilise une feuille de papier et je mesure comme ça

Vos faites comment vous ? En cherchant j'ai activé Show rules ds les préférences de l'inspecteur mais c'est pas pareil...

Merci pour vos actuces
Modifié par Newki75 (03 Jun 2021 - 19:29)

Salut,

Newki75 a écrit :
respecter ses maquettes au pixel près [...] un site Mobile first

Y'a de quoi devenir fou de faire du pixel perfect sur une interface mobile non ? Ou alors c'est que pour les margin et padding auquel cas il peut te donner des guidelines sur comment il a conçut le truc pour pas que tu mesure tout à la règle... il ne te donne que des images des écrans ?

Je suis d'accord, c'est pr ça que j'ai calé hier soir, je devenais folle lollll
Il me donne un psd mais lui aussi a du mal avec le mobile car Photoshop prévoit des tailles mais c'est pas du tout les mêmes que nous en html. Là où Chrome simule le Galaxy S5 en 360 px, Photoshop donne du 744px ce qui n'est même pas du x2.
L'enfer du responsive !

Je vais faire à l'oeil et comme je bosse seule, ça valait le coup de demander des retours d'expériences.
Merciiiiiii

Bonjour,

pixel perfect > naaaan. Homogénéïser, respecter la maquette, rendre un travail propre oui.
Edit : un bloc qui fait 175px de large, c'est 175px ou 50% de la largeur avec un gap de 10px ?
On commence déjà avec la typo dans les outils d'Adobe (la perfection) vs les navigateurs et selon l'OS encore... Les SVG qui peuvent être flous parce que décalés d'1px

Pour répondre à ta question : j'utilise sous Windows la capture "touche Win + Maj + S", copier-coller dans un logiciel de "retouche photo" simple comme Photofiltre, payant à titre pro (je ne m'en sers que pour du basique mais il a des raccourcis-clavier pour exactement ce dont j'ai besoin). Tracer des rectangles, tronquer/cropper, remplir ou pipetter je ne touche pas la souris (sauf pour cliquer sur le point de remplissage ou à pipetter).
Parfois l'extension Measure-It (mais pas assez précis).

Pas besoin de la capture intégrée à Firefox ou d'un outil de capture permettant d'ajouter des annotations.
Plus besoin depuis un bail de l'extension PixelPerfect (mais je m'en suis intensivement servi il y a ~10 ans) qui ajoute sous ta page une image de ta maquette en translucide / façon blueprint en animation 2D.
Y a des outils mieux faits que d'autres comme source : Sketch => Invision d'une part ; Figma d'autre part par exemple (ah la bonne blague d'Invision annonçant pendant 3 ans le prochain support de PSD => Invision). Beaucoup moins d'Adobe XD que j'utilise en ce moment. Il fonctionne, ué.
Modifié par Felipe (10 Jun 2021 - 10:13)

Merci pour tous ces infos @Felipe !