Flexibles Raster

Responsive Design arbeitet mit einem flexiblen Raster aus Inhalts-Elementen, die sich in Position und Aussehen der Display-Grösse anpassen. Je nach Endgerät werden Elemente nebeneinander oder untereinander angeordnet.

Variable Anzeige von Inhalten

Responsive Design sollte sich nicht nur auf unterschiedliche Positionierung von Layout Elementen konzentrieren, sondern auch die Userszenarien für die einzelnen Endgeräte berücksichtigen. So sind für einen Smart-Phone-Nutzer andere Inhalte wichtig als für einen PC-User. Mit Response Design lassen sich Inhalte für bestimmte Endgeräte gezielt ausblenden, so dass der Besucher nur jene Elemente sieht, die für das entsprechende Ausgabegerät auch sinnvoll sind.

Unterschiedliches Design von Navigationselementen

Auch die Form und das Verhalten von Navigationselementen lassen sich an die Endgeräte anpassen. So kann das Design die speziellen Anforderungen von Mobilen Geräten (Touch Screen, Platzproblem) berücksichtigen und eine optimale Usability erreichen.

Relative Grössen für Typografie

Schriftgrössen werden über relative Werte definiert und nicht mehr über fixe Pixelangaben. Als Basis dienen Werte in Prozent. Dies erlaubt ein durchgängiges Typografie-Design, das auf allen Plattformen eine optimale Lesebarkeit gewährleistet.

Flexible Grösse der Bilder

Auch Bilder werden je nach Endgerät in unterschiedlichen Grössen dargestellt. Dabei lässt sich auch die „Datengrösse“ der Bilder bestimmen. So werden bei mobilen Geräten „kleinere“ Versionen der Bilder geladen, was für schnelle Ladezeiten und ein angenehmes „Surfen“ sorgt.

Media Queries

CSS Media Queries sind ein wichtiger Kern des Responsive Designs. Mit ihrer Hilfe lassen sich Parameter wie etwa die Auflösung bestimmen und als Basis für die Ausgabe auf dem Endgerät einsetzen. So kann der Designer definieren, welches Layout für welche Geräte verwendet wird.

Responsive Web Design – Teil 2: Einsatz in der Praxis

Responsive Design ist ein nützlicher Ansatz, um die verschiedenen Auflösungen zu meistern. Doch was bedeutet sein Einsatz für Sie als Websitebetreiber? Wie müssen Sie vorgehen, um Responsive Design erfolgreich zu implementieren? Ist es ein Muss oder gibt es Alternativen? Diese und andere Fragen werden wir kurz beleuchten. Die Informationen sollen Ihnen bei der Entscheidung helfen, ob Responsive Design für Ihr Projekt geeignet ist.

Vorteile im Überblick

• Eine Website-Installation für alle Ausgabegeräte: Es fällt kein zusätzlicher Aufwand an, um separate Seiten wie etwa Mobile Website zu implementieren und zu warten.
• Ein Layout, das sich flexibel an die Auflösung der Endgeräte anpasst: Responsive Design gewährleistet eine optimale Usability für die verschiedenen Ausgabemedien. Dabei bleibt der Look and Feel der Website über alle Geräte konsistent, so dass der User nach einem Gerätewechsel schnell zurecht findet.
• Plattformgerechte Inhalte: Variable Inhalte und Informations-Architektur verbessern die Bedienbarkeit und sorgen dafür, dass der User nur jene Inhalte erhält, die auf dem entsprechenden Endgerät auch nützlich sind. Dies steigert das Userexperience und erhöht die Akzeptanz des Angebots.
• Grundlage für wirkungsvolles Branding: Das durchgängige Design auf allen Plattformen unterstützt die Corporate Identity und erhöht die Wiedererkennung der „Marke“.

Entscheidungsgrundlagen

Responsive Webdesign ist aber nicht immer die richtige Lösung für jede Website. Je nach Ausgangssituation, Anforderungen und Zielgruppen kommen auch andere Ansätze in Frage. Deshalb sollte man vor dem Projektstart die Rahmenbedingungen analysieren und die Auswirkungen von Responsive Design auf das Projekt bedenken. Obwohl diese Evaluation für jede Website unterschiedlich ausfällt, existieren dennoch ein paar grundlegende Szenarien, die für oder gegen Responsive Design sprechen.

• Relaunch: Planen Sie eine komplett neue Website oder einen Relaunch, ist Responsive Design oft der beste Lösungsansatz. Mit vergleichsweise wenig technischem Aufwand können Sie alle Bildschirmauflösungen abdecken. Zudem sind Sie für die zukünftige Vielfalt der Endgeräte bestens gerüstet. Allerdings müssen Sie bedenken, dass der Initiale konventionelle Aufwand höher ausfällt. Denn um die unterschiedlichen Nutzungsszenarien abzudecken, müssen Sie genau definieren, welche Inhalte auf welchen Endgeräten sinnvoll sind und wie diese in einem flexiblen Rasterlayout dargestellt werden.
• Komplexe Webseiten: Umfangreiche und komplexe Websites mit vielen Schnittstellen und speziellen Tools wie z.B. Produktkonfigurator lassen sich nicht so einfach mit Responsive Design umsetzen. Hier sollten Sie im Einzelfall prüfen, ob es nicht sinnvoll ist, Website mit Responsive Design und mobile Apps zu kombinieren. Dieser Ansatz empfiehlt sich etwa bei Webauftritten mit Buchungsmöglichkeiten für Reisen, Hotelzimmer usw. Hier ist eine mobile Reservationsapp userfreundlicher, da sie optimal auf das mobile Nutzerszenario angepasst werden kann.
• Kleine Budgets: Eine Website mit Responsive Design umzusetzen, kostet mehr als eine Lösung mit festen Breiten. Deshalb sollten Sie abwägen, ob Sie User mit Smart Phones bedienen möchten oder nicht. Und welcher Inhalt für den mobilen Nutzungskontext wichtig ist. Je nach Resultat dieser Abklärungen reicht eine Website mit fixen Grössen oder Sie realisieren eine „abgespeckte“ mobile Version mit Inhalten, die nur für mobile Nutzer relevant sind.
• Facelift: Wenn Sie nur ein visuelles Facelift Ihrer bestehenden Website durchführen, sollten Sie ebenfalls Nutzen und Aufwand abwägen. Bei einfachen Websites ist ein „Umrüsten“ auf Responsive Design durchaus sinnvoll, während bei komplexen Internetauftritten der Aufwand dafür zu hoch sein kann oder nicht immer möglich ist. In diesem Fall sind Sie mit einer mobilen Website mit reduziertem Inhalt besser bedient.

Konzeptioneller Ansatz

Grundsätzlich können Sie ein Responsive Design Projekt auf zwei Arten anpacken.
Erstens, der sogenannte visuelle Ansatz. Hier berücksichtigen Sie lediglich die unterschiedliche Anordnung und Form der visuellen Elemente in Abhängigkeit von dem Ausgabegerät. Das heisst, Sie definieren, wo verschiedene Inhaltelemente auf der Seite platziert werden und wie sie sich verhalten, wenn die Anzeige-Auflösung sich ändert. Dabei berücksichtigen Sie auch, dass die Darstellung und das Verhalten von Menüs je nach Endgerät anders ausfallen. Touchscreens brauchen zum Beispiel andere Button-Grössen als ein PC-Monitor. Dropdownmenüs müssen so funktionieren, dass sie nicht vom Hover-Effekt abhängig sind, den es auf mobilen Geräten nicht gibt.

Der zweite Ansatz geht noch einen Schritt weiter. Er berücksichtigt nicht nur die visuell-formalen Anpassungen, sondern stellt auch die Frage, welche Inhalte für welches Endgerät sinnvoll sind. Basierend auf dieser Analyse werden gewisse Inhalte auf einigen Geräten gar nicht oder in reduzierter Form angezeigt. Ein gutes Beispiel sind Tabellen. Was auf einem breiten PC-Monitor gut aussieht, kommt auf dem Smart-Phone zu klein daher. Je nach Inhalt lässt man die ganze Tabelle auf dem mobilen Gerät weg, oder zeigt nur jene Inhalte an, die im mobilen Suerkontext auch nötig und sinnvoll sind.

Welchen Ansatz Sie anwenden, hängt vom Umfang und der Form der Inhalte ab. In beiden Fällen ist es aber zu empfehlen, bei der Konzeption nach dem Prinzip „Mobile First“ zu arbeiten. Das heisst, beginnen Sie zuerst mit der Gestaltung für mobile Geräte.