Responsive Design

Jetzt starten! Diese Technologie ermöglicht einen ansprechende Internetauftritt, der auf dem Smartphone gut aussieht und auch auf dem Desktop-PC punktet.

Wie passt das Webdesign zur Bildschirmauflösung?

Eine Frage, die sich Webdesigner schon stellen, seit es das World Wide Web gibt. Auch schon lange bevor das Smartphone erfunden wurde, war es eine Herausforderung, Webseiten so aufzubauen, dass sie auf unterschiedlichen Monitoren mit einer Vielfalt an Bildschirmauflösungen gut aussehen. Über manche Lösungsversuche zu diesem Problem mag man heute nur noch den Kopf schütteln. So war es bis zur Jahrtausendwende durchaus eine gängige Praxis die Bildschirmauflösung des Browsers mit Hilfe von Javascript auszulesen und dann auf eine auflösungsoptimierte Webseite umzuleiten. Aus Sicht der Suchmaschinenoptimierung sicherlich keine gute Lösung, entstehen doch auf diese Weise nicht nur viele Seiten mit jeweils demselben Inhalt, sondern auch eine Vielfalt an dynamischen Umleitungsadressen.

Etwas praktikabler war da schon die Idee, das Design auf eine Mindestbreite üblicher Desktop-Auflösungen anzulegen und somit auf allen Endgeräten dasselbe Webdesign zu präsentieren. Eine solche Breite konnte etwa bei 800 bis 1000 Pixeln liegen. Auf Anzeigegeräten mit einer größeren Auflösung wird dann links und rechts ein breiterer Rand oder ein Hintergrundbild angezeigt. Auf diese Weise war es möglich, Webseiten mit einem anspruchsvolleren Design anzulegen und auch der Einsatz von absoluten Koordinaten für die Elemente einer Website war dann kein Tabu mehr.

Die mobile Nutzung von Internetinhalten

Seit knapp zehn Jahren werden Inhalte aus dem World Wide Web zunehmend auch mobil abgerufen. Das mag uns heute wie eine Selbstverständlichkeit vorkommen, doch in tatsächlich ist diese Technik noch gar nicht so alt: Das erste iPad wurde erst im Jahre 2007 eingeführt. Und mit den Smartphones kamen auch neue Herausforderungen an den Webdesigner. Denn die Spannweite der Bildschirmauflösungen vom kleinen Handy bis zum 24“ Monitor des Desktop-PCs wurde immer größer. Die Idee, das Design auf die kleinste Auflösung anzulegen und auf allen Endgeräten entsprechend dieser Ausrichtung anzuzeigen, war nicht mehr praktikabel. Auch die Praxis, mit dem Handy auf Webseiten, die für den Desktop-PC ausgerichtet waren, herumzuscrollen, schien für den mobilen Anwender tendenziell unzumutbar.

Die Lösung: Responsive Design

Eine neue Lösung musste gefunden werden. Und sie wurde gefunden. Und zwar in Gestalt des Responsive-Designs. „Responsive“ kann mit dem Wort „ansprechbar“ übersetzt werden. Und so setzt das Responsive-Design auf Elemente, die entsprechend der Bildschirmauflösung des Endgerätes individuell angeordnet werden können. Ob eine Website über ein solches Design verfügt, ist leicht zu erkennen: Wir das Browserfenster verkleinert, so ordnen sich die die einzelnen Elemente der Seite neu an. Stehen Bilder und Texte in der großen Auflösung noch nebeneinander, so werden sie nun untereinandergelegt. Bilder werden verkleinert und die Schriftgröße kann sich verändern. Gutes Responsive Design ist auch daran zu erkennen, dass bei mobiler Nutzung die Webseite genau die Breite der Handydarstellung einnimmt. Horizontales Scrollen sollte nicht mehr erforderlich sein. Die „Viewport“ Definition im Head der Webseite gibt an, dass die Breite der Website identisch mit der Breite des Anzeigegerätes, bzw. des dort genutzten Browsers ist. Die Anpassung erfolgt in Echtzeit. Wir das Smartphone gedreht, so wird das Design sofort an die neue horizontale Auflösung angepasst.

Störende Formatierungselemente

Soll eine Webseite an das Responsive-Design angepasst werden, so gibt es manchmal die Notwendigkeit, sich von einigen „Altlasten“ zu trennen. So wurden in den frühen Tagen des Webdesigns Tabellen genutzt, um die Elemente einer Webseite aufzuteilen. Diese Technik wurde spätestens mit der Formatierungssprache „CSS“ überflüssig, doch in so manchem Angebot im Web steckt immer noch eine Technik, die niemals überarbeitet und modernisiert wurde. Tabellenformatierungen gehören in einem Responsive-Design zu den störenden Elementen und sollten entfernt werden. Auch absolute Koordinaten für die Elemente einer Website haben in einem Responsive Design nichts mehr zu suchen. Die einzelnen Inhalte einer Webseite werden bei der Darstellung auf einem Smartphone tendenziell untereinander dargestellt. Sollen aber doch einmal Elemente nebeneinander platziert werden, so kommt vor allem der „Float“ Paramenter zum Einsatz. Dieser definiert, dass ein Element um das andere herumfließt.

Mehrere Webdesigns für dieselben Inhalte?

Wer für eine bestehende Website ein Responsive-Design für die Darstellung auf mobilen Endgeräten aufbauen, aber nicht gänzlich auf das bisherige Desktop-Design verzichten möchte, kann auch mit beiden Angeboten parallel arbeiten. Das bedeutet nicht, zwei unterschiedliche Websites anzubieten. Moderne Browser kennen den „Media“ Parameter, der unterschiedliche CSS-Designs für unterschiedliche Endgeräte unterscheiden kann. So kann etwa eine Weiche für kleinere Auflösungen, z.B. unterhalb von 900 Pixeln in der Breite angelegt werden. Kleinere Auflösungen bekommen dann das Responsive-Design für mobile Endgeräte, für größere Auflösungen wird weiterhin das bekannte Desktop-Design dargestellt.

Responsive Design überprüfen

Google selbst bietet ein entsprechendes Tool an, mit dem die Mobil-Kompatibilität einer Webseite getestet werden kann. Dabei wird überprüft, ob die Inhalte und das Design einer Website auch tatsächlich der Bildschirmbreite angepasst wird, so dass der Nutzer alle Inhalte ohne horizontal zu scrollen vollständig sehen kann. Außerdem wirft das Tool einen Blick auf die Schriftgröße. Auch auf kleinen Anzeigegeräten müssen Texte gut zu erkennen sein. Es folgt auch ein Test der Linksetzungen auf der Seite. Die Navigation per Touchscreen benötigt etwas mehr Spielraum bei den Abständen der einzelnen Links. Und last but not least, überprüft das Google-Mobile friendly Tool auch ob der Viewport definiert worden ist. Werden all diese Tests positiv beantwortet, dann kann die Seite in den Suchergebnissen mit dem Zusatz „für Mobilgeräte“ markiert werden.