Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Google-Resizer auf einen Blick: Das kann das Tool

    Google-Resizer auf einen Blick: Das kann das Tool

Google-Resizer. (Screenshot: design.google.com/resizer)

Viele Tools unterstützen schon das Testen deiner Websites, und Google-Resizer ist eins davon – wir stellen es vor.

Ein Problem, das Webentwickler haben, ist das Testen der verschiedensten Layouts in allen Auflösungen. Bisher wurde, soweit es möglich war, am eigenen Bildschirm getestet, aber mit zunehmenden Auflösungen von Bildschirmen, Tablets und Smartphones sind die Kapazitäten schnell erreicht – dann kommen Tools wie der Google-Resizer zum Einsatz.

Das Tool wurde von Google extra für Material Design entwickelt, und soll Webdesignern und -entwicklern helfen, Breakpoints sowie responsive Raster in verschiedenen Auflösungen zu prüfen. Der Vorteil von Google-Resizer liegt gegenüber anderen Tools in der Darstellung von drei unabhängigen Auflösungen gleichzeitig.

Google-Resizer in der Übersicht. (Screenshot: design.google.com/resizer)
Google-Resizer in der Übersicht. (Screenshot: design.google.com/resizer)

Und so geht’s:

Google-Resizer ist eine Website, die jede eingegebene URL in drei verschiedenen Layouts ausgibt – Desktop, Tablet und Smartphone.

Sobald man das Tool aufgerufen hat, erklärt sich das einfache UI von selbst. Eine Eingabe der zu testenden URL in das entsprechende Feld reicht, um eine Ansicht der Website in den drei Layouts zu sehen. Anschließend kann man sich, unabhängig von den anderen, durch eins der drei interaktiven Layouts scrollen und klicken.

Verschiedene Auflösungen testen:

Eine kleine Icon-Toolbar rechts oben am Rand ermöglicht die Ansicht der einzelnen Layouts für Desktop, Tablet und Smartphones in verschiedenen Auflösungen im Landscape- oder Porträt-Format.

Mit Hilfe des Lineals kannst du zwischen den verschiedenen Auflösungen wechseln. Die Desktop-Formate beginnen bei 480 Pixel bis 1200 Pixel – jeweils im Landscape- oder Porträt-Format und die Smartphone- sowie Tablet-Formate starten bei 360 Pixel bis 1024 Pixel im Tablet Landcape-Format.

Fazit

Der Google-Resizer ist trotz der Darstellung mehrerer Auflösungen gleichzeitig ziemlich eingeschränkt und bietet daher bei weiten nicht so viele Funktionen wie andere Entwickler-Tools.

Dennoch ist es ein gutes Tool, um ein responsives Verhalten zu simulieren und zu präsentieren. Ebenfalls bietet es für Designer, die mit manchen Entwickler-Tools nicht vertraut sind, eine angenehme Umgebung, denn Google-Resizer ist – wie viele andere nicht – übersichtlich gestaltet, einfach zu bedienen und vor allem kostenlos.

Und falls Google-Resizer nichts für dich sein sollte, wirst du in dem Artikel „18 kostenlose Tools und Extensions zum Testen deiner Seite“ bestimmt fündig.

Finde einen Job, den du liebst zum Thema Android

2 Reaktionen
weffewegergregre
weffewegergregre

ist in der aktuellen Chrome Version in den neu designten Dev tools enthalten.

Antworten
E.
E.

Ja, deshalb verstehe ich das auch nicht.
Ist vielleicht dazu gedacht, um am Schluss den Auftraggeber zu begeistern.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen