Dimensions: Elemente vermessen und Abstände ermitteln

- Chrome Extension -

Mit der Chrome Extension Dimensions kannst du dir pixelgenau die Abstände zwischen verschiedenen Elementen auf Webseiten anzeigen lassen und gleichzeitig auch Elemente vermessen.

Jetzt lesen

Frontend-Entwickler kennen das: Man bekommt ein Layout von einem Kunden, das laut eigener Aussage doch „bitte pixelgenau“ umzusetzen ist. Dass das in Zeiten von Responsive Design kaum umzusetzen und eine vollkommen veraltete Denkweise ist und deshalb nicht immer so geht, liegt auf der Hand. Dennoch kann man sich möglichst nah an die Vorgabe begeben und Pixelangaben durch Prozente oder em und rem austauschen.

Um allerdings Pixelabstände zwischen 2 Elementen untersuchen zu können, gibt es (zumindest mir) keine bekannte Vorgehensweise, ohne mit den Daten der DevTools nachrechnen zu müssen. Hier kommt die Chrome Extension Dimonsions ins Spiel.

Download: Dimensions

Dimensions
Dimensions
Preis: Kostenlos
  • Dimensions Screenshot

Abstände pixelgenau untersuchen und Elemente vermessen

Mit einem Klick aktiviert, verwandelt sich dein Cursor in ein Fadenkreuz, mit welchen du über die aktuelle Seite fahren kannst und welches dir anhand einer kleinen Infobox die vertikalen und horizontalen Abstände zwischen den nächstgelegenen Elementen anzeigt.

Die Erweiterung arbeitet dabei anhand der Farbunterschiede der einzelnen Elemente und nicht anhand der HTML-Elemente, sodass du z.B. auch den Abstand zweier Elemente in zwei unterschiedlichen div-Containern anzeigen lassen kannst.

Deshalb kannst du dir auch die Abmessungen in Design-Mockups anzeigen lassen, die lediglich als Bilddatei vorliegen. Dazu musst du einfach das entsprechende Bild in Chrome öffnen und Dimensions aktivieren. Solltest du also eine unvollständig vermessene Design-Vorlage erhalten haben, musst du nicht lang auf die Antwort des Designers warten, sondern kannst es selbst ausmessen.

Ein weiteres Feature ist die Vermessung des Innenraums eines geschlossenen Bereichs, wie z.B. eines Buttons. Halte dazu einfach die ALT-Taste gedrückt und die Erweiterung erkennt automatisch das Element und zeigt dir die Höhe und Breite an. Das ist besonders dann hilfreich, wenn Text im Weg ist. Da Dimensions wie bereits erwähnt über die Farbe der Elemente die Abstände berechnet, ist jeglicher Text eine „Grenze“ und wird nicht vernachlässigt.

Eine Demo kannst du dir ohne Installation auf der Extension Seite von Felix Niklas anschauen.

Fazit

Seitdem ich Dimensions installiert habe, kommt es regelmäßig zum Einsatz, wenn ich Arbeiten am Frontend durchführen muss. Es gibt keine mir bekannte bessere Option, um Abstände zu ermitteln. Webdesigner und Frontend-Entwickler sollten sich die Extension definitiv anschauen, sie wird euch einiges an Zeit sparen.

Erwähnt werden sollte vielleicht auch noch die Performance: Dimensions verrichtet sein Werk komplett ohne Verzögerung, sondern berechnet alles on-the-fly. Du hast also beim Bewegen des Fadenkreuzes sofortiges Feedback.

Autor: Denis Brediceanu
Autor: Denis Brediceanu
Online Marketing Berater, WordPress Webentwickler und Gründer von WPcorner.de aus Leidenschaft. Ich helfe gerne Menschen, im Internet mit ihrer Idee Fuß zu fassen. Die Technik sollte niemandem im Weg stehen, seine Träume zu verwirklichen!