Ist Ihr Webdesign responsive?
Im übertragenden Sinne bedeutet Responsive-Webdesign „reagierendes Webdesign“. Eine Website, die responsive reagiert, passt sich automatisch an die Auflösung des Ausgabegerätes an, ohne dass Inhalte verschwinden oder nicht mehr lesbar sind. Dank der flexiblen Anpassung ist die einheitliche Anzeige der Webauftritte sowie gleichbleibende Benutzerfreundlichkeit gewährleistet. Die reagierende Website folgt also dem Nutzer, und nicht wie noch allzu oft, der Nutzer dem starren Layout der Adaptives-Website.
Warum empfehlen wir das Responsive-Webdesign?
Der Umfang der Internetnutzung wächst. Deshalb ist eine einwandfreie Kommunikation im Netz immer mehr gefragt. Unternehmen und Website-Betreiber dürfen die Bedürfnisse des mobilen Nutzers nicht außer Acht lassen. Wer zufriedene Website-Besucher haben möchte, muss eine geräteunabhängige Kommunikation und damit Responsive-Webdesign anbieten. Die Tendenz, dass mobile Geräte den Desktop-Rechner ablösen, steigt stetig an. Hauptsächlich nutzen mobile Nutzer das Surfen unterwegs, um schnell und in Kürze Informationen abzurufen. Der Anspruch der User, von überall ins Internet zu gehen, wächst und damit gleichermaßen die Erwartungen an funktionierende Webseiten, egal wie, wo und wann.
Wie funktioniert Response-Webdesign?
Im Printbereich werden die Proportionen der einzelnen Elemente anhand eines Gestaltungsrasters abgestimmt. Im Responsive-Webdesign fehlt uns leider die festgelegte Begrenzung des Layouts, wie beispielsweise bei einem Plakat. Bisher haben Webdesigner auf eine imaginäre Seite mit fixer Breite und Höhe, welche den gängigen Monitorgrößen angepasst waren, zurückgegriffen. Ein fixer Container, welcher mittig im Browserfenster platziert wurde. Bei einem 13-spaltigen Grid, dessen Spalten 60 Pixel breit sind und jeweils einen Abstand von 30 Pixeln besitzen, zuzüglich des Randabstandes entspricht dies einer Gesamtbreite von 1080 Pixel. Die einzelnen Pixelangaben müssen in Relation zueinander gesetzt werden, um sich von starren Dimensionen zu lösen.
Die dafür eingesetzte Formel setzt sich wie folgt zusammen:
Zielgröße / Kontext * 100 = gesuchter Prozentwert
In unserem Beispiel bedeutet das: 600px / 1080px * 100 = 55, 55555556
Da Internetseiten teilweise mit einem kleineren Browserfenster geöffnet werden (unter 1080 Pixel), muss die festgesetzte Größe gelöst von einer festen Breitenangabe sein. Dies kann mit Hilfe der Funktion max-width gelöst werden.
Schrift
Dementsprechend müssen die Schriftgrößen im Verhältnis zueinander stehen, um eine flexible Seite zu erstellen. Dabei wird die Schrift in „em“ (Maßeinheit im Schriftsatz) umgerechnet, da die Pixel keine feste Größe besitzen, bzw. bei Abmessungen variieren.
Falls zum Beispiel eine Schrift in Größe von 15 Pixel verwendet wurde (wir gehen von der voreingestellten Standartschriftgröße von 16 Pixel aus), muss dieser Wert wieder in Verhältnis gesetzt werden.
15 / 16 * 100 = 93,75%
Im Body wird dieser Wert angegeben und alle weiteren Schriftangaben beziehen sich darauf und werden in em angegeben. Em wurde somit definiert und 1em entspricht in diesem Fall 15 Pixel. Alle weiteren Texte müssen daher wieder mit Hilfe einer Formel in Relation gesetzt werden. Wenn die Überschrift h1, also 30 Pixel groß sein soll muss diese in em umgerechnet werden (30px / 15px = 2em).
Mit dieser Vorgehensweise werden auch die restlichen Elementen angepasst.
Bilder
Üblicherweise werden Bilder in ihrer vollen Größe dargestellt. Um Bilder flexibel an das Design anzupassen, wird in der CSS-Eigenschaft max-width verwendet. Wird die Seitenleiste minimiert, verkleinert sich das Bild automatisch proportional. Wenn aber in der HTML eine Breite und Höhe definiert worden ist, ist eine Ergänzung der CSS notwendig, damit das Bild nicht verzerrt wird. Zur Eigenschaft max-width wird noch height:auto hinzugefügt. Damit wird eine Verzerrung umgangen und das Bild wird proportional in Höhe und Breite verkleinert oder vergrößert. Diese Methode wird hauptsächlich bei Bildern, die sich in der Seitenleiste befinden, verwendet. Hat ein Bild jedoch seinen Platz in der Hauptspalte, wird eine andere Methode verwendet, um das Bild reaktionsfähig zu machen. Dabei wird das Bild in Bezug zur Breite der Hauptspalte gesetzt.
Bildbreite / Hauptspalte * 100 = Prozentwert
Videos
Videos können ohne Probleme mit der Option max-width: 100% angewandt werden, insofern es sich um einen intern eingebundenen Medientyp handelt. Bei Videos, die über iframe von Youtube zum Beispiel eingebunden werden, funktioniert diese Methode leider nicht. Dazu ist JavaScript und ein Plug wie jQuery notwendig.
Mobile
Nicht reaktionsfähige Webseiten werden automatisch auf eine definierte Breite gerändert (z. B. iPhone 980 Pixel) und auf die zur Verfügung stehenden Breite verkleinert (z. B. iPhone 320 Pixel). Um diese Funktion zu umgehen, gibt es die Möglichkeit, die Wiedergabe (engl. Rendering) auf die Breite des Gerätes anzupassen.
CSS3 Mediaqueries
Aufgrund der vielen, verschiedenen Displaygrößen reicht ein flexibles Design mit den bisher angewandten Funktionen oft nicht aus. Der Inhalt muss sich an bestimmten Stellen neuen Umbrüchen und Anordnungen anpassen. Umbruchpunkte werden mit Hilfe von Medienabfragen (Mediaqueries) definiert. Diese Methode wurde bereits bei CSS2 Modulen verwendet, indem zwischen Bildschirm- und Druckformaten unterschieden wird. „Als Medienabfrage wird eine Liste von Kriterien bezeichnet, die ein Ausgabemedium erfüllen muss, damit ein Stylesheet zur Verarbeitung eingebunden wird.“
Reagiert Ihr Web-Layout responsive? Testen Sie hier: http://responsivepx.com/