Was ist Responsive Design?

Egal ob Smartphone, Tablet oder Desktop-PC: Eine Website sollte idealerweise auf allen Endgeräten erreichbar, bedienbar und gut lesbar sein. Wie wichtig das ist, zeigen die Nutzungsstatistiken für mobile Websites: Viele klassische Unternehmensauftritte aus unserem Portfolio zeigten schon 2013 Nutzungsanteile für Smartphones und Tablets von über 30 % auf – Tendenz stark steigend. 

Responsive Design für BIGdirekt

Eine fehlerhafte oder schlechte Darstellung von Seiten auf Smartphone, Tablet & Co. bedeutet automatisch deutlich messbare Einbußen bei Nutzungshäufigkeit und -intensität. Mobiloptimierten Firmenpräsenzen kommt also eine immer größere Bedeutung zu. 

Die früher beliebten Mobilversionen von Internetseiten waren jeweils nur auf ein spezielles Endgerät abgestimmt. Für eine optimale Darstellung der Inhalte etwa auf Desktop-PC, iPad, Tablet, Android-Handy und iPhone mussten daher fünf verschiedene Dokumente textlich gleichen Inhalts entwickelt werden. Der zeitliche und finanzielle Aufwand für die Ersterstellung und spätere Aktualisierungsarbeiten stieg dementsprechend auf das Fünffache.

Mit Hilfe von Responsive Design lässt sich nun die Bedienbarkeit über alle Endgeräteklassen hinweg technisch elegant sowie zeit- und kosteneffizient sicherstellen: Anstatt für jede Bildschirmbreite eine eigene Version bereitstellen zu müssen, passen sich responsive Websites automatisch an den Platz an, der auf dem Endgerät zur Verfügung steht. Dabei werden Texte und Bilder je nach Bildschirmgröße automatisch umpositioniert und skaliert, so dass Übersichtlichkeit und Lesbarkeit gewährleistet bleiben. Zudem reagieren responsive Websites je nach verwendetem Zeigegerät (Maus oder Finger) unterschiedlich und stellen so eine optimale Usability sicher.

Ist Ihre Website responsive?

Schnellcheck für Responsive Websites

Testen Sie es einfach! Die Website Am I responsive? stellt einen kostenlosen Schnelltest zur Verfügung. Geben Sie einfach die URL Ihrer Website in das zentrale Eingabefeld ein. Wenige Augenblicke später sehen Sie, wie Ihre Website auf iPhone, iPad und Co. dargestellt wird.

Responsive Design in Aktion

Ausschnitt des Portals der Krankenkasse BIG direkt gesund im Responsive Design.

Rufen Sie www.big-direkt.de auf einem Desktop-PC auf und verkleinern Sie nach und nach das Browser-Fenster. Dabei können Sie beobachten, wie sich die Inhalte beim Erreichen bestimmter Fensterbreiten umorganisieren.

Wie funktioniert Responsive Design?

Damit eine Webseite auf die Breite des Endgeräts reagieren kann, werden sogenannte „Breakpoints” definiert. Technisch erfolgt dies über die mit CSS3 nutzbaren media queries. Mit dieser Technik definiert der Webentwickler, wie Texte und Bilder auf einer Webseite in Abhängigkeit zur Breite des Bildschirms angeordnet werden. Außerdem kann so festgelegt werden, ob ein Inhalt überhaupt angezeigt wird. So können Artikel auf kleinen Bildschirmen ausgedünnt werden, indem weniger wichtige Inhalte entfallen. Der Code der Webseite bleibt dabei stets der Gleiche. Der Browser des Endgerätes wählt lediglich die für seine Bildschirmbreite optimalen Formatierungsanweisungen aus.

brainbits hat umfangreiche Erfahrung mit der Erstellung von responsive Websites. So haben wir unter anderem das Portal der Direktkrankenkasse BIG direkt gesund, die deutsche Bepanthen-Website sowie die Websites und das Intranet der renommierten Anwaltssozietät GÖRG auf Responsive Design umgestellt.