Responsive Design als Ablösung alter Standards

Responsive Webdesign ist inzwischen das Maß aller Dinge und ein absoluter Trend, wenn es darum geht, seine Homepage zu optimieren. Sicher fragst Du Dich, was Responsive Design überhaupt ist oder wofür es verwendet wird. Vielleicht suchst Du auch nach Antworten, wie responsive Webdesign Deiner Webseite hilft. Wir geben Dir einen Überblick über das Thema Responsivität.

Fangen wir aber erst einmal vorne an. Damals wurden Websites für die Verwendung mit Desktop-Monitoren optimiert, nichts Anderes. Entwickler gingen von Bildschirmbreiten von mindestens 1.000 Pixeln aus und haben ihre Designs entsprechend entworfen.

Das hatte seine Daseinsberechtigung, denn immerhin war in den Anfangszeiten der privaten Internetnutzung gar nicht an Smartphones zu denken, geschweige an ein Responsive Design als Webstandard. Inzwischen rufen Nutzer Homepages zu über 55% vom Smartphone oder Tablet aus auf.

Zudem ist das Internet für unterwegs zugänglicher geworden, was das Erreichen von Websites in einer angemessenen Geschwindigkeit erlaubt. Auch, wenn andere Länder Deutschland dabei locker abhängen.

Was ist aber jetzt ein Responsive Design?

Durch die variierenden Bildschirmauflösungen der mobilen und stationären Anzeigemedien stellt das Entwerfen einer Website Betreiber vor eine neue Herausforderung. Abhilfe sollte ein Adaptive Design liefern, das den Browser aber nur auf gewisse Umstände anpasst.

Das Responsive Webdesign sorgt dafür, dass Inhalte einer Seite verhältnismäßig mit der Auflösung skalieren und so auf allen Geräten angemessen darstellbar sind.

Dabei skaliert die Website aber nicht nur, sondern manche Elemente verschieben sich oder sind ab einer bestimmten Grenze ausgeblendet. Welche Vorteile ein Responsive Design bietet, erfährst Du hier.

SEO beim Responsive Webdesign

SEO – das ist die Abkürzung für Search Engine Optimization – ist die Optimierung der Webinhalte an die gängigen Suchmaschinen. Um bei Google und Co. in den Suchergebnissen weit oben aufzutauchen, muss Deine Website gewissen Kriterien entsprechen. Neben vielen Anpassungen auf der Seite gehört auch Responsive Webdesign zu den Faktoren.

Wenn die Suchmaschine merkt, dass Deine Homepage für die mobile Verwendung optimiert ist, stuft sie dein Ranking auf. Zudem steigern die Besucher einer Seite die Platzierung. Sollest Du Inhalte für die mobile Nutzung optimieren, verweilen User länger auf dem Webauftritt. Dieser Faktor zählt ebenfalls in die Anforderungen hinein.

Adaptive Webdesign

Ein negatives Beispiel für SEO ist das Adaptive Webdesign. Zwar ist die Optimierung an gewisse Bildschirmgrößen gegeben, allerdings werden dabei abhängig von der Auflösung verschiedene CSS-Dateien abgerufen. Suchmaschinen erkennen dieses doppelte Aufrufen als Duplicate Content. Das wiederum führt dazu, dass Dein Ranking abgestraft wird.

Das klingt zunächst einmal so, als hätte Adaptive Design gar keine Vorzüge gegenüber Responsive Design. Zwar ist diese Aussage nicht komplett falsch, allerdings profitiert das Adaptive Webdesign davon, dass es gerade für Einsteiger ideal geeignet ist. Es lässt sich problemlos mit einfachen CSS-Befehlen einbetten und verwenden.

Da hören die Vorteile aber leider auch schon auf. Die meisten Website-Betreiber optimieren ihre Inhalte auf drei Displaygrößen: Für den Desktop, für Tablets und für Smartphones. Treffen diese Bedingungen allerdings nicht zu, kann es zu einem unschönen Aussehen kommen. Auch die Funktionalität kann schnell leiden.

Mobile first oder Desktop first?

Oft stellen Webentwickler die Frage, ob sie nach Mobile First oder Desktop First handeln sollen. Also die primäre Optimierung für entweder die mobile oder stationäre Nutzung.

