Responsive Webdesign - Wie es funktioniert

Immer mehr Webseiten werden durch mobile Geräte betrachtet, von unterwegs über das Smartphone oder über Phablets, zuhause auf dem Sofa mit Tablets oder Netbooks. Dabei ist das Prinzip "Eine Webseite für alle Ansichten" bereits veraltet - weil es an Grenzen stößt. 

Nicht optimierte Webseiten müssen auf kleinen Displays sowohl horizontal als auch vertikal gescrollt werden und in die Seite hinein gezoomt werden, damit der Inhalt groß genug angezeigt wird. Hier eine schmatische Darstellung mit den verschiedenen Displaygrößen über die Desktop-Ansicht der Webseite rp-network.de gelegt.

Zeigt die verschiedenen Anzeigearten über die Desktop Ansicht der Webseite von rp-network.de gelegt
Zeigt die verschiedenen Anzeigearten über die Desktop Ansicht der Webseite von rp-network.de gelegt

Heutige Webseiten müssen dem gerecht werden und auch mobilen Geräten, mit einer kleineren Displaygröße, ein entsprechendes Surferlebnis bieten. Dafür bietet sich das Responsive Webdesign an. Es werden in der CSS (Cascading Stylesheets, dem Schema für das Design) für festgelegte Displaygrößen verschiedene Ansichten bereit gestellt. Der Browser vergleicht letztendlich die vorhandene Displaygröße und lädt dann die empfohlene Ansicht der Webseite automtatisch. 

Zeigt die Webseite rp-network.de in einer Collage von verschiedenen Geräten, Smartphone, Tablet, Notebook und PC an
rp-network.de - Verschiedene Ansichten des Responsive Webdesign

Einteilung der Ansichten

Optimierte Webseiten, die mit der sog. Responsive Webdesign Technik erstellt wurden, sind für nahezu alle Geräteklassen angepasst. Dabei werden die Displays in die zur Verfügung stehende Anzahl von Pixeln in der Breite eingeteilt. 

Smartphones: 320px bis 480px
Tablets: 768px bis 979px
Computer-Desktop: 1200px+

Zusätzlich kommen noch die Hochkant-Ansichten bei Smartphones und Tablets hinzu: 

Smartphones Hochkant: 481px bis 767px
Tablets Hochkant 980px bis 1199px

Auswirkungen auf die Darstellung

Tablet Ansicht im Querformat

Die Tablet Ansicht im Querformat entspricht nahezu der Desktop Ansicht, alle Inhalte werden identisch dargestellt, lediglich evtl. vorhandener Hintergrund an den Seiten wird beschnitten, um den Inhalt formatfüllend darstellen zu können. 

Tablet Ansicht im Hochkantformat

Im Hochkantformat der Tabletansicht wird meist bereits der Bilderbanner, also der Header, angepasst, da er nicht vollständig angezeigt werden kann. Hierzu wird ein responsives Hintergrundbild geladen, dass bei kleineren Displays vollständig dargestellt werden kann. Auf die Darstellung des Headerbildes der Desktop-Ansicht wird meist verzichtet. 

Der Inhalt wird meist auf zwei Blöcke verteilt, um ein horizontales Scrollen zu unterbinden und die Seite nur vertikal, also den Inhalt untereinander zu präsentieren. Dabei werden die Blöcke wie vertikales Menü, Inhaltsbereich, zusätzliche Funktionsboxen und Fußzeilen neu arrangiert. 

Das Hauptmenü wird in einen Touchbutton zusammengefasst, um die Länge der Seite und damit unnötiges Scrollen nach unten zu minimieren. 

Smartphone Ansicht im Querformat

Bei der Smartphone Ansicht im Querformat schrumpft die zur Verfügung stehende Breite abermals, das responsive Headerbild ist bereits dafür angepasst. Lediglich der Inhalt wird auf nur noch einen Block zur Darstellung reduziert, sprich alle Bereiche werden untereinander dargestellt. 

Smartphone Ansicht im Hochkantformat

Schließlich ist die letzte Stufe die Ansicht für Smartphones im Hochkantformat, das Responsive Headerbild ist auch für diese Ansicht angepasst, der Inhaltsblock wird nur noch in der Breite verringert. 

Probleme bei anzupassenden statischen Designs

Einfache Webseiten sind auch am einfachsten in ein responsives Design zu überführen. Meistens wurde aber bei Webseiten, die bereits lange online sind und "gewachsen" sind, Inhalte gestylt, anstatt sich an der strikten Trennung von Inhalt und Design zu halten. Immer dann wird es etwas umfangreicher, da Designelemente aus den Texten entfernt werden müssen, um eine reibungslose Darstellung der verschiedenen Ansichten ermöglichen zu können.