Denis Potschien 23. November 2012

Viewport Resizer: Extrem flexibles Bookmarklet für die Simulation unterschiedlicher Auflösungen

Kein Beitragsbild

Webdesigner stehen zunehmend vor der Aufgabe, Websites für mehrere Auflösungen zu gestalten. Die einfache Unterscheidung zwischen Desktop- und Mobilversion reicht aufgrund der zahlreichen Geräte und ihrer Displays oft nicht aus. Mit Hilfe von Media Queries ist es kein (oder kaum) ein Problem, verschiedene Auflösungen zu berücksichtigen. Allerdings will jedes Layout zuvor getestet werden.


Viewport Resizer

Viewport Resizer als Bookmarklet

Der Viewport Resizer ist einer jener nützlichen Helfer, die man sich als Bookmarklet in die Adressleiste des Browsers ziehen und so bequem aufrufen kann. Das Bookmarklet gibt es in zwei verschiedenen Standard-Konfigurationen. Die eine beinhaltet zahlreiche Auflösungen für Smartphones, Tablets, Monitore sowie für diverse Apple-Geräte (iPhone und iPad); die andere Konfiguration beinhaltet nur Auflösungen diverser iOS-Geräte.


Die beiden Standard-Werkzeugleisten

Ist das Bookmarklet in der Adressleiste des Browser gelandet, lässt es sich auf beliebige Websites anwenden: einfach Website ansurfen und anschließend das Bookmarklet klicken. Über eine kleine Werkzeugleiste, die am oberen Seitenrand eingeblendet wird, werden die verschiedenen zur Verfügung stehenden Geräte angeboten. Ein Klick auf das entsprechende Icon sorgt dafür, dass die Website in der gewählten Auflösung dargestellt wird.

So lassen sich die per Media Queries hinterlegten Layouts schnell testen, ohne das Browserfenster anpassen zu müssen. Und für ganz ausgefallene Auflösungen besteht zudem die Möglichkeit, individuelle Werte anzugeben.

Individuell konfigurierbare Werkzeugleiste

Wem die beiden Standard-Konfigurationen nicht ausreichen, kann sich auch eine Werkzeugleiste mit Geräten individuell zusammenstellen. Der Viewport Resizer stellt neben Standard-Auflösungen auch konkrete Geräte und ihre Auflösungen bereit. Dazu zählen Smartphones und Tablets unter anderem von HTC, Nokia, Sony Ericsson und Motorola.

Über einen Text-Editor stellt man sich zudem individuelle Werte für Geräte zusammen, die nicht schon im Standard definiert sind. Hier vergibt man auch Namen und versieht sie nach Wunsch mit unterschiedlichen Icons. So entsteht schnell eine ganz eigene Werkzeugleiste, die anschließend als Bookmarklet in den Favoriten gespeichert werden kann.


Geräteauswahl und Result-Editor

Browser-Support und Einschränkungen

Der Viewport Resizer läuft unter allen gängigen Browsern mit Ausnahme des Internet Explorers. Wichtige Voraussetzung: Die zu testende Website muss innerhalb von Frames dargestellt werden können. Wer also „Framebreaker“ in seine Website eingebaut hat, muss diesen vorher deaktivieren.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

6 Kommentare

  1. Who the fuck ist Internet Explorer :)

    Darauf entwickelt doch hoffentlich niemand ;)

  2. Finde das richtig nützlich, man kann zwar mit Web-Developer die Fenstergröße mit einem Klick ändern, mit den Bookmarklet ist es aber schöner gelöst. Danke!

  3. Tolles Bookmarklet. Funktioniert zwar leider nicht mit lokalen Dateien, aber immerhin. Kennt jemand ein Bookmarklet um eine Seite mit den Print-Styles anzuzeigen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.