Wie funktioniert Responsive Web Design?

By 00

Sie haben Ihr eigenes Business, sind hauptsächlich rund um den Erdball unterwegs, sind mit Smartphone und iPad ausgestattet und möchten sich eigentlich von ausgedruckten Katalogen und Flyern für immer verabschieden? Dann gehören Sie wahrscheinlich zu denjenigen, die mit dem Begriff Responsive Web Design bereits Einiges anfangen können. Nein? Gut, dann finden Sie hier ein paar Anhaltspunkte zu diesem relativ neuen Designkonzept.

Was ist Responsive Web Design?

Unter Responsive Design versteht man eine Technik, die sich an verschiedene Bildformate anpasst und daher ideal für Smartphones und iPad geeignet ist. Die Inhalte bleiben in jedem Falle gut lesbar. Wo es bei vielen Anwendungen bisher haperte, scheint diese Technik nun die Lösung zu sein. Responsive Web Design stützt sich auf CSS. Die CSS-Dateien werden dabei so angelegt, dass das Layout einer Website flexibel bleibt und daher auch auf kleinen Geräten erscheinen, ohne dass Elemente fehlen oder abgeschnitten sind. Und Texte können auf diese Weise auch gelesen werden, wo vorher eine Zoom-Funktion helfen musste.

Doch wie funktioniert das?

Diese Technik besteht aus drei Elementen, die auf dem Prinzip der Fluidität beruhen. Deshalb heißt eines der Merkmale auch Fluid Grid. So besitzt die Spalte eines Layouts beispielsweise keinen Fixwert, in Pixel gerechnet, sondern ihr wird ein Zwischenwert bzw. Prozentsatz zugeordnet.

Um bei dem Thema der Flüssigkeit zu bleiben, hat auch ein weiteres Merkmal seinen Namen davon getragen und nennt sich Fluid Images. Darunter ist zu verstehen, dass auch das Wiedergeben von Bildern sehr individuell gesteuert werden kann. Und dies ist einer der Hauptpunkte: Möchte man mit seinem eigenen Laptop oder iPad Bilder, etwa bei einer Präsentation möglich groß und farbenfroh visualisieren können, so sind sie auf dem Smartphone eher ein lästiges Extra. Das hängt damit zusammen, dass das Hochladen von Bildern sehr zeitaufwendig ist und unter Umständen daher auch kostenaufwendig sein kann. So kann man mit dem Prinzip der Fluid Images darauf getrost verzichten und Bilder, wenn überhaupt, in minimaler Größe in schwarz-weiß visualisieren.

Zu guter Letzt gibt es dann noch die sogenannten Media Queries, eine Art von Detektor, der ausfindig machen kann, von welchem Gerät aus die Information gerade aufgerufen wird und darauf mit dem passenden Profil antwortet. Soviel zum Aufbau des Responsive Webdesign in Kurzversion. Die Frage, die sich mit Sicherheit Vielen dabei stellen wird, ist:

Funktioniert das denn alles wirklich so reibungslos?

Die Antwort lautet: leider nein. Wie jede innovative Technik hat auch diese mit anfänglichen Schwierigkeiten zu kämpfen. Bleiben wir beim Thema Smartphone. Auf der einen Seite wird versucht, es diesem Gerät zu ersparen, für ihn schwierige oder unbrauchbare Daten hochzuladen. Paradoxerweise ist jedoch gerade die Ladezeit eines der Hauptprobleme dieser Methode. Denn wenn auch die auf dem Display nicht zu erscheinenden Elemente per Anweisung ausgeblendet werden, werden sie trotzdem als sogenannte Hintergrunddaten hochgeladen. Und so hat man sich vielleicht vor halberscheinenden, abgehackten Bildern geschützt, wartet aber im Endeffekt genauso lange.

Die Antwort darauf: Mobile First. Die Revolution bei dieser Methode steckt in der Konzipierung und die hat im wahrsten Sinne des Wortes alles auf den Kopf gestellt und fängt daher beim kleinsten Element an: dem Smartphone. Wie gut sich diese Technik durchsetzt wird sich zeigen. Seien Sie gespannt!

 

Haftungsausschluss: Wir bemühen uns sehr, Ihnen wertvolle und zuverlässige Informationen über alle von uns bewerteten Produkte und Dienstleistungen anzubieten. Um Ihnen diese kostenlose Dienstleistung zur Verfügung zu stellen, verwenden wir auf unseren Seiten Links, über die wir Provisionen für Ihre Weiterleitung auf die Webseite des Verkäufers erhalten. Wir garantieren, dass dies keinen Einfluss auf die von uns gezeigten Inhalte und das präsentierte Material hat, jedoch die Positionierung auf unserer Seite beeinflusst und nur unsere Bemühungen unterstützt, Ihnen die bestmöglichen und relevantesten Informationen zugänglich zu machen.

Offenlegung von Werbeanzeigen

Bei dieser Seite handelt es sich um eine kostenlose Online-Ressource, die sich bemüht, ihren Besuchern hilfreiche Inhalte und Vergleichsfunktionen anzubieten. Bitte beachten Sie, dass der Betreiber dieser Website Werbevergütungen von Unternehmen akzeptiert, damit diese auf der Website erscheinen, und dass sich diese Vergütung auf den Ort und die Reihenfolge, in der die Unternehmen (und/oder ihre Produkte) präsentiert werden, und in einigen Fällen auch auf die jeweils angegebene Bewertung auswirken kann. Soweit Bewertungen auf dieser Website erscheinen, wurden diese durch unsere subjektive Meinung bestimmt und basieren auf einer Methodik, die eine Analyse des Marktanteils der Marke, der Reputation, der Konversionsraten jeder Marke, die an uns gezahlte Vergütung und das allgemeine Verbraucherinteresse zusammenfasst. Firmeneinträge auf dieser Seite implizieren KEINE Empfehlungen. Sofern nicht ausdrücklich in unseren Nutzungsbedingungen angegeben, werden alle Zusicherungen und Gewährleistungen bezüglich der auf dieser Seite dargestellten Informationen ausgeschlossen. Die Informationen, einschließlich der Preise, die auf dieser Website erscheinen, können sich jederzeit ändern.

Verstanden

Vor dem Kauf vergleichen