SnapRuler

Uns wird immer wieder eingebläut, dass eine Webseite nicht in allen Browsern gleich aussehen kann, bzw. muss und dass 100% pixelgenaues Arbeiten daher Utopie ist.
Dennoch arbeite ich sehr genau und versuche die Designs von Marcel so gut es irgendwie geht in HTML und CSS zu transportieren.

Ich habe bis vor einiger Zeit sehr häufig Screenshots von einzelnen Elementen im Browser gemacht an denen ich gerade arbeite und diesen Screenshot dann in Photoshop geöffnet und über das Design gelegt um Abstände, Schriftgrößen oder ähnliches genau abmessen und vergleiche zu können. Das war eine nicht unbedingt sehr effiziente Arbeit und gehört zum Glück mittlerweile auch der Vergangenheit an.

Ich wusste auch damals schon, dass es Bildschirmlineale oder ähnliche Tools gibt und habe auch einige getestet. Mir konnte allerdings keine so wirklich zu sagen und meistens boten die Apps mehr als ich wollte. Ich wollte einfach nur möglichst schnell etwas abmessen und das Tool musste per Shortcut geöffnet werden können.

Meine Rettung heißt SnapRuler. Per Shortcut (in meinem Fall cmd + shift + e) aktiviere ich ein Fadenkreuz und eine dazugehörige Lupe. Ich kann in der Lupe pixelgenau sehen was ich tue und ganz einfach alles auf dem Bildschirm abmessen. Ich kann so mein Design im Browser und das Design in Photoshop perfekt vergleichen. SnapRuler bietet auch noch die Möglichkeit die Maße wahlweise als CSS-, HTML- oder Objective-C-Code in die Zwischenablage zu kopieren und das Auswahlwerkzeug beim Abmessen an Kanten „snappen“ zu lassen. Beides nutze ich allerdings nie.

Die App kostet 7,99 € im App Store, macht eine Sache perfekt und ist nach meinem Dafürhalten jeden Cent wert.

Wen das noch nicht überzeugt hat, der kann sich auf der Website noch ein Video angucken.