Tool-Tipp: Sizzy beschleunigt responsives Designen

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Sizzy ist eine Web-App und eine Chrome-Extension, mit deren Hilfe du deine responsiven Designs schnell testen kannst. Und ich meine wirklich schnell.

Tools, die dir Previews deiner Websites auf allen möglichen Geräten zeigen, gibt es einige. Allerdings habe ich bislang kein schnelleres gefunden als Sizzy.

Verschiedene Live-Previews auf einen Blick. (Screenshot: Dr. Web)

Sizzy stammt aus der Schmiede des niederländischen Entwicklers Kitze und basiert auf React.js. Vertrieben wird es unter der GNU-Lizenz. liegt also als Open Source vor. Den Quellcode erreichst du via Github.

Sizzy entspringt dem Wunsch seines Entwicklers, seine responsiven Designs möglichst auf einen Blick über alle unterstützten Geräte kontrollieren zu können, anstelle eines nach dem anderen über Chrome aufrufen zu müssen. So ist das interessanteste Feature an Sizzy sicherlich die Möglichkeit, die Übersichtsseite zu zoomen und dabei die einzelnen Previews proportional zu verkleinern.

Sizzy mit der Gesamtübersicht. (Screenshot: Dr. Web)

Wenn du Sizzy verwenden willst, kannst du das entweder über die Website tun. Dort gibst du dann die URL der Seite ein, die du testen willst. Die Alternative besteht darin, dir die Chrome-Extension zu installieren. Fortan kannst du auf jeder beliebigen Seite per Klick auf das Sizzy-Icon deren Responsivität checken.

Sizzy
Sizzy
Entwickler: Kitze
Preis: Kostenlos

Bist du im Sizzy-Interface, hast du verschiedene Möglichkeiten. Für mich persönlich stechen zwei Features auch im Vergleich zu anderen Diensten heraus. Zum einen finde ich die Möglichkeit, die Tastatur des jeweiligen Mobilgerätes einzublenden überaus praktisch. Zum anderen ist es die bereits erwähnte Zoom-Funktion, die es mir erlaubt, noch eben den letzten Blick über alle Geräte werfen zu können.

Während der Arbeit ist es ebenso sinnvoll, Zoom-Level zu benutzen, die es erlauben, das Design in Gänze zu beurteilen, typischerweise 100 Prozent. Auf meinem Bildschirm werden so immer noch zwei bis drei Previews nebeneinander dargestellt.

Das Filtern nach OS (iOS oder Android) oder Geräteklasse (Phone oder Tablet) ist ebenso vorgesehen wie das Kippen der Ansichten in das Querformat. Das geht einzeln oder für alle Previews gleichzeitig. Sizzy selbst funktioniert ebenfalls responsiv und passt sich nahtlos an das Browserfenster an. Um Platz zu gewinnen, ist das links angeordnete Navigationsmenü einklappbar. Kitze verzichtet hier übrigens auf das unsägliche Hamburger-Menü und setzt ein Plus-Icon zum Auf-, respektive ein Minus-Icon zum Einklappen ein.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

Sizzy solltest du in deinen Werkzeugkasten packen. Die Chrome-Extension muss es ja nicht gleich sein, denn wozu solltest du die Seiten von Hinz und Kunz auf Responsiveness testen wollen? Aber die Web-App gehört definitiv in die Bookmarks.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Kulterer
Gast

Supper Tipp, vielen Dank.
Leider aber arbeitet Sizzy anders als der kostenpflichtige Blisk-Browser: Überprüft eine Webseite bei Auslieferung, ob der abrufende Browser Desktop oder mobil ist (User-Agent), sprich nur die mobile Seite ausliefert, wenn sie auch “wirklich” mobil abgerufen wird, dann stellt Sizzy die Desktopversion dar. Schade, aber das können die Entwickler bestimmt nachbessern.

Michi
Gast

Vielen Dank für den Tooltipp, kannte ich noch nicht! Werde ich definitiv demnächst testen auf meiner Website.

wpDiscuz