Ein Bild sagt mehr als tausend Worte. Frei nach diesen Sprichwort können Sie Responsive (Web-)Design gleich selbst ausprobieren. Klicken Sie dazu auf eines der Icons, die sich im blauen Bereich am rechten Rand befinden, um die Größe des Bereichs innerhalb der doppelten gelben Linien zu verändern und somit die unterschiedlichen Breiten der Endgeräte zu simulieren.

Kleiner Hinweis: Desto grösser bzw. desto breiter Ihr Bildschirm ist, desto mehr verschiedene Endgeräte können Sie in diesem Beispiel simulieren.

Die Erklärung, was es mit Responsive Design auf sich hat und warum es entstand finden Sie weiter unten.

Was ist Responsive Design?

Unter Responsive (Web-)Design versteht man die automatische Anpassung des Layouts je nach Bildschirmgröße und/oder Endgerät. Das Design wird flexibel konzipiert damit die Besucher eine Website unabhängig vom verwendeten Ausgabemedium problemlos nutzen können.

Ziel ist es, dass sowohl auf einem Computerbildschirm, Tablet, Smartphone als auch einem anderen mobilen Endgerät die Webseite benutzerfreundlich dargestellt wird und der Inhalt schnell vom Besucher aufgenommen werden kann.

Hintergrund

In den 1990er Jahren beginnt das kommerzielle Internetzeitalter. Zunächst orientiert sich die Gestaltung des Webdesigns vor allem an die Darstellung von Computerbildschirmen. Durch die Einführung und Verbreitung von Geräten mit Touchscreens wie Smartphones oder Tablets und der steigenden Zahlen der mobilen Internetnutzung hat sich die Gestaltung der Webseiten verändert, in der nun auch verstärkt auf die Besonderheiten mobiler Internetnutzer eingegangen wird. Auf kleinen Displays erscheinen Webseiten anders als beispielsweise als auf Computerbildschirmen. Zudem ist die Benutzerfreundlichkeit für mobile Endgeräte meistens eingeschränkt, wenn Webseiten nicht für diese optimiert wurden.

Mit Responsive Design geht genau auf diese Probleme ein d. h. beim Responsive Webdesign passt sich flexibel an das jeweilige Endgerät an. Durch ein separates Design für kleine Displays kann die Benutzerfreundlichkeit auch auf mobilen Endgeräten optimiert werden. Wird bei einer Erstellung einer Webseite zunächst die Realisierung der mobilen Webseite in den Fokus gerückt, so spricht man von einer Mobile First-Realisierung. Orientiert sich die Funktionalität der Website zusätzlich an den technischen und grafischen Möglichkeiten des Endgeräts, wird vom Progressive Enhancement gesprochen.

VORGEHEN BEI DER REALISIERUNG

In der Regel werden Desktop, Tablet und Smartphone beim responsiven Webdesign berücksichtigt. Mitunter auch Smart-TV und weitere Endgeräte. Auf den Desktop, auf dem großflächige und hochauflösende Gestaltung obligatorisch ist, ist die opulenteste Darstellung erforderlich. Dagegen muss bei mobile Endgeräten wie. z.B. Smartphones Abstriche bei der Gestaltung, Auflösung und manchmal auch bei den Inhalten gemacht werden.

Bandbreite und Datenvolumen werden unter Anderen bei der Erstellung responsiver Webseiten mit bedacht. Beispielsweise werden aus horizontalen Navigationsleisten im Desktop z.B. vertikal angeordnete Navigationen in mobilen Endgeräten. Teilweise werden Inhalte auch in Smartphones and Tablets eingeklappt, um die Gesamtlänge einer Seite zu kürzen. Der Nutzer muss sie auf mobilen Endgerät dann aufklappen, um sie lesen zu können.

RESPONSIVE DESIGN UND SEO

Auch für das Suchmaschinenranking spielt ein responsives Webdesign eine entscheidende Rolle. Seit März 2021 werden Webseiten mit responsiven Design bevorzugt, indem nur noch die Inhalte der mobilen Versionen aller Webseiten beim Ranking auf Google berücksichtigt werden.

Für gute Rankingpositionen ist Responsive Design darum eine unabdingbare Voraussetzung.

Die Schriftgrößen ändert sich automatisch innerhalb der doppelten gelben Linien wenn Sie zwischen den simulierten Endgeräten wechseln. Probieren Sie es einfach aus.

Dies sind nur einige wenige kurze Beispiele, was für vielfältige Möglichkeiten bei Responsive Design möglich sind. Gerne gehen wir in einen Gespräch auf Ihre Wünsche ein. Kontaktieren Sie uns gern für eine Beratung.