//
du liest...
Beiträge

Responsive Webdesign: Nützliche Tools und offene Fragen

Im Rahmen einer größeren Studie, an der ich derzeit noch arbeite, habe ich mich ein wenig intensiver mit dem Thema Responsive Design von Webseiten beschäftigt. “Responsive” zählt derzeit wohl zu den Buzzwords, die in kaum einem Bingo fehlen dürfen – egal ob im Zusammenhang mit “Design”, “Website”, “Web”, “Advertising” oder was auch immer.

Warum? Responsive Webdesign reagiert auf die immer intensivere Informationsaufnahme über vielfältige mobile Devices mit unterschiedlichen Displays. Es passt sich automatisch der Displaygröße an, was angesichts der komplexen Seiten auch einen höheren Programmieraufwand erfordert. Auf diese Weise werden die Inhalte einheitlich unabhängig von der Ausgabeplattform – Desktop, Laptop, Tablet, Smartphone – angezeigt. Heute will plötzlich jeder seine Webseite “responsive” gestalten. Dabei hat “Responsive Webdesign” durchaus seine Nachteile, die Patrick Voelcker ausführlich in seinem kritischen Blog-Beitrag beleuchtet.

6 Tools im Test
Doch mit dieser Diskussion über Sinn und Unsinn will ich mich hier heute weniger auseinandersetzen. Vielmehr habe ich einige der Tools getestet, die mir teils über Twitter empfohlen – danke dafür nochmals! – und die zum Teil bei t3n kürzlich beschrieben wurden. Kurz zu meinen Ergebnissen.

a) Das viel beschriebene und nett anzusehende Am I Responsive ist nicht mehr als eine Spielerei. Das Layout lässt sich nur anhand von vier Größen von Apple-Geräten testen – und ausschließlich in einem fixierten Format.

b) Besser gefällt mir schon deviceponsive.com: Visuell ansprechend kann man überprüfen, wie die Inhalte der eigenen oder einer fremden Webseite auf Apple-Geräten, auf dem Kindle sowie dem Samsung Galaxy – jeweils sowohl im Portrait- als auch im Landscape-Format – angezeigt werden.

c) Der Responsive Design Test arbeitet etwas anders: Hier lässt sich die Webseite eingeben und dann nicht anhand von Markengeräten sondern anhand konkreter Ausgabegrößen von Geräten – bis 240px, bis 320px, bis 480px, bis 768px, bis 1024px – überprüfen. Eine ähnliche Darstellung bietet auch Matt Kersleys Responsive Design Testing Tool.

d) Wer seine Inhalte vor allem auf Smartphones – vertikal wie horizontal – testen will, dem ist der Mobile emulator ans Herz gelegt. Beim Test werden dazu Größen, Auflösungen, Bilder etc. berücksichtigt; auch die genaue Größe des Bildschirmes lässt sich individuell eingeben.

e) Top finde ich den ResponsiveTest. Im DropDown-Menü lassen sich zahlreiche Marken von Smartphones, Tablets, Laptops und Desktops individuell auswählen. iPhone 3 bis iPhone 5, Samsung S2 bis S4, diverse Blackberrys und HTCs, verschiedene iPads, Kindles und Barnes & Nobles oder Samsung Pads, dazu Laptops und Desktops von Dell, Sony, HP und vielen anderen zeigen die Vielfalt dieses Tools. Hilfreich: Alle Geräte lassen sich vom Hoch- auch ins Breitformat bewegen, also genau so, wie User ihre Geräte auch nutzen. Wie das perfekt funktioniert, habe ich mit der Webseite der Marke Illy getestet, die – bis auf Blackberry – perfekt auf die verschiedenen Ansichten optimiert ist.

Thema mobile Webseiten

Trotz allen hilfreichen Tools: Eine Problematik lösen sie alle nicht. Um diese kurz zu beschreiben: Wer beispielsweise tchibo.de in eines der Tools eingibt, der erhält beim Format Smartphone das Ergebnis eines nicht responsiven Designs (siehe Abb. 1). Wenn ich dagegen in den Safari- oder Crome-Browser meines iPhone 4 die Webseite tchibo.de eingebe, wird sie mir sehr sauber angezeigt (siehe Abb. 2).

Dies gilt nicht nur für diese Marke, sondern auch für viele anderen. Ich habe dies beispielsweise für t3n.de, sport1.de, arbeitsagentur.de, vw.de und weitere Marken getestet.

Dies scheint darauf zurückzuführen zu sein – so vermute ich, lasse mich aber gerne korrigieren –, dass für die Marken spezielle mobile Webseiten entwickelt wurden. Dies lässt dann den Umkehrschluss wiederum zu, dass mit all diesen Tools zwar getestet werden kann, ob eine Webseite Responsive Webdesign hat oder nicht. Ob sie trotzdem gerade auf Smartphones perfekt angezeigt wird, dies können die Tools nicht immer anzeigen.

About these ads

Über dominikruisinger

Ideen, Gedanken, Anmerkungen von Dominik Ruisinger – Journalist, Dozent, Coach, PR-Berater, Autor der Fachbücher 'Online Relations' und 'Public Relations'

Diskussionen

4 Gedanken zu “Responsive Webdesign: Nützliche Tools und offene Fragen

  1. Für Unternehmen führt kein Weg daran vorbei, Websites und Landingpages auch für den mobilen Zugang über Smartphones, Tablets usw. nutzerfreundlich zu gestalten. Weitere interessante Informationen zum Thema finden sich unter:

    http://real-estate-blog.ch/2013/08/05/immobilienmarketing-in-der-schweiz-teil-responsive-design-wird-immer-bedeutender/

    Verfasst von Sina | 30. August 2013, 11:35 vormittags
  2. Danke für die Tipps. Ich bin auch im Bereich Responsive Design tätig. Ich werde die Tools mal ausprobieren.

    Verfasst von Jenny | 31. August 2013, 12:01 nachmittags

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ photo

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Folgen

Erhalte jeden neuen Beitrag in deinen Posteingang.

Schließe dich 49 Followern an

%d Bloggern gefällt das: