Drücke die Tasten ◄ ► für weitere Artikel  

Webdesign: Screenshot-Tool „Am I Responsive?“

Das kleine aber feine Webtool „Am I Responsive?“ zeigt beliebige Websites in vier weit verbreiteten Viewport-Größen. Auf diese Weise kann man sehr schnell ausprobieren und zeigen, wie Responsive Webdesign funktioniert oder auch, warum es überhaupt notwendig ist.

Webdesign: Screenshot-Tool „Am I Responsive?“

Dabei sollte man „Am I Responsive?“ nicht als Tool für Tests ansehen, schreibt der Macher Justin Avery, Webentwickler aus Brisbane. Die sollte man stattdessen immer auf den echten Geräten machen. Vielmehr gehe es um einen schnellen Überblick – während der Entwicklung oder aber auch in Gesprächen mit Kunden.

URL eingeben, Return drücken und „Am I Responsive?“ zeigt die Website in vier verbreiteten Viewport-Größen.

Das Tool funktioniert dabei denkbar simpel: Man gibt die fraglich URL an und die Seite wird in die vier symbolischen Geräte geladen. Man kann auf die Ansicht auch direkt verlinken, wie beispielsweise für unsere Verlagsseite yeebase.com. Justin Avery nutzt für das Tool Iframes. Es handelt sich also um Live-Ansichten der Seite in den Viewport-Breiten 1.600, 1.280, 768 und 320 Pixel, die jeweils für Desktop, Laptop, Tablet und Smartphone stehen. Damit die Ansicht zum jeweiligen Gerät passt, wird sie entsprechend verkleinert. Wer will, kann die Geräte auf der Tool-Website auch durch drag and drop umgruppieren.

Dass man um einen Test mit echten Geräten nicht herumkommt, sieht man u.a. an einem Beispiel: Der Mobile Safari von iOS würde eine nicht optimierte Seite verkleinern, um sie komplett anzuzeigen. Im Tool hingegen ist wird sie nicht verkleinert und nur der linke obere Ausschnitt der Seite angezeigt.

Justin Avery ist bei alldem offen für Verbesserungswünsche und Ideen. Besonders gewünscht wird von den Nutzern beispielsweise die Möglichkeit, Smartphone und Tablet auch im Quermodus anzuzeigen.

Mehr über die Hintergründe von „Am I Responsive?“ erfahrt ihr hier im Blog von Justin Avery.

via Elmastudio

148 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
8 Antworten
  1. von Ahmet Topal via facebook am 01.04.2013 (12:19Uhr)

    Etwas besser: http://www.responsinator.com/

  2. von Daniel Köpf via facebook am 01.04.2013 (13:24Uhr)

    Oder hier: http://www.mobil-startklar.de/

  3. von MArc J. Schmidt via facebook am 01.04.2013 (14:17Uhr)

    noch besser: http://cybercrab.com/screencheck/

  4. von MaName Iis Mark via facebook am 01.04.2013 (15:15Uhr)

    Ich finde diese Seite optimal: http://www.responsinator.com/

  5. von pengux am 01.04.2013 (15:52Uhr)

    Hmm... um den Viewport möglichst optimal zu nutzen, variiere ich auf meiner Seite (typo3) per typoscript die Menüdarstellung je nach Endgerät und binde ebenso eine andere CSS-Datei ein. Sowohl die hier besprochene als auch die von euch genannten Seiten berücksichtigen diese Änderungen (die auf realen Geräten idR recht gut funktionieren) allesamt nicht.

    Gibt es da ein ordentliches Testtool - oder ist mein Weg ggf. grundsätzlich falsch?
    Andgenehmen Tag!
    pengux

  6. von Robert Fietzek via facebook am 02.04.2013 (09:25Uhr)

    Woran liegt das, dass KEINE dieser Seiten die tatsächliche Vorschau zeigt, wie sie auf einem iPhone 4 dargestellt wird?
    Es handelt sich um ein Hintergrundbild. Hier der Screenshot vom iPhone und die URL:
    http://www.freak-agentur.de/screenshot.png
    www.freak-agentur.de

  7. von Dirk am 02.04.2013 (15:26Uhr)

    @Robert Fietzek:
    Sicherlich ganz einfach durch die Metatags beim Abfragen der Webseite. Also bei der verkleinerten Darstellung wird die Seite nicht wiederholt abgefragt und das Abfragende teilt dem Webserver nicht mit, dass die Frage angeblich von einem mobilen Safari stamme. Deshalb liefert der Webserver anschließend nicht die für den mobilen Safari optimierte Seite, was früher auch zufällig gleichzeitig eine geringere Auflösung bedeutete.

  8. von 8 kostenlose Screenshot-Tools für Mac O… am 08.08.2013 (09:55Uhr)

    […] Webdesign: Screenshot-Tool „Am I Responsive?“  – t3n News […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webdesign
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch.. ... » weiterlesen

SVGMagic: Automatischer SVG-Fallback für deine Webseite
SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ... » weiterlesen

Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander
Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander

Duo ist ein Browser, der dabei helfen soll, Responsive Webdesign zu testen. Dazu stellt er eine mobile Ansicht neben einer Desktop- oder Tablet-Ansicht dar. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen