Magazin für digitale Arbeit & Kultur
Responsive design

Responsive Design Interview: "Der Designer muss von Anfang an device-übergreifend denken"

admin
#responsive design

Seit geraumer Zeit ist Responsive Design der Hype im Webdesign. Verständlich, denn mit dem steigenden Anteil von mobile Traffic wird es immer wichtiger, ein Webseite anzubieten, deren Inhalte auf verschiedenen Geräten mit verschieden großen Bildschirmen optimal dargestellt werden.

Der Vorteil von Responsive Design: Statt extra und separat mobile Versionen eine Webseite zu entwicklen, wird geräteunabhängig ein HTML-Code pro Seite verwendet. Mithilfe von CSS3-Media Queries werden dann die CSS-Regeln identifiziert, die im jeweiligen Browser anzuwenden sind. Das Darstellen von Inhalten gestaltet sich dadurch sehr flexibel. Je kleiner der Viewport, sprich das Display, desto reduzierter die ausgegebenen Inhalte. Selbst Google legt Web-Entwicklern mittlerweile in seiner Webmaster-Zentrale den Einsatz von Responsive Design ans Herz.

Unter deutschen Webseiten finden sich auch allerhand schöne Beispiele, die einen Responsive Design Ansatz realisiert haben. An dieser Stelle haben wir Euch bereits auf den Social News Aggregator virato.de hingewiesen. Die Kölner Agentur dw capital zeichnete verantwortlich für die Responsive-Design-Umsetzung des Portals.

Wir haben uns mit Massimo Mosna unterhalten, der als Senior User Experience Designer das Projekt geleitet hat. Dabei schildert er unter anderem die größten Hürden, die das Projekt zu meistern hatte, welches “Handwerkszeug” zum Einsatz kam und was Web-Designer bei Ihren ersten Responsive Design Projekten beachten sollten.

CREATE OR DIE: Herr Mosna, auf welchen Faktoren basierte im Fall von virato.de die Entscheidung, Responsive Design einzusetzen?

Massimo Mosna: Wir möchten Usern einen uneingeschränkten, medienübergreifenden Zugriff auf virato.de ermöglichen. Mittels Responsive Design wird es möglich, dass sich die Inhalte einer Seite der Bildschirmbreite automatisch anpassen. Das bedeutet, dass jeder Nutzer von Virato immer die gleiche, schnell zu erfassende Benutzeroberfläche vor sich liegen hat. Dabei ist es gleich, welches Device genutzt wird – ob Smartphone, Tablet oder Computerbildschirm mit einer 13 Zoll oder 31 Zoll Diagonale.

Entscheidend war auch, dass der Aufwand und die Entwicklungskosten geringer ausfallen, als einzelne device-spezifische Lösungen zu entwickeln – auch wenn die Komplexität der konzeptionellen Anforderungen gestiegen ist. 

CREATE OR DIE: Wie sieht es mit den eingebunden Bildern aus? Kam hier auch ein Responsive-Ansatz zum Einsatz? Oder wird ein Bild immer in derselben Größe heruntergeladen, egal wie groß der finale Viewport ist?

Massimo Mosna: Da virato.de dem deutschen Urheberrecht unterliegt, mussten wir bei der Bildauswahl diesen Bestimmungen Rechnung tragen. Aus rechtlichen Gründen darf Virato als Social News Aggregator lediglich öffentlich verfügbare og:images der Quellen nutzen. Somit sind wir auf zum Teil völlig unterschiedliche Maße angewiesen, die wir über og:images beziehen können. Grundsätzlich gestaltet sich der Responsive-Ansatz in diesem Zusammenhang so, dass ein Bild in der maximal eingesetzten Größe prozentual im CSS verkleinert wird – je nachdem, wie es durch das Layout bestimmt wird. Damit die flexible Handhabung durch das CSS gelingt ist es wichtig, dass im HTML keine fixen Größen angegeben sind. Durch die limitierte Größe der og:images mussten wir für Virato einen Kompromiss eingehen, um die Bilder korrekt anzeigen zu können. Je nach Bildmaß werden die Formate auf bestimmte Standardgrößen durch eine Bildengine gecroppt oder – wenn sie zu klein sind – durch Screenshots der jeweiligen Quellseite ersetzt. Je nach Device sind dann im CSS bestimmte Bildgrößen für die jeweilige Bildschirmbreite fix angegeben, die dann für die entsprechende Bildschirmbreite zum Einsatz kommen.

