Responsive Webdesign - Die universelle Lösung

Stellen Sie sich vor, Sie hätten ein Puzzle, das sich an jede Oberfläche anpasst, auf die Sie es legen, vom einfachen Couchtisch bis zum großen Marmor-Esstisch. Darum geht es im Wesentlichen beim responsiven Webdesign. Die Vielzahl neuer Geräteplattformen und entsprechender Auflösungen gibt uns die Möglichkeit, unsere Zielgruppen und potenziellen Kunden an vielen verschiedenen Orten zu erreichen; wir sind nicht mehr auf den Bildschirm im Büro oder auf kabelgebundene Internetverbindungen beschränkt. Dank dieser vielen Möglichkeiten können wir jeden, überall und jederzeit erreichen. Diese Möglichkeiten können jedoch auch die Arbeit eines Designers erschweren, der bisher nur für eine oder eine sehr begrenzte Anzahl von Plattformen gestalten musste.

Im letzten Blog von Alex Castillo definierte er responsives Webdesign als eine Technik, die Media Queries, CSS3, fließende Layouts und flexible Bilder nutzt, um denselben Inhalt auf vielen verschiedenen Bildschirmauflösungen auf die gleiche Weise anzuzeigen. Dieser Artikel beleuchtet das responsive Webdesign aus der Sicht des Designers und zeigt, wie man diese Technik am besten einsetzt, um den Besuchern Ihrer Website unabhängig von der Wahl des Geräts ein einheitliches, benutzerfreundliches Erlebnis zu bieten.

Eine Auflösung: Eine antiquierte Denkweise

Bildschirmauflösungen sind in aller Munde und die “Einheitsgröße” gilt nur noch für Baseballmützen und Pyjamaanzüge mit Glasers I love NY-Logo. Jeden Monat kommt eine Vielzahl neuer Geräte auf den Markt, und die Zahl der verschiedenen Bildschirmauflösungen nimmt stetig zu. Wenn man bedenkt, dass der durchschnittliche Nutzer täglich mit 2 oder mehr verschiedenen Geräten interagiert, wird das Wachstum noch größer. Ich zum Beispiel benutze an einem typischen Tag im DOOR3-Büro ein Smartphone, ein Tablet, einen übergroßen Desktop-Computer und einen Laptop, alle mit unterschiedlichen Auflösungen.

Eine der wichtigsten Fragen, die vor der Durchführung eines Webprojekts geklärt werden muss, ist die Definition der Auflösung, für die Sie entwerfen werden. Als Designer haben wir versucht, Antworten in Analysen und Statistiken zu finden, in Diagrammen, die den Verkehr auf unseren Websites zeigen und in welchen Auflösungen die Benutzer unsere Website angesehen haben. Wir sind gezwungen, zu analysieren und zu klassifizieren, um die ideale Auflösung für ein bestimmtes Projekt zu finden, und wir lieben die Marktsegmentierung und die Erstellung von Personas aus gutem Grund. Einfach ausgedrückt: Wir müssen wissen, wo wir hinwollen.

Entwerfen für mehrere Plattformen

Traditionalisten werden Sie auffordern, getrennte Budgets für Enterprise Design Systems und die Entwicklung für jede Plattform bereitzustellen, z. B. getrennte Versionen für Desktop, Tablets und Smartphones. Dieser Ansatz hat zwar seine Vorteile, aber er bedeutet auch, dass die Entwicklungskosten exponentiell ansteigen. Angesichts der schieren Menge an Geräten, die es gibt, könnten Sie am Ende für 4-5 verschiedene Projekte von Grund auf bezahlen.

Ich empfehle einen anderen Ansatz: Halten Sie Ihre Entwicklungskosten niedrig und setzen Sie auf ein intelligentes Benutzererlebnis und Design. Diese Methode berücksichtigt eine breite Palette von Auflösungen und bietet den Nutzern ein nahtloses Erlebnis, egal wo sie sich befinden. Dies wiederum kann sich in einer größeren Anzahl von Impressionen und Konversionen auf Ihrer Website niederschlagen und so Ihr Geschäft verbessern.

Durch die Verwendung von Responsive Web Design können Sie etwa 70 % der Entwicklungskosten pro Version einsparen. Auch wenn einige argumentieren, dass Responsive Web Design in älteren Browsern nicht unterstützt wird, was historisch gesehen richtig ist, können wir durch die Verwendung moderner Technologien wie Java Script und Media Queries dieses Problem für alle Browser umgehen.

Das Puzzle zusammensetzen

Responsive Web Design ist ein intelligenter Weg, um Ihre Website in einer Welt mit unzähligen Bildschirmauflösungen effizient und effektiv zu gestalten. Um eine Website zu erstellen, die sich an alle Auflösungen anpasst, benötigen Sie das Fachwissen eines Teams für Benutzererfahrung und Design, das sich Gedanken darüber macht, wie der Inhalt auf einer Vielzahl verschiedener Bildschirme dargestellt wird. Je nach Plattform des Endnutzers passt das System das Design mit Hilfe von flüssigen Layouts, CSS3 und Media Queries an. Diese Methode schont die wertvollen Ressourcen des Unternehmens (d. h. das Geld), ohne die Benutzerfreundlichkeit und die Ästhetik zu beeinträchtigen und, was ebenso wichtig ist, ohne die Benutzer zu vergraulen. Mit anderen Worten: Responsive Webdesign ist wirklich die beste derzeit verfügbare Lösung für Entwickler, Designer und Kunden gleichermaßen.

Ein gutes Beispiel für responsives Webdesign finden Sie unter http://foodsense.is/, das eine Reihe von Steuerelementen enthält, mit denen die Benutzer die Breite des Browserfensters ändern und sehen können, wie sich das Design an verschiedene Auflösungen anpasst. Wenn Sie die Website über ein Tablet oder ein Telefon aufrufen, können Sie sicher sein, dass es ein anderes Layout für Sie gibt.