Responsive Webdesign - was ist das eigentlich?

Alles, was man über das neue Responsive Webdesign wissen muss!

Web, IT und Technik
auf pixel-agentur.de

Responsive Webdesign - ein Webdesign für alle internetfähigen Endgeräte

Die Auswahl an Geräten, die eine Internetbenutzung erlauben, hat sich in den letzten Jahren stark erweitert. Bis vor Kurzem mussten Publisher deshalb mehrere Templates wählen, wollten sie ihren Online Shop oder das Ratgeberportal für alle Endgeräte zugänglich machen. Responsive Webdesign ermöglicht mit einem Template eine vernünftige Ansicht und Funktion auf allen Geräten.

User auf dem Laufenden halten, wo auch immer sie sich aufhalten

Um einem User den größtmöglichen Komfort zu gewährleisten, muss eine Website auf die Geräte PC-Desktop, Smartphone, iPad, e-Reader und Tablet zugeschnitten sein. Der Internetnutzer von heute erwartet, dass die Seiten, auf denen er bestellt oder sich informiert, von ihm dort abgerufen werden können, wo er sich gerade befindet. Ganz gleich, ob dies das Wohnzimmer, die Bahn, das Freibad oder das Büro ist. Unabhängigkeit heißt hier das höchste Gebot. Responsive Design passt sich nach entsprechender Programmierung des Templates all diesen Endgeräten automatisch an. Selbst die fließende Anpassung zwischen den Breakpoints ist möglich. Dabei ist es gleichgültig, wer die Geräte herstellt oder welches Betriebssystem verwandt wird. Hier zeigt sich der Vorteil gegenüber, zum Beispiel, einer App. Jene ist auf das jeweilige Betriebssystem zugeschnitten und muss laufend angepasst werden. Auch der finanzielle Aufwand eine Responsive Webdesign zu erstellen ist, auf Dauer, meist geringer, im Gegensatz zum ständigen Anpassen einer App an die aktuellen Betriebssysteme.

Die Technik, die dahinter steckt

Der Begriff "Responsive Webdesign" wurde von Ethan Marcotte geprägt, der ihn erstmals 2010, in Anlehnung an die responsive Architektur, gebrauchte. Im Grunde bedeutet er nichts weiter, als dass das Design einer Website mit Geräten - und damit dem User - kommuniziert. Beim Responsive Webdesign dreht sich alles um die technische sowie grafische Anpassung an Größe und Auflösung unterschiedlicher Endgeräte. Besonderer Wert wird dabei auf die Darstellung einzelner Bausteine der Site, wie Text und Navigation gelegt. Zudem wird die Navigation den Voraussetzungen angepasst. So arbeitet das eine Gerät beispielsweise mit Maus, ein anderes verfügt über ein Touchscreen und ein drittes arbeitet mit Sprache. Diese Anpassungen sollen der Benutzerfreundlichkeit dienen. Um eine Website dergestalt programmieren zu können, bedarf es aktueller Webstandards. Jene sind Javascript, CSS3 und HTML5. Media Queries werden oft via CSS in die Stylesheets eingebettet. Allerdings akzeptiert nicht jeder Browser die Queries. Gerade die älteren, die auf IE6 bis IE8 basieren, haben das so ihre Schwierigkeiten. Dann werden sogenannte Polyfills benötigt. Vor der Programmierung steht der Plan. Was genau soll wie umgesetzt werden? Zumeist genügt es, wenn die Website kompatibel mit den drei gängigsten Größen, beziehungsweise Auflösungen ist. Jene sind:

Desktop: mindestens 1024 Pixel
Smartphone: 320 Pixel bis 480 Pixel
Tablets: 768 Pixel bis 1024 Pixel

Dann geht es nur noch um die Anpassung der Eingabemöglichkeiten (Tastatur, Maus, Touch, Sprache) und darum, ob die Seite im Hoch- oder Querformat erscheinen soll. Auch die Bandbreite und eine, unter Umständen, begrenztes Datenvolumen bei den entsprechenden Endgeräten wollen berücksichtigt sein. Nach der Programmierung ist es sinnvoll, das Ergebnis auf dem jeweiligen Gerät zu testen.

Mobile Websites vs. Responsive Design

Nun mag die Frage aufkommen, warum man es nicht einfach bei der Verwendung von mobilen Websites belassen sollte. Die haben sich schließlich über Jahre bewährt. Hier kommt es darauf an, welchen Zweck der Betreiber einer Internetseite verfolgt. Wie schon erwähnt, bietet Responsive Webdesign den Vorteil, alle Geräte über nur ein Template zu bedienen, während bei "mobilen Versionen" immer mindestens zwei erstellt werden müssen. Das bedeutet, dass jeglicher Inhalt auch mindestens zweimal eingepflegt werden muss. Nun kann eine bestehende Website bei der Einrichtung eines responsiven Designs nicht einfach umprogrammiert werden. Ein vollständiger Relaunch sämtlicher, bisher angewandter, Templates ist von Nöten. Zwar ist der anfängliche Aufwand bei der Einrichtung eines responsiven Designs höher, wohl ebenso der finanzielle. Es muss sich aber jeder selbst die Frage beantworten, ob dies nicht durch die durchgängige Bestückung mehrerer Templates wettgemacht wird. Bei der Auffindbarkeit über Suchmaschinen hat ein Template, das alle Formate bedient, selbstverständlich die Nase vorn. Es gilt also für jeden Publisher abzuwägen, welches System ihm die meisten Vorteile bietet.

Gängige Kritik am Responsive Webdesign

Kritiker des Responsive Webdesign bemängeln, dass die Navigation zu viel Platz einnimmt und manchmal Banner, die eigentlich Inpage angelegt sind, am unteren Rand dauerhaft auftauchen. Außerdem muss, zum Überspringen nicht interessierender Inhalte meist viel gescrollt werden. Ein Umstand, der statt Userfreundlichkeit zu Unübersichtlichkeit führt. In Sachen Banner soll es weiterhin vorkommen, dass die Klicks, die auf diese Weise generiert werden, nicht abgerechnet werden können, weil die Zahlung auf Inpage ausgerichtet wurde. Des Weiteren haben Responsive Webdesigns eine minimal längere Ladezeit, was den verwöhnten Nutzer verärgern könnte. Die meisten dieser "Mängel" sind bei sorgfältiger Planung und Programmierung jedoch behebbar.

Web- & eBiz-Tipps

Agentur für professionelles B2B Marketing aus München.

Kreative Design Agentur für anspruchsvolles Logodesign und Webdesign für mittelständische Firmen.

Digitales Internetangebot, um Betriebsrat-Seminare 2024 direkt online zu buchen.

______________________________