Responsive Webdesign
Statisch, dieses Wort trifft auf das Internet schon lange nicht mehr zu. Damit man sich mit diesem Wort identifizieren kann, muss man in die Zeit der Linienbrowser und ersten Homeboxen zurückkehren. Heute ist das Internet dynamisch und voller Innovation. So wurde zurecht der Ausdruck WEB 2.0 geprägt. Doch diese enorme Flexibilität und die Anzahl der Endgeräte, auf welchem die Seiten angezeigt werden können, bringen einige wesentliche Veränderungen mit sich. Seiten können nicht mehr in einem Format gehalten werden, sondern müssen sich, wie ein Chamäleon im Urwald, den Umständen anpassen können.
Die Lösung - Responsive Webdesign
Viele Web-Entwickler haben bereits davon gehört oder behaupten dies zumindest. Für die User erschließt sich die Bedeutung nicht gleich auf den ersten Blick. Dabei steckt hinter dem Terminus Responsive Webdesign nicht mehr und nicht weniger als die Zukunft des Internets. Einfach ausgedrückt, bezeichnen diese zwei Worte, die Fähigkeit einer Webseite, sich dynamisch an die Auflösung und die Benutzeroberfläche des jeweiligen Endgerätes anzupassen.
Was nun so klingt als sei diese Idee erst vor Kurzem entstanden, hat aber schon eine lange Geschichte. Schon mit der Entwicklung des allerersten WAP-fähigen Handys, wurden die Techniker und Webdesigner vor ein immenses Problem gestellt. Es war klar, dass sich eine Website niemals vollständig auf einem Display dieser Größe, würde anzeigen lassen. Die ersten Ansätze tendierten also in die Richtung, zwei verschiedene Seiten zu konzipieren. Eine für den normalen Gebrauch mit dem PC, und eine, welche speziell für Handys geschaffen wurde.
Allerdings handelte es sich dabei meist um sehr abgespeckte Varianten des Originals, welche auch nur einen begrenzten Funktionsumfang boten. Die Datenfülle einer Homepage, wie sie zum Beispiel auf dem Monitor eines Computers angezeigt wurde, konnte so nicht erreicht werden. Lange Zeit konnte keine befriedigende Lösung gefunden werden. Dabei entwickelte sich die Technologie weiter und aus den Handys von einst, wurden die Smartphones von heute. Nun gab es gewaltige Displays, welche zudem auch noch mit einem Touchscreen versehen waren.
Die Grundlagen
Zum ersten Mal wurde der Begriff des Responsive Webdesign von Ethan Marcotte im Jahre 2010 verwendet. Er entlieh sich diese Bezeichnung aus der Architektur, wo sie für eine Bauweise steht, welche sich der Umgebung anpasst und praktisch die Gebäude und die Natur ineinander übergehen lässt. Von diesem Tag an, war ein neues Kapitel des Internets aufgeschlagen worden.
Die Technik wird über sogenannte Stylesheets realisiert. Dies hat nichts mit Frisuren zu tun, sondern bezeichnet lediglich das Aussehen der Webseite. Im Grunde kann man sich diesen Prozess so vorstellen:
Es wird einmalig eine Website entworfen. Diese wird über die Stylesheets, bei welchen es sich um eine CSS-Datei handelt, an die jeweilige Größe des Displays angepasst. So sind hier alle Auflösungen hinterlegt, aus denen die Webseite am Ende wählen kann.
Dabei ist das Prinzip der Media Queries unerlässlich. Bei diesem handelt es sich um ein CSS3-Konzept, welches erlaubt, dass die Seite auf die Eigenschaften des Ausgabegerätes Zugriff nehmen kann. So sind die wesentlichen Kriterien die Größe des Gerätes, die Bildschirmauflösung, die Art der Dateneingabe und natürlich ob es sich um ein Hoch- oder Querformat handelt. Auf Basis dieser Daten wird dann der entsprechende Stylesheet geladen.
Im reinen CSS, werden Media Queries in den meisten Fällen direkt in das Stylesheet integriert. So geben diese die maximale Breite und Höhe des Endgerätes an. Dies hat den Vorteil, dass die jeweiligen Regeln nur dann angewendet werden, wenn das Gerät, bestimmte Bedingungen erfüllt. So kann es auch nicht zu Fehlern beim Laden der Webseite auf anderen Systemen kommen. Übrigens unterstützt HTML5 diese Funktion von Haus aus.
Der Trick mit den Grids
Grids sind keine kleinen Monster, welche sich im Internet tummeln. Bei Grids handelt es sich um die Struktur einer Webseite. Normalerweise verfügt diese über vier davon, welche für eine Auflösung von 1024 x 768 optimiert sind. Für kleinere Displays ist dies allerdings bereits viel zu groß. Die Seite kann nicht mehr in einem akzeptablen Format dargestellt werden.
So ist der erste Schritt bei Responsive Webdesign, auf diese festen Layouts zu verzichten. Hierbei wird die kleinste mögliche Anzeigeform zuerst bedacht und erst dann arbeitet man sich zu den größeren Varianten vor. So werden nur noch prozentuale Angaben für die Größe eines Bildes oder eines Elements verwendet, anstatt, wie früher üblich, feste Pixel-Maße.
An zweiter Stelle wird auf feste Schriftgrößen verzichtet. Hier ist schon etwas Fingerspitzengefühl von Nöten, da Schrift ein wenig spezieller ist. In den meisten Fällen greift man auch auf prozentuale Angaben zurück. Allerdings können auch Plug-ins auf JAVA-Basis verwendet werden, welche die Schriftgröße automatisch skalieren.
Als dritter Punkt müssen die Bilder angepasst werden. Dies ist der schwierigste Schritt. Bilder haben einen festen Inhalt, welcher mit einer bestimmten Auflösung aufgenommen wurde. Verändert man die Auflösung, kann die Qualität sehr darunter leiden. Allerdings kann man hier im einfachsten Fall auch auf Plug-ins zurückgreifen oder man verwendet Adaptive Images. Solche Bilder liegen bereits vorher in verschiedenen Größen vor, so dass einfach nur das, für das Endgerät passende Format geladen werden muss.
Responsive Webdesign hat nur Vorteile
Diese Art des Designs bietet Vorteile sowohl für die Entwickler als auch für die Nutzer. Ein Entwickler hat es bei der Pflege einer Seite sehr viel leichter, da er sich nicht um zwei oder drei unterschiedliche Varianten kümmern muss. Einmal ausgetauschte oder aktualisierte Informationen, gelten für alle Geräte. Zudem bietet diese Dynamik die Option, dass man Inhalte für die Nutzer der verschiedensten Systeme bereitstellen kann und sich nicht auf ein Klientel festlegen muss.
Der Nutzer kann von einer solchen Seite, das erwarten, was er im modernen Internet gewohnt ist. Alle Informationen und Funktionen sind vollständig vorhanden und nutzbar. Da auch die Bedienelemente entsprechend angepasst werden, lassen sich solche Seiten auch mit einem Touch-Display souverän bedienen.
Gerade Onlineshops oder Seiten mit sehr viel Inhalt profitieren von dieser Entwicklung. Sie sind auch in der mobilen Version übersichtlich und bieten dem User genau das, was er sucht. Durch die Implantierung von allen Standards, welche heute im Netz verfügbar sind, kann man diese Seiten genauso nutzen, als würde man am heimischen PC sitzen. Übrigens gehen einige Videoportale bereits diesen Schritt und arbeiten nun mit der Technologie des Responsive Webdesign.
Was die Zukunft uns bringt
Das Internet ist wie eingangs erwähnt kein statisches Gebilde. So gibt es nicht das Internet für Smartphones oder Tablets, sondern nur DAS Internet. Gerade für Firmen ist es wichtig den Anschluss in dieser Entwicklung nicht zu verpassen, denn der Nutzen und die Möglichkeiten sind unübersehbar. So kann man seinen Kunden einen Rundum-Service auf den unterschiedlichsten Geräten bieten, welcher ansonsten nicht möglich wäre.
Übrigens hat Responsive Webdesign einen interessanten Nebeneffekt. Man gewinnt Platz. Wenn man sich daran hält und die Struktur einer Webseite von klein nach groß aufbaut, kann man auf den größeren Bildschirmen, den zusätzlich entstehenden Raum, für weitere Inhalte nutzen.
Responsive Webdesign ist die Zukunft und wird sich etablieren, denn die mobilen Geräte werden mit Sicherheit nicht mehr aus unserem Leben verschwinden. Im Gegenteil, die Welt wird nur noch vernetzter.