Eine klare Antwort darauf gibt es nicht. Es sei jedoch erwähnt, dass eine Optimierung auf Mobile First Daten spart, was gerade für die Verwendung mobiler Daten wichtig werden kann. CSS ist eine Sprache, die Inhalte der Reihe nach abarbeitet. Ruft ein User zuerst die Desktop-Version einer Homepage auf und muss anschließend die Informationen der mobilen CSS-Datei herunterladen, entsteht zusätzlicher Datentraffic.

Jedes erneute Laden folgt dabei diesem Prinzip, was die Performance hochgerechnet deutlich senkt.

Responsive Webdesign

Responsive Webdesign ist dafür gedacht, die Fehler des Adaptive Webdesigns zu beheben. Zwar ist die Implementierung des Responsive Design aufwändiger, allerdings lohnt sich der längere Weg auf Dauer. Gerade im Bereich Entwurf, Umsetzung und spätere Änderungen kommt für Anfänger erst einmal eine Hürde auf sie zu. Ist diese überwunden, profitierst Du von vielen Vorteilen.

Der Aufbau optimiert Deine Homepage in Sachen Responsivität so, dass sie auf jedem Anzeigegerät problemlos funktioniert. Alle Elemente skalieren in einem Verhältnis, das der Größe des Fensters entspricht. Dabei passen Entwickler die Inhalte nicht an die Bildschirmauflösung an, sondern für das Design und die Funktionalität.

Anstatt Pixel als Einheit zu verwenden, wie es beispielsweise das Adaptive Webdesign macht, baust Du beim Responsive Design auf andere Werte. So kannst Du Inhalte prozentual zur Fenstergröße skalieren oder Einheiten wie VH (Viewport Height) und VW (Viewport Width) benutzen.

Finde die Balance beim Verwenden vom Responsive Webdesign

Wie bei einigen Aspekten im Leben geht es auch hier manchmal um die Balance zwischen zwei verschiedenen Ansätzen.

Adaptive Webdesign arbeitet mit Media Queries. Diese greifen auf Attribute des Browsers zu und erlauben zum Beispiel eine entsprechende Reaktion auf ein verwendetes Medium, eine Fensterbreite oder einen Drucker. Wie zuvor erwähnt, ist dieser Vorgang wenig performant und auch die Responsivität leidet darunter.

Es kann jedoch beim Responsive Webdesign von Vorteil sein, Media Queries zu verwenden. Wird eine Homepage beispielsweise auf eine breite Fläche gestreckt, können Texte schnell unübersichtlich werden. Mit einem Media Query ist es möglich, den Inhalt anders zu skalieren, sobald eine bestimmte Fensterbreite erreicht ist. Wird der Bildschirm über eine gewisse Breite gestreckt, sorgt ein Breakpoint im Code dafür, dass dennoch irgendwann ein Bruch stattfindet.

Auf diese Weise können auch Inhalte verändert werden, die in zu kleinen Fenstern verwendet werden. Da beim Responsive Design alle Elemente verhältnismäßig skalieren, sind Tabellen schnell unübersichtlich oder Texte gehen auf einmal über ihre Textbereiche hinaus. Um dem vorzubeugen, sind Media Queries ebenfalls ideal. In diesem Fall fragt die Media Query auch die Breite des Fensters ab, verschiebt allerdings eventuell Inhalte, die sonst nebeneinanderliegen würden.

Was ist bei Bildern im Responsive Webdesign zu beachten?

Auch bei der Verwendung von visuellen Medien solltest Du beim Responsive Webdesign vorsichtig sein. Während Bitmap-Bilder auf einer bestimmten Auflösung schön aussehen, können sie gestreckt schnell pixelig wirken. Abhilfe schaffen Vektor-Dateien wie SVG-Bilder. Diese sind allerdings eher für Logos gedacht.

Solltest Du beim Verschieben von Elementen entscheiden müssen, dass ein Content nötiger ist als der Andere, blendest Du solche Bereiche mit dem Befehl display:none; problemlos aus. Achte nur darauf, keine wichtigen Inhalte zu löschen!

Wie Du siehst, sprechen einige Dinge für die Verwendung eines Responsive Design. Hast Du Dich erst einmal durch die Implementierung gekämpft, profitierst Du von mehr Performance, einem besseren Google-Ranking und einem ansprechenden Nutzer-Erlebnis.