Google Resizer hat dein responsives Design im Blick

Dank zahlreicher mobiler Gerätetypen müssen zeitgemäße Websites für unterschiedliche Auflösungen und Orientierungen gestaltet werden. Um zu sehen, wie eine Website auf einem Tablet, Smartphone oder klassischem Monitor aussieht, ist es jedoch nicht notwendig, immer alle Geräte parat zu haben. Mit Google Resizer gibt es ein praktisches Webtool, das dir eine Website im Handumdrehen für verschiedene Gerätetypen und Auflösungen darstellt.

Google Resizer

Adresse eingeben und loslegen

Google Resizer ist denkbar einfach zu bedienen. Du gibst einfach die Adresse der Website ein, die du auf ihre Responsivität testen möchtest, und erhältst direkt eine Darstellung deiner Website auf den drei gängigen Geräteklassen Desktop, Tablet und Smartphone. Per Iframe wird die Website in der entsprechenden Auflösung des jeweiligen Gerätes dargestellt. Du kannst also wie gewohnt durch deine Website navigieren und jede Seite ausgiebig testen.

google-resizer1
Darstellung auf Desktop, Tablet und Smartphone auf einem Blick

Google hat sein Tool speziell für sein Material Design entwickelt. Es soll Webdesignern und -entwicklern helfen, Breakpoints sowie responsive Raster auf den verschiedenen Auflösungen zu prüfen. Aber auch jede andere Website, die nicht auf Googles Material Design beruht, bietet sich an, um sie per Google Resizer auf ihre Darstellung auf verschiedenen Geräte zu testen.

Verschiedene Desktopauflösungen berücksichtigen

Neben der gemeinsamen Darstellung aller drei Geräte gibt es für Desktop und Mobilgerät noch jeweils eigene Seiten. Bei der Desktopseite wird dir ein Lineal mit gängigen Auflösungen dargestellt. Von 1600 Pixel bis 480 Pixel Breite stehen insgesamt sieben verschiedene Breiten zur Auswahl. Per Klick in das Lineal wechselst du einfach die Auflösung und deine Website wird entsprechend angepasst.

google-resizer2
Darstellung auf dem Desktop mit unterschiedlichen Breakpoints

So siehst du schnell, wie sich deine Website verhält, wenn sie auf größeren oder kleineren Monitoren beziehungsweise Browsergrößen dargestellt wird. Die Größen sind aus den Richtlinien von Googles Material Design entnommen. Dort sind sieben Breakpoints definiert, die entsprechend benannt sind. So gibt es zwischen „Window xsmall“ und „Window xlarge“ verschiedene Breakpoints.

Für Mobilgeräte testen

Wie deine Website auf Mobilgeräten wie Smartphones und Tablets aussiehst, prüfst du über eine eigene Seite. Auch hier findest du wieder ein Lineal mit gängigen Auflösungen – hier allerdings speziell solche, wie sie auf Smartphones und Tablets vorhanden sind. So testet du deine Website zum Beispiel auf einem klassischen Smartphone mit einer Auflösung von 360 Pixel in der Breite.

google-resizer3
Darstellung auf einem Smartphone

Neben der Darstellung im Portrait-Modus bietet dir Google Resizer auch den entsprechenden Landscape-Modus an. Die größte angebotene Auflösung sind hier 1024 Pixel Breite, was einem gängigen Tablet entspricht.

Entwicklertools oder Google Resizer verwenden

Die meisten Webentwickler dürften mit den Entwicklertools vertraut sein, die es unter anderen im Chrome und auch im Firefox gibt. Auch diese bieten Möglichkeiten an, eine Website für verschiedene Auflösungen zu testen. Zusätzlich eröffnen die Entwicklertools die Möglichkeit, Touchdisplays zu simulieren und eine programmierte Gestensteuerung direkt am Desktop zu testen.

Google Resizer kann hier (leider) nur responsives Design testen, was für einen umfangreichen Test einer Website in der Regel zu wenig ist. Dennoch ist Google Resizer ein gutes Werkzeug, um Kunden das responsive Design einer Website zu präsentieren. Auch die Zusammenarbeit mit Designern, die mit den Entwicklertools nicht vertraut sind, erleichtert das Tool. Denn Google Resizer ist übersichtlich gestaltet und einfach zu bedienen.

Wenn es „nur“ darum geht, ein responsives Weblayout auf seine korrekte Darstellung zu prüfen oder es zu präsentieren, stellt Google Resizer eine gute und schnelle Möglichkeit dar.

(dpe)

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.

Sortiert nach:   neueste | älteste | beste Bewertung
ati
Gast
ati
4 Monate 28 Tage her
yapDesign
Gast
4 Monate 25 Tage her

Schöner informativer Artikel, werde ich auf jeden Fall ausprobieren. Bisher nutze ich für meine Webseite ausschließlich den Service von browserstack.com. Browserstack stellt virtuelle Maschinen bereit mit denen man seine Webseiten auf verschiedenen Endgeräten testen kann.

trackback

[…] Sourced through Scoop.it from: http://www.drweb.de […]

Webmaster
Gast
Webmaster
4 Monate 23 Tage her

Nette Sache, aber nun nicht neu… http://quirktools.com/screenfly/ z.B. ist mein persönlicher Favorit und kann ich weiterempfehlen, da unzählige (sogar frei definierbare) Skalierungen möglich sind

Christian
Gast
4 Monate 22 Tage her

Informativ. Ist aber nur ein nettes Spielzeug von Google da durch die modernen Browser das sowieso unterstützt wird. Browserfenster kleiner machen oder größer machen. –> Ansicht der Website ändert sich.

fewe
Gast
fewe
4 Monate 19 Tage her
Na ja, Google Resizer finde ich nicht sonderlich hilfreich. Die Simulationsmöglichkeiten von Google Chrome sind sehr gut. Das Problem – jedenfalls war das bei meinem Versuch so – ist, dass Resizer nur die Displaygröße ändert, aber sonst nichts. Es wird also für das Smartphone einfach nur ein kleineres Display gemacht, aber alle anderen Gegebenheiten – v.a. die Angaben zu user-agent etc. – werden nicht simuliert. Um aber herauszubekommen, ob es sich um ein Gerät mit Touchscreen-Bedienung oder einen Fernseher handelt, reicht mir allein die Displaygröße nicht. Es geht ja beim Webdesign freilich nicht nur darum, dass der Inhalt brauchbar dargestellt… Read more »
Dieter Petereit
Dr. Web
4 Monate 18 Tage her

Vollkommen berechtigter Einwand. Deshalb hatte Denis ja auch darauf hingewiesen, dass es in erster Linie eine einfache und ansehnliche Möglichkeit ist, responsive Designs dem Kunden zu präsentieren.

trackback

[…] Google Resizer hat dein responsives Design im Blick […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen