Responsive Webdesign erklärt

Da durch die verbreitete Smartphone-Nutzung von Websites seit diesem Jahr „Responsive Webdesign“ für die Google-Optimierung ein Ranking-Faktor geworden ist, haben wir unseren Multi-Media Designer André gebeten, Responsive-Webdesign zu erklären:

Spätestens seit der Einführung der „mobile-friendliness“ als Ranking-Faktor bei der Google-Suche im April 2015 wurde „Responsive Webdesign“ ein essentieller Punkt auf der To-Do-Liste jedes Webdesigners. Aber was bedeutet eigentlich „mobile-friendliness“ und „Responsive Webdesign“? Braucht man das wirklich? Und kann man bestehende Websites nachträglich „responsive“ machen? Um dies und mehr soll es im folgenden Artikel gehen.

Mobile Friendliness

Wer ein paar englische Vokabeln beherrscht, hat es sicher bereits erraten: Bei der „mobile friendliness“ geht es darum, dass eine Webseite auf Mobilgeräten – sprich Smartphones oder Tablets – gut benutzbar sein muss. Speziell im Sinne von Google und dem Gedanken hinter „Responsive Webdesign“ geht es darum, dass Inhalte einer Seite auf kleinen Bildschirmen ohne Vergrößern oder unnötiges Hin- und Herschieben des Bildschirminhaltes leicht lesbar sein müssen. Außerdem müssen interaktive Elemente wie Menüpunkte, Schaltflächen oder Links gut mit dem Finger bedienbar sein.

Responsive Webdesign

Responsive Webdesign bezeichnet im Wesentlichen eine Vorgehensweise bei der Gestaltung und Entwicklung von Websites, die versucht den Eigenheiten verschiedener Geräte gerecht zu werden und gezielt auf technische Einschränkungen einzugehen. Streng genommen geht es dabei nicht nur um die Anpassung an Mobilgeräte mit kleineren Displays sondern auch um die Anpassung an größere Bildschirme – beispielsweise Fernsehgeräte oder Projektoren. Auch die Optimierung der Druckausgabe ist genau genommen Responsive Webdesign. Im allgemeinen Sprachgebrauch geht es bei „Responsive Webdesign“ aber um die Optimierung von Webseiten für Smartphones und Tablets.

Zur Geschichte des responsive Design lesen Sie hier im zweiten Teil unseres Blogbeitrags.

Neue Werkzeuge dank CSS3

Mit der Weiterentwicklung der Stylesheet-Sprache in „CSS Level 3“ kamen die so genannten „Media Queries“ (zu deutsch etwa: Medien-Abfragen) in vielen modernen Browsern an und können dort seit nunmehr etlichen Jahren recht verlässlich genutzt werden. Diese Media Queries ermöglichen es, für einzelne Breiten-Bereiche gezielt Stile zu definieren. Somit lassen sich z.B. aus dem oben genannten problematischen Zweispalter auf Geräten unterhalb der 500-Pixel-Marke bequem zwei Einspalter machen, die dann nicht mehr nebeneinander sondern untereinander stehen. Mit der gleichen Technik könnte man auch auf besonders großen Geräten noch eine dritte Spalte hinzufügen.

Responsive Seite

Demo: Die Inhalte der Seite passen sich der jeweils verfügbaren Breite an. Kein horizontales Scrollen notwendig.

Je nach Belieben und Anforderungen an eine Website, kann nun auch wieder mit festen Breiten in Pixel gearbeitet werden – wobei man nun jedoch nicht eine Breite definiert sondern N verschiedene: Beispielsweise eine Breite für Smartphones im Hochformat, eine für Smartphones im Querformat und Tablets im Hochformat und eine dritte für Tabletts im Querformat und „normale“ Desktop-Rechner. Das Design ändert sich nun also an N verschiedenen Punkten, den s.g. „Breakpoints„. Wieviele Breakpoints man verwendet, obliegt dem Webdesigner, dem Webentwickler und natürlich den Wünschen des Kunden. Die in CSS3 eingeführten Media Queries schaffen also die nötige Flexibilität um eine breite Palette von Bildschirmbreiten anzusprechen und das Design darauf hin zu optimieren.

Neben der Breite von Elementen spielen bei der „mobile friendliness“ wie eingangs bereits geschildert auch noch andere Gegebenheiten eine Rolle: Je nach Design einer Website müssen auf Smartphones und Tablets z.B. Schriftgrößen angepasst werden (Überschriften vielleicht etwas kleiner, dafür den Fließtext etwas größer), Teile einer Site aus- oder eingeblendet werden, Schaltflächen für die Bedienung mit dem Finger vergrößert werden oder Abstände zwischen zwei Links verweitert werden, damit man nicht versehentlich daneben tippt. All das ermöglichen die Media Queries in CSS3.

Ungelöste Probleme

Neben der optischen Anpassungen des Designs an kleine Bildschirme, geht es beim Responsive Webdesign auch darum die Ressourcen einer Website an die deutlich geringeren Bildschirmbreiten anzupassen. Besonders im Fokus stehen dabei Bilder, denn schließlich macht es wenig Sinn, ein hochauflösendes Bild auf ein Smartphone mit Mini-Display zu übertragen und dort zu verkleinern. Denn das beschlagnahmt unnötig Bandbreite sowie Datenvolumen und verlangsamt die Ladezeit der Seite. Clever ist es vielmehr, eine speziell angepasste Version des Bildes für das kleine Display auszuliefern. In HTML5 gibt es für genau diesen Zweck mit dem srcsetAtttribut und dem picture-Element zwei theoretische Lösungen. Denn hier lassen sich mehrere Bilder definieren, die der Browser je nach Bedarf gezielt einzeln laden kann und somit die bestmögliche Bildgröße für sein Display abruft. Leider sind beide Methoden dezeit nicht verlässlich, da sie nicht von allen Browsern gleich gut unterstützt werden. Und verfügbaren Workarounds sind oftmals Frickellösungen, die sich nur schwer in bestehende Content Management Systeme integrieren lassen. Hier werden sich die Browserhersteller aber sicher mittelfristig auf eine Lösung einigen.

Für die Einstufung einer Website „mobile friendly“ seitens Google spielt die Optimierung der Ressourcen allerdings derzeit noch keine Rolle, wenngleich die Seitengeschwindigkeit (Website-Check Google PageSpeed Insights) diesen Misstand bereits korrekt aufzeigen. Hier wird es aber vermutlich früher oder später ein entsprechendes Update im Ranking-Mechanismus geben – hoffentlich allerdings erst, wenn den Webentwicklern und Seitenbetreibern geeignete Werkzeuge verlässlich zur Verfügung stehen.

Muss meine Site responsive sein?

Diese Frage lässt sich wie so vieles ganz klar mit Folgendem beantworten: Es kommt drauf an! Wenn Ihnen eine bestmögliche Platzierung in den Google-Suchergebnissen wichtig ist, sollten Sie eine „mobile friendly“ Website als zusätzliches Glied in der Optimierungskette betrachten. Denn neben vielen anderen Faktoren fließt dieses Kriterium seit April 2015 mit in das Ranking der mobilen Suche ein. Sucht ein Nutzer also auf Smartphone oder Tablet mit Google, so wird eine mobil optimierte Seite gegenüber einer inhaltlich gleichwertigen jedoch nicht-optimierten Seite bevorzugt. Hier müssen Sie sich ggf. auch die Frage stellen, wie relevant die mobile Suche für Ihre Website ist: Wird Ihre Website mobil genutzt? Wenn ja, wie häufig und wie ist die Wachstumstendenz der mobilen Nutzung auf Ihrer Site? Antworten darauf erhalten Sie z.B. in Google Analytics – sofern Ihre Site diesen Dienst nutzt.

Ebenfalls besonders wichtig ist die mobile Optimierung bei Seiten mit viel Text. Auch wenn moderne Smartphones sehr gut mit nicht-optimierten Seiten klar kommen – ein Doppel-Tab auf den Artikeltext vergrößert diesen i.d.R. auf maximale Bildschirmgröße – möchte niemand lange Texte auf diese Art und Weise lesen. Tun Sie Ihren Lesern also einen Gefallen und optimieren Sie die Seiten für Mobilgeräte.

Die Website eines gemeinnützigen Vereins, eines Restaurants oder lokalem Geschäft muss hingegen – meiner Ansicht nach – nicht zwingend responsiv sein. Hier sind schließlich oftmals andere Faktoren für den Besucherstrom auf Ihrer Website verantwortlich als die Ergebnisse in Suchmaschinen: Gemeinsame Interessen, Empfehlungen von Freunden und Familie sowie die örtliche Präsenz. Wenn Sie sich zu einer dieser Gruppen zählen und Sie eine nicht-responsive Website haben: Bleiben Sie entspannt, davon geht die Welt nicht unter. Wenn Sie jedoch eine neue Website in Auftrag geben, ziehen Sie eine responsive Umsetzung in Betracht – auch wenn das mit etwas Mehrkosten verbunden sein wird. Denn schließlich ist der Trend der mobilen Netznutzung generell stark zunehmend und dafür sollten Sie in Zukunft gewappnet sein.

Responsive Website

Responsive Websites lassen sich auf verschiedenen Bildschirmgrößen optimal bedienen. (Screenshot: http://ami.responsivedesign.is)

Kann man eine Website nachträglich für Mobilgeräte optimieren?

In aller Regel ja. Je nach Komplexität des bestehenden Layouts und der Form des darunter liegenden Codes kann das mal mehr, mal weniger aufwändig sein. Generell gilt aber: Eine Website nachträglich mobil zu optimieren ist in aller Regel deutlich aufwändiger (und damit teuer) als es direkt bei der ersten Entwicklung zu berücksichtigen. Es ist aber völlig legitim und nicht verwerflich, eine vielleicht früher mit schmalem Budget erstellte Website später noch mal anzufassen und auf Vordermann zu bringen. Fragen Sie einfach den Web-Spezi Ihres Vertrauens – oder natürlich uns.

Testen Sie Ihre Website auf „mobile friendliness“

Um zu prüfen, ob Ihre Website bereits responsive ist, rufen Sie diese am Einfachsten über Ihr Smartphone oder Tablet auf. Haben Sie eines oder beides nicht zur Verfügung, können Sie kleine Bildschirme durch horizontales Verkleinern des Browserfensters auf Ihrem PC oder Mac simulieren.

Das Test-Tool von Google hilft Ihnen darüber hinaus zu kleine Texte, Links und Schaltflächen zu identifizieren. Beachten Sie jedoch, dass das Tool nur die Seite auf der von Ihnen angebenen Adresse prüft. Da eine Website zumeist aus mehreren Seiten besteht, müssen Sie diesen Test der Vollständigkeit wegen mit allen Adressen sämtlicher Unterseiten wiederholen. In der Praxis werden aber bereits Stichproben valide Ergebnisse zutage bringen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.