CREATE OR DIE: Was waren die größten Hürden, die bei der Umsetzung von Responsive Design für virato.de aufgetreten sind?

Massimo Mosna: Immer wenn Neuland betreten wird, ist es anfangs schwierig, den richtigen Prozess für ein optimales Ergebnis zu finden. In der Tat war die Entscheidung für eine bestimmte Vorgehensweise der gestalterischen Umsetzung in HTML/CSS, die größte Unbekannte. Unser Ansatz sah vor, zunächst das Desktop-Design 1:1 in HTML/CSS umzusetzen und anschließend die Pixel-Breiten durch Prozent für das Mobile-Layout zu ersetzen. Aus unserer Erfahrung ist es ein geeigneter Weg, diese Herausforderung zu meistern. Wir lernten auch, dass die enge Zusammenarbeit zwischen den verschiedenen Abteilungen Konzeption, Design und Umsetzung extrem wichtig und ein ständiger Austausch notwendig ist.

CREATE OR DIE: Für welche Gerätetypen und Auflösungen bzw. Breakpoints haben Sie entwickelt?

Massimo Mosna: Wir haben uns für folgende repräsentative Devices als Breiten für die Breakpoints entschieden:

  • 320 Pixel (iPhone Hochformat)
  • 480 Pixel (iPhone Querformat)
  • 600 Pixel (Nook/Kindle Tablet Querformat)
  • 768 Pixel (iPad Hochformat)
  • 1024 Pixel (iPad Querformat)
  • 1200 Pixel (Desktop)

Diese Breiten haben wir zum Testen in der Web Developer Toolbar eingerichtet, um jederzeit sehen zu können, wie sich die Seite verhält. Beim Testen musste darauf geachtet werden, dass die Seite auch bei Zwischenbreiten den hohen Anforderungen entspricht.

CREATE OR DIE: Welches Handwerkszeug kam zum Einsatz, sprich welches Responsive Framework?

Massimo Mosna: In Bezug auf die technischen Grundlagen für das Frontend dachten wir zuerst über den Einsatz von SASS bzw. LESS nach; entschieden haben wir uns aber final für ein bewährtes, statisches Setup aus HTML5 Boilerplate, in Textmate handgecodetem CSS und – ganz wichtig für den Internet Explorer 8 – Modernizr. Wir sind noch nicht vollends vom Einsatz von CSS-Frameworks überzeugt – es sei denn, Variablen sind zwingend für CSS-Parameter bei einem Projekt erforderlich. Dies war bei virato.de nicht der Fall.

Grundsätzlich beobachten wir den CSS-Framework-Markt sehr interessiert: Gridset (http://gridsetapp.com/) z.B. sieht sehr vielversprechend aus, besonders im Hinblick auf die Rastergestaltung in Verbindung mit den Breakpoints. Das Backend von Virato wurde mit Python unter Zuhilfenahme des Django Web Frameworks erstellt.

CREATE OR DIE: Können Sie interessierten Web-Designern, die in Responsive Design einsteigen wollen, für Anfänger geeignete Tools und Framework empfehlen?

Massimo Mosna: Ich würde allen Anfängern das Buch “Responsive Web Design” (http://www.abookapart.com/products/responsive-web-design/) des Responsive Design-“Erfinders” Ethan Marcotte empfehlen. Darin kann alles nachgelesen werden, was zum Thema wissenswert ist. Entsprechende Tools würde ich nicht empfehlen, da hier in nächster Zeit sicherlich noch spannende Tools entstehen.

CREATE OR DIE: Was sind aus Ihrer langjährigen Erfahrungen die großen Herausforderungen, denen sich ein Webdesigner stellen muss, wenn er beginnt, responsiv zu designen? Wie muss er/sie sich umstellen, welche angeeigneten, traditionellen Vorgehensweisen muss er/sie vor allem ablegen, um gutes Responsive Design zu machen?

Massimo Mosna: Beim Response Design muss der Designer von Anfang an device-übergreifend denken. Die gestalterische Herangehensweise an eine App unterscheidet sich gänzlich von einer Website, da sich sowohl die Bedienung dieser Devices, als auch die Bildschirmgröße und die Nutzungssituation sehr unterscheiden. Der Designer muss zwangsläufig den Blick für das Ganze haben und die Module einer Website möglichst generisch gestalten.

Das Responsive Design muss generisch so gehalten werden, dass es problemlos und ohne große Eingriffe auf das CSS frei anpassbar ist – ohne die Usability für eines der Devices zu vernachlässigen oder gar Features weglassen zu müssen. Die Herausforderung für den Designer ist, trotz dieser Einschränkungen, ein hochwertiges und sauberes Layout zu gestalten. Der User sollte keinen Unterschied in der Optik und Bedienung wahrnehmen – egal, ob virato.de vom Heim-PC, per Tablet oder Smartphone aufgerufen wird. 

CREATE OR DIE: Wie sieht es zur Zeit auf Kundenseite aus? Fragen immer mehr Auftraggeber nach Responsive Design oder hält sich die Nachfrage in Grenzen?

Massimo Mosna: Der Faktor “Zeit” spielt bei Kunden eine große Rolle. Der Kunde möchte meist nicht auf eine gesonderte App oder auf die Anpassungen für andere Tablet-Typen warten – gefragt sind schnelle und unkomplizierte Lösungen mit der bestmöglichen Reichweite. Weitere Vorteile von Responsive Design beziehen sich auf den bereits angesprochenen geringeren Aufwand und auch die sinkenden Kosten im Rahmen der Produktentwicklung. Die Kundenanfragen in diesem Bereich werden stetig zunehmen, da bin ich mir sicher.

CREATE OR DIE: Wissen Kunden, die Responsive Design wollen überhaupt, dass es mehr bedeutet als eine adaptive Seitenanpassung?

Massimo Mosna: Die meisten unterschätzen den Umfang einer solchen Umsetzung. Sie gehen davon aus, dass eine “einfache Skalierung” einer Website keinen großen Mehraufwand benötigt. Nach einem Beratungsgespräch verstehen sie erst die Komplexität, die dahintersteckt – dazu gehört die device-übergreifende Planung und Gestaltung inklusive der Entwicklung für die einzelnen Breakpoints.

CREATE OR DIE: Wenden wir uns zum Abschluss kurz der Online-Werbung zu. Hat diese auch ihre Zukunft im Responsive Design, bzw. gibt es hier schon Lösungen, die praktiziert werden und wenn ja, welche Probleme haben diese Lösungen noch?

Massimo Mosna: Bei der Online-Werbung stoßen wir auf ein Problem, denn die Vermarkter bieten uns ein System, das auf statischen Layout-Formaten – vor allem im Flash-Format – basiert. Dies muss sich ändern. Zum einen, weil Flash endgültig durch HTML5 abgelöst wird; zum anderen, weil flexible Werbeformate “vermarktbar” werden. Erste Vorschläge dazu kursieren im Netz, z. B. von Marc Boulton (http://www.markboulton.co.uk/journal/comments/responsive-advertising); sehr differenziert beleuchtet auch netmagazine dieses Problem ( http://www.netmagazine.com/features/state-responsive-advertising-publishers-perspective). Da die Vermarkterindustrie jedoch sales-zentriert denkt, wird sie sich zunächst dagegen sträuben, ihre bewährten Systeme zu ändern.

Mittelfristig wird es davon abhängen, wie sich das Responsive Design am Markt durchsetzt. Sollte dieser Fall eintreten, wovon ich ausgehe, können es sich die Publisher künftig nicht mehr leisten, diesen Markt zu ignorieren. Vielleicht wird sich auch das proprietäre Responsive-Werbeformat eines Anbieters durchsetzen – schlicht und ergreifend deswegen, weil kein anderes vorhanden ist. Achtung: Hier ist definitiv eine Marktlücke zu schließen. ;)

CREATE OR DIE: Vielen Dank für das Gespräch, Herr Mosna!

Zur Person:
Massimo Mosna ist Senior User Experience Designer bei dw capital in Köln. Seit über sieben Jahren arbeitet er im Mobile-Umfeld, angefangen von UMTS Bundesliga-Tickern und Mobile TV-Seiten für Vodafone bis hin zu device-übergreifenden 360-Grad-Lösungen wie bei Virato.

Über den Autor
Kommentare

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>