Eine Webseite für nur eine Art von Display zu erstellen ist heutzutage undenkbar - dem Smartphone und Tablet sei dank. Aber wie wird das Problem der flüssigen Darstellung auf mehreren Geräten gelöst? „Responsive Webdesign” ist ein oft genanntes Schlagwort. „Responsive Webdesign“ kann grob in zwei Bereiche aufgeteilt werden: „Adaptives Layout” und „Responsive Layout”. Aber was bedeuten die Begriffe eigentlich und welches der Beiden sollte man einsetzen? Wir bringen Licht ins Layout-Dunkel!
Was ist der Unterschied zwischen adaptivem und responsivem Layout?
Responsive Webdesign ist ausgelegt eine Webseite auf jedem Ausabegerät flüssig darzustellen - sei es ein Smartphone, Tablet oder ein Desktop-PC. Dafür werden Elemente wie Bilder, Schrift und Navigationsleisten, „flexibel“ oder „elastisch“. Die Webseite wird für die Breite des Ausgabemediums angepasst.
Responsives und adaptives Layout sind Teil des Responsive Webdesign. Sie arbeiten zu einem gewissen Grad mit denselben Elementen. Daher entstehen oftmals Mischformen. Allerdings gibt es doch klare Unterschiede.
Adaptives Layout wird für jede Darstellungsform einzeln angefertigt. Demnach gibt es verschiedene Grundrisse für Smartphone, Tablet und Monitor. Es ist ein Layout mit verschiedenen, fixierten Breiten. Jede Breite wird durch einen sogenannten „Breakpoint” gekennzeichnet.
Um selber zu testen, wo sich die Breakpoints einer Webseite befinden, muss nur das Browserfenster in der Breite verkleinert werden. An bestimmten Punkten wird die Webseite neu „einrasten”. An dieser Stelle verschwinden oder verändern sich verschiedene Elemente: Die Seitenleiste fällt weg, die Navigationsleiste verändert sich, das Logo verschiebt sich und die Bilder passen sich an.
Adaptives Layout
Quelle: http://cafeevoke.com/
Cafe Evoke hat ein adaptives Layout für ihre Homepage gewählt. Das obere Bild zeigt drei Mal dieselbe Seite - auf einem Desktop-PC (1), Tablet (2) und Smartphone (3). Besonders der leere Raum an den Seiten von Bild 2 und 3 lässt auf eine adaptive Lösung schließen. Die Bilder und die Schrift sind nicht elatisch. Sie haben eine vordefinierte Größe für das jeweilige Medium. Das ist besonders am Slider-Bild zu sehen: Ein Teil wird beim Wechsel von Desktop auf Tablet einfach abgeschnitten.
Responsive Layout
Im Gegensatz dazu wird ein responsives Layout mit flexiblen Rastern dargestellt. Das bedeutet, dass es weiterhin fixe Punkte gibt, an denen sich das Layout orientiert, aber Elemente zwischen diesen Fixpunkten flexibler sind. Der Raum des Ausgabemediums wird immer optimal ausgenutzt. Dadurch entsteht nie verschenkter Raum, der eigentlich mit Inhalt gefüllt sein könnte.
Quelle: http://stephencaver.com/
Ein schönes Beispiel ist die Webseite von Stephen Caver. Die drei Bilder sind wieder repräsentativ für Desktop (1), iPad (2) und iPhone (3). Seine Seite ist responsive. Sie verschenkt keinen Platz. Auch wenn das Browserfenster kleiner wird, passen sich die Schrift und der Header proportional zu der Bildschirmgröße an. Es entsteht kein ungefüllter Rand an den Seiten.
Die einzelnen Elemente werden relativ angegeben. Eine Seitenleiste soll zum Beispiel ein Drittel der Darstellungsfläche einnehmen. Die Bilder und Schriften sind bei einer responsiven Lösung elastisch und passen ihre Größe an das Ausgabegerät an. Das ist sehr zukunftsorientiert, da neue Ausgabegeräte auch neue Auflösungen zulassen werden.
Was ist besser?
Die Frage ist im ersten Moment einfach zu beantworten: Responsive Layout ist die definitive Wahl. Allerdings hat jede Medaille zwei Seiten und es gibt einige Gründe, warum flexible Raster nicht in Frage kommen können.
Ein responsives Layout muss von Anfang an in eine Webseite implementiert werden. Die Bilder und Elemente müssen flexibel sein. Das ist bei schon bestehenden Webseiten oft nicht der Fall. Insbesondere bei Unternehmen kommt eine komplette Neuerstellung nicht in Frage. Daher muss auf eine pragmatischere Lösung zurückgegriffen werden. Hier heißt die Antwort adaptiv. Das kann auch im Nachhinein eingefügt werden.
Das Arbeiten mit flexiblen Rastern ist, wie der Name schon sagt, flexibel. Daher ist es schwierig das fertige Produkt einzuschätzen. Es gibt keine fixen Zahlen, die eine perfekte Planung zulassen.
Die Entwicklung von einem flexiblen Layout ist teuer. Die Dauer und den Aufwand für solch eine Seite ist deutlich höher als bei adaptiven Layouts. Die Testphase dauert ebenfalls länger, daher entstehen mehr Kosten und größerer Ressourcenaufwand.
Allerdings birgt ein responsives Layout enorme Vorteile. Es ist im Gegensatz zu adaptiven Layout schon auf neue Modelle vorbereitet. Es muss für zukünftige Geräte nicht wieder angepasst werden.
Der größte Vorteil ist die Flexbilität des responsiven Layouts. Wo dem Adaptiven Grenzen gesetzt sind, wächst das Responsive Layout weiter. Der komplette Platz wird auf jedem Ausgabegerät optimal genutzt.
Fazit
Die Webdesigner-Gemeinde ist sich einig darüber, dass “Responsive Webdesign” die Zukunft gehört. Aber was ist die unmittelbar bessere Wahl?
Für neue Webseiten ist es eindeutig: Flexible Raster und responsives Layout sind der richtige Weg. Die Nutzung auf neuen Geräten ist durch die Flexibilität des Layouts ein Muss.
Allerdings muss man beachten, dass es kostenintensiver ist, als eine adaptive Lösung. Für bestehende Webseiten ist es zum Teil unmöglich ein responsives Layout einzufügen. Es bleibt ihnen trotzdem nicht erspart mit der Zeit zu gehen und sich an neue Darstellungsformen anzupassen. Für diese Webseiten ist adaptives Layout mit fixierten Breiten genau das Richtige.