Responsive Webdesign

Im Bereich des Responsive Webdesign geht es darum, eine Website so aufzubauen, dass sie auf unterschiedlichsten Geräten gut funktioniert und optimal nutzbar ist.

Die mittlerweile vielfältigen Möglichkeiten zur Nutzung des Internets – und die große Varianz an internetfähigen Geräten am Markt – führen dazu, dass es nicht mehr den klassischen Nutzer am Desktop-PC gibt. Ob per Smartphone, Tablet, stationärem Rechner, oder gar TV, mit kleinem 2-Zoll-Display, 30-Zoll-Bildschirm, mit Retina-Auflösung, moderner schneller Hardware oder mit älterem, wenig performantem System; ob konzentriert am Schreibtisch, unterwegs in der U-Bahn oder nebenher beim Fernsehen – eine responsive Web-Applikation kann in jedem Kontext ein hervorragendes Erlebnis bieten.

Eine Website – für alle Geräte!

Bei einer responsiven Website existiert nur eine einzige Code-Basis für alle Ausprägungen. Die Schaffung separater, parallel betriebener Lösungen für unterschiedliche Geräte kann komplett entfallen. Die Optimierung geschieht hierbei nicht auf bestimmte einzelne Geräte (Device Detection), sondern auf Basis von verschiedenen technischen Eigenheiten des Geräts (Feature Detection).

Zu berücksichtigen sind dabei neben der Größe und Art des Displays beispielsweise:

Auf diese Weise lässt sich sowohl mit der großen Varianz am Markt umgehen, als auch eine zukunftsfähige Basis schaffen!

"Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web."

Jeremy Keith (@adactio)

Layout

Das Design einer responsiven Website ist flexibel und fließend – es passt sich an das jeweilige Display an und funktioniert einfach in allen Größen! Entsprechend gibt es nicht ein einziges Layout, sondern eher verschiedene Ausprägungen einer Grundgestaltung.

Performance

Sowohl die unterschiedlichen Verbindungsqualitäten als auch die technische Ausstattung eines Gerätes spielen eine große Rolle in Bezug auf die Performance einer Web-Applikation. Auch aus diesem Grund werden Darstellung und Funktionalität oftmals im mobilen Kontext anders ausgeprägt sein als z.B. für einen Desktop-Rechner.

Der Workflow: Hauptsache flexibel!

Wie die Website selbst, so muss auch der Workflow in einem responsiven Projekt flexibel und anpassungsfähig sein. Design und technische Umsetzung sollten nicht getrennt voneinander stattfinden – die Erstellung von fertigen Layouts zu Anfang eines Projekts und zur finalen Übergabe in die Entwicklung ist in diesem Zusammenhang nicht der ideale Weg. Ein herkömmliches, statisches Layout kann die flexiblen Möglichkeiten der Darstellung nicht berücksichtigen. Vielmehr ist eine starke Verzahnung der unterschiedlichen Fachgebiete sinnvoll, die in einem iterativen Prozess (Konzeption, Gestaltung, Prototyping, Testing) zusammenarbeiten.

Durch ein frühes Prototyping und Testing im Browser und auf verschiedenen Geräten können – neben der reinen Darstellung – Aspekte wie die Benutzbarkeit und Bedienung bestimmter Elemente, das Gesamt-Verhalten und die Performance der Applikation frühzeitig berücksichtigt und im weiteren Projektverlauf angepasst und optimiert werden.

Mobil? Am besten zuerst!

Grundsätzlich lässt sich eine responsive Website aus jeder Richtung aufbauen – man kann z.B. mit der Ausrichtung auf große Geräte starten und dann zu kleineren Geräten hin optimieren.
Gerade beim Neuaufbau einer Web-Präsenz bietet sich aber der "mobile first"-Ansatz an. Hier liegt der Startpunkt der Konzeption, Gestaltung und technischen Umsetzung bei mobilen Geräten mit kleinem Display und weniger performanter Hardware. Die Website wird dann von dieser eher kleinen Variante sukzessive erweitert und für größere, technisch leistungsfähigere Geräte aufgebaut. Dem"progressive enhancement"-Prinzip folgend werden Erweiterungen und Anpassungen immer nur für die Geräte geladen, die das jeweilige Feature unterstützen ("conditional loading").

Bei dieser Herangehensweise stehen von vornherein ein schlanker Aufbau, geringe Datenmengen, Optimierung auf Touch-Bedienung und eine langsame Datenverbindung im Mittelpunkt. Auch ältere Geräte können auf diese Weise sehr viel besser abgefangen und bedient werden, da sie neue nicht-unterstützte Techniken einfach nicht aufgebürdet bekommen. Auch die Fokussierung auf den Kerninhalt wird bei diesem Weg von Beginn an unterstützt.

Content Strategie: Fokussieren, bitte!

Gerade aufgrund der teils kleinen Displays im mobilen Bereich muss sehr viel Wert auf den Inhalt und seine Struktur gelegt werden. Der Kerninhalt und die wichtigsten Informationen gehören nach oben, sodass diese bei wenig verfügbarem Platz sofort im Fokus stehen. Sekundäre Inhalte folgen darunter oder können im größeren Kontext anders angeordnet werden.

Neue Wege sind dazu da, beschritten zu werden.

Wenn Sie Ihre Website, ein Web-Portal, oder anderweitiges Web-Projekt modern entwickeln und auf eine zukunftsfähige Basis setzen möchten, dann werden wir diesen Weg gerne mit Ihnen gehen, und die für Sie passende, responsive Lösung entwickeln!

Ob Layout, Gestaltung, Implementierung oder die Vorgehensweise (Responsive Workflow) – kommen Sie mit Ihren Fragen zu uns. Bei uns erhalten Sie eine kompetente Beratung – damit Ihr Webprojekt zum Erfolgsprojekt wird!

Wünschen Sie weitere Informationen oder haben Sie Fragen?

Nehmen Sie Kontakt auf