Responsive Webdesign bzw. Responsive Design

Als Responsive Design wird die Programmierung und das Design einer Webseite bezeichnet, die ihre Darstellungsweise automatisch auf die Größe des Bildschirms anpasst, von dessem Gerät sie aufgerufen wurde.

Geschichte der Darstellung der Webseiten

In den ersten Jahren des World Wide Web waren alle Empfangsgeräte und ihre Bildschirme ähnlich groß. Das änderte sich jedoch stark, als dann Tablets und Smartphones auf den Markt kamen. Die Bildschirme wurden erheblich kleiner und die Auflösung veränderte sich entsprechend. Die Auflösung bedeutet, wie viele Pixel also Bildpunkte sich auf einer Bildschirmseite darstellen lassen. Inzwischen hat sich die Zahl der Smartphones gewaltig erhöht, so gibt es in Deutschland inzwischen wesentlich mehr Mobile Phones als Einwohner. Auch der Anteil der Besuche im WWW, der von Mobile Phones ausgeht, hat die der PC-User längst überschritten.

Früher wurden die Webseiten mit sogenannten statischen Grids aufgebaut. Diese Raster entschieden darüber, wo Elemente hingesetzt wurden und wie viele Pixel für ihre Darstellung verwendet werden sollten. Das galt nicht nur für die Bilder, sondern z.B. auch für die Schriften. Mit solch einer heute antiquiert wirkenden Webseite ist man beim Aufruf mit dem Mobile Phone oder Tablet gezwungen, ständig die Webseite zu verschieben, wenn man auch nur einen Satz lesen oder ein Bild erkennen will. Eine unhaltbare Situation. Daher hieß die erste Antwort darauf, von vielen Webseiten zwei Versionen zu erstellen, die für kleine oder für große Bildschirme funktionierten. Dieser Aufwand war jedoch sehr zeit- und kostenaufwendig.

Die Entwicklung des Responsive Designs

Inzwischen hat sich daher die Technik der relativen Größe flexibler Grids bei der Programmierung durchgesetzt. Diese arbeiten mit prozentualen Werten zur Größe des abzubildenden Inhalts. Dabei sind gewisse Grenzwerte einzuhalten. Werden diese Breakpoints unterschritten, wird auch ein neues Layout angewendet, um den Inhalt nutzerfreundlich abbilden zu können. Das neue Layout gilt dann z.B. für die Seitennavigation, die ihre Position auf dem Bildschirm z.B. von der Seite an die Spitze ändert. Die weiteren Layout-Änderungen werden nach der Rangreihe der Wichtigkeit des Contents festgelegt. Dabei wird der Viewport berücksichtigt. Der Viewport ist der Bereich des Browserfensters, der für die Darstellung von Inhalten zur Verfügung steht.

In den Code der Webseite sind sogenannte Media Queries eingebaut. Diese ermitteln bei Aufruf die Größe und Auflösung des Bildschirms des aufrufenden Geräts und geben die Daten zur Berechnung und ggf. Änderung des Viewports weiter. Moderne Content Management Systeme berücksichtigen nicht nur automatisch die Bedingungen für das Responsive Design, sondern stellen dem Nutzer schon während des Aufbaus der Seiten typische Viewports für PC, Tablet und Handy zur Ansicht des Entwurfs Verfügung.

Google und das Responsive Design

Mittlerweile hat sich nicht nur das Verhalten der User beim Besuch des Internets hin zu Smartphones bewegt, sondern auch das Kaufverhalten. Ein Großteil von geschäftlichen Transaktionen wird heute über das Internet eingeleitet und ein Großteil dieser Aktionen läuft dabei über die Mobiltelefone. Google hat daher bereits seit 2015 reagiert. Mit dem Leitsatz “Mobile First” wird eine Initiative bei Google bezeichnet, die Webseiten mit Responsive Design automatisch besser rankt als vergleichbare Webseiten ohne diese Fähigkeit. Dabei betont Google das Gewicht der User-Experience also des positiven Erlebens, das die Nutzer einer Webseite haben sollen. In der Bewertung von Google steht die User Experience auf dem gleichen Rang wie der informationelle Mehrwert, den Nutzer mit dem Besuch einer Webseite erzielen. Der entsprechende Leitsatz dazu heißt “Content is King”. Jedoch ist die Ankündigung, dass nur noch Webseiten mit Responsive Design überhaupt in den Suchindex aufgenommen werden, inzwischen auf unbestimmte Zeit verschoben worden. Als Grund wird der Fakt vermutet, dass viele Webseiten mit hohem Wert bzw. großer Bedeutung für die Nutzer gar nicht auf eine so geringe Größe angepasst werden können, ohne dass die Inhalte ihren Sinn verlieren.

Wer jedoch eine Webseite publiziert, die erstens Einnahmen oder anderweitige Vorteile generieren und zweitens in den Suchergebnissen bei Google erfolgreich ranken soll, kommt um ein Responsive Design keinesfalls herum.