Blog

 Logo

Responsive Design

Responsive Webdesign

Responsive Design bedeutet, dass eine Internetseite je nach Bildschirmgröße anders dargestellt wird. Dieses Format ist unabhängig davon, welches Gerät verwendet wird, damit Benutzer die Website problemlos nutzen können. Responsive Webdesign mit Viewport-Spezifikationen ist heute der Standard für die mobile Optimierung. In der Regel wird der Ansatz von „mobile first“ oder Progressive Enhancement verwendet.

Seitdem Apple 2007 das iPhone auf den Markt gebracht hat, ist die Zahl der mobilen Endgeräte mit Touchscreen immer weiter gestiegen. Auch die Zahl der Internetnutzer, die über Smartphones auf das Internet zugreifen steigt seitdem stetig an. Damit User die Website optimal nutzen können, wird das Responsive Design verwendet. Responsive Design ist dazu da, um die Website für so viele Benutzergruppen wie möglich zugänglich zu machen.

Mobile Freundlichkeit

Die mobile Freundlichkeit ist seit dem 21. April 2015 ein Rankingfaktor für Google. Spätestens ab diesem Zeitpunkt hat sich das Responsive Design zur „neusten Technologie“ für Webmaster und SEO entwickelt. Denn dieses Design sorgt dafür, dass mobile Besucher die Website bequem auf ihrem Smartphone nutzen können. Gleichzeitig ist Responsive Design meist eine Variante, die im Vergleich zu anderen Möglichkeiten der mobilen Optimierung einen minimalen technischen und kreativen Aufwand benötigt.

Das Responsive Design wird mit HTML5 und CSS3 umgesetzt. Hier werden Medienanfragen bereitgestellt, über die Informationen von Endgeräten abgefragt werden können. Dazu gehören Attribute wie Displaygröße, Auflösung, Format sowie Features wie beispielsweise Eingabemöglichkeiten. Inhalt und Layout der Seite müssen strikt getrennt werden, damit das Responsive Design optimal funktioniert.

Elemente im Responsive Design

Im Responsive Webdesign können die gleichen Inhalte in leicht modifizierten Designs für unterschiedliche Endgeräte verwendet werden. Es kann sinnvoll sein, die verschiedenen Funktionselemente auf dem kleinen Display zu reduzieren. Im Wesentlichen werden vorhandene Elemente auf unterschiedliche Weise präsentiert. Ein Beispiel ist der Wechsel zwischen Hoch- und Querformat. Das geänderte Seitenverhältnis muss das Element neu strukturieren, aber seine Funktion bleibt bestehen. Der HTML-Code bleibt gleich, es wird jedoch ein anderes Stylesheet verwendet.

Beim Umstrukturieren der Seite spielt die Priorität vorhandener Elemente eine wichtige Rolle. Sie müssen sorgfältig überlegen, welche Elemente von der Seite nach unten rutschen und welche gelöscht werden können. Diese Entwicklung ist sehr zeitaufwendig und bietet Raum für SEO-Maßnahmen.