Responsive Design: Definition & Beispiel

Was bedeutet Responsive Design?

Responsive Design, zu Deutsch in etwa reagierende Gestaltung, ist die Fähigkeit einer Website, sich an die verfügbare Bildschirmfläche anzupassen.

Je nachdem, ob sich die Website auf einem Smartphone, Tablet oder PC-Monitor aufbaut, ordnen sich Inhalte neu an, Spalten werden gestapelt, Schriftgrößen passen sich an und Bilder skalieren mit. Das hilft dabei, ein gutes Nutzererlebnis auf jedem Gerät zu schaffen, ohne dass mehrere Websites gepflegt werden müssen.

Responsive Design ist also die Reaktion des Layouts auf die verfügbare Fläche, anstatt eine starre Seite zu haben, die hier zu groß oder dort zu klein erscheint.

Wo hat das Responsive Design seinen Ursprung?

Das Konzept wurde 2010 vom Webdesigner Ethan Marcotte in einem Artikel benannt und geprägt. Die wachsende Anzahl an Geräten und Bildschirmgrößen machte es für Website-Betreiber zunehmend unpraktisch, unterschiedliche Fassungen für verschiedene Geräteklassen zu bauen. Der Ansatz löste das Problem, indem er das Layout einer Website flexibel an unterschiedliche Bildschirmgrößen anpassbar machte.

Schnell setzte sich das Responsive Design durch und wurde durch den Mobile-First-Ansatz und Googles Schwerpunkt auf mobile Nutzung abermals befördert.

Warum ist Responsive Design wichtig?

Menschen greifen über allerlei Geräte auf Websites zu, ein Großteil davon mobil. Eine Website, die nur auf dem Computer gut aussieht, aber auf dem Smartphone nicht bedienbar ist, verliert auf diese Weise womöglich einen großen Teil ihrer Besucher.

Responsive Design meistert diese Herausforderung und bietet jedem Besucher auf jedem Gerät ein möglichst gutes, an die jeweilige Bildschirmgröße angepasstes Erlebnis.

Da Google für Indexierung und Ranking die mobile Version einer Website heranzieht, ist eine gut funktionierende mobile Darstellung auch für die Sichtbarkeit wichtig.

Vorteile

Responsive Design sorgt mit einer einzigen Website für ein gutes Erlebnis auf allen Geräten.
Es beugt so Absprüngen auf dem Smartphone oder anderen Geräten vor.
Es kommt Googles Fokus auf die mobile Darstellung entgegen.
Es macht Websites flexibler gegenüber neuen Bildschirmgrößen.
Es erspart den Aufwand, mehrere getrennte Fassungen einer Website parallel zu betreiben.

Herausforderungen

Eine auf allen Geräten überzeugende Anpassung erfordert Planung, anspruchsvolle Konzeptarbeit und sorgfältige Umsetzung. Es reicht nicht aus, Inhalte einfach zu verkleinern, sie müssen auch sinnvoll angeordnet werden. Die Umstellung einer starren Seite kann sehr aufwendig sein, bis hin zu einem kompletten Neubau.

Beispiel

Ein Unternehmen betreibt eine Website, die noch aus den 2000er-Jahren stammt. Auf dem Smartphone erscheint sie winzig klein, sodass Besucher ständig zoomen und verschieben müssen und die Buttons kaum treffen. Das frustriert sie und bringt sie zum Absprung.

Nachdem die Website auf Responsive Design umgestellt wurde, passt sich die Seite nun an verschiedene Geräte an.

Auf Tablet und Smartphone lassen sich die Texte gut lesen, Schaltflächen sind problemlos klickbar. Die Absprünge über mobile Geräte reduzieren sich deutlich.