Warum sollte man Responsive Webdesign einsetzen?

„Warte, ich googel das mal...“ - Ein Satz, der uns inzwischen überall begegnet, egal ob zuhause, im Restaurant oder unterwegs. Die Internetnutzung wird zunehmend mobil. Smartphone, Laptop, Tablet, Desktop-Computer: die Palette der auf dem Markt erhältlichen, internetfähigen Geräte erweitert sich stetig. Theoretisch müssen Sie damit rechnen, dass Ihre Webseite mit über 200 verschiedenen Auflösungen angezeigt wird. Und im Idealfall wird die Website auf jedem Bildschirm übersichtlich und nutzerfreundlich dargestellt und hat damit eine gute Usability. Denn überfüllte Seiten und ständiges Zoomen und Swipen, also über den Bildschirm wischen, kann die Seitenbesucher mit kleinen Endgeräten schnell vergraulen. Viele Firmen entwickeln deshalb zwei oder drei Versionen ihrer Website, eine Ansicht für Desktop-Computer und eine oder zwei für bestimmte mobile Endgeräte. Ein guter, erster Ansatz - „besser als nichts“, könnte man sagen. Aber reicht das bei der kontinuierlich wachsenden Anzahl an Mobile-Nutzern und verschiedenen Ausgabegeräten? Muss es gar nicht! Denn inzwischen haben Sie längst die Möglichkeit, Ihre Seite für alle Ausgabegeräte zu optimieren, statt nur für ausgewählte.

Responsive Webdesign, die zeitgemäße Lösung

Klar ist: Moderne Probleme erfordern moderne Lösungsansätze. Kluge Köpfe haben das erkannt und das sogenannte „Responsive Webdesign“ entwickelt. Beim Responsive Webdesign handelt es sich dabei um ein Webdesign, das flexibel auf die Größe und die Eigenschaften des abrufenden Gerätes reagiert. Responsive Webdesign nutzt den vorhandenen Platz optimal für das Webprojekt.

Wie funktioniert Responsive Webdesign?

Die Basis einer responsive gestalteten Webseite ist ein flüssiges Raster. Die Breite der Seite ist durch Prozentwerte definiert und passt sich so in Relation zur Größe des Browserfensters an. Zudem sind die einzelnen Text-Elemente, sowie die Bilder und Videos auf der Responsive-Seite flexibel und werden je nach zur Verfügung stehendem Platz größer oder kleiner angezeigt. Im CSS-Code werden außerdem Breakpoints gesetzt, die bestimmte Auflösungen definieren, an denen das Seitenlayout sich verändert. So kann zum Beispiel eingestellt werden, dass eine seitlich angezeigte Werbung automatisch unter den Haupttext springt sobald die Viewport-Breite kleiner als 500 Pixel wird. Um das für jeden Bildschirm exakt passende Seitenlayout zuzuordnen, fragen sogenannte Media-Queries den Gerätetyp, sowie die spezifischen Eigenschaften eines Gerätes ab. Zugegeben: Eine Seite im Responsive Webdesign zu entwickeln ist zeitaufwendig und aus diesem Grund auch 30 bis 40 % teurer, als eine herkömmliche Seite, aber Sie ersparen sich die Webentwicklung von Versionen, die für nur für mobile Endgeräte optimiert ist. Es ist derzeit die einzige Möglichkeit, eine Webseite für alle Besucher optimal nutzbar zu machen. Und der Mehraufwand für die Responsive-Seite beschränkt sich auf die Entwicklungs- und Einführungsphase. Für die Content-Pflege und spätere Updates und Veränderungen der Webseite ist ein Responsive Webdesign von großem Vorteil. Statt zwei oder mehr Versionen für Desktop- und Mobile-Ansichten zu pflegen, gibt es beim Responsive Webdesign nur eine URL und eine Seite, die bearbeitet werden muss. Das kann eine große Zeitersparnis bedeuten und sorgt für Einheitlichkeit und damit für den Wiedererkennungswert Ihrer Seite auf jedem Anzeigegerät.

Quelle des Artikels

Adaptive oder Responsive Webdesign? Eine berechtigte Frage – die Antwort drauf lest ihr in unserer Fortsetzung von „Das ist gar nicht responsive! Ein Guide gegen Bullshit-Bingo“.

Nach geschnitten Brot und Widescreen-Displays ist Responsive Design sicher das Beste, was Entwicklern passiert ist. Schon vor zwei Jahren habe ich versucht, in einem ausführlichem Guide Licht in die verschiedenen Lösungen zu bringen. Aber wie sieht es heute aus? Ist Adaptive Design besser als Responsive Design – oder umgekehrt? Spoiler: Die Wahrheit liegt irgendwo dazwischen.

Dabei gibt es mehr als nur die zwei oben genannten. Elastic und Fluid Design existieren zwar auch, sind aber nicht im 0815-Webdesign zu finden. Schade, denn obwohl sie aufwändiger umzusetzen sind, können Entwickler eine ganz andere – und vielleicht bessere – UX gestalten.

Adaptive vs. Responsive: Wo liegen die Unterschiede?

Aber wieder zurück zur Frage, welcher Ansatz besser ist: Der Hauptunterschied ist, dass im adaptiven Ansatz via Breakpoints versucht wird, ein an ein spezielles Gerät angepasstes Design auszuliefern. Dabei wird das Gerät auf Seiten von CSS durch die Auflösung erkannt. Darüber hinaus gibt es noch andere Möglichkeiten, zum Beispiel über den Browser-Agent, das Gerät zu erkennen.

Dieser Artikel dreht sich aber um die zwei Ansätze und nicht darum, wie sie implementiert werden können. Design löst Probleme – und auf die kommt es entsprechend an bei der Frage, für welchen Ansatz man sich als Entwickler entscheidet.

Quelle des Artikels