Responsive Webdesign

Responsives Webdesign ist in aller Munde. Zu Recht, bedeutet dieser Ausdruck doch, dass sich eine Webseite dem Ausgabemedium anpasst – egal ob es sich um ein Smartphone, ein Tablet, ein Monitor oder Riesen-TV handelt. Und dennoch gibt es bislang wenige Seiten im Internet, die auch wirklich responsiv sind.

Viele größere Unternehmen haben eine vorsintflutliche Variante für Nutzer von Smartphones, nämlich spezielle mobile Seiten. Beispiele sind Die Zeit, Focus, Postbank. Diese haben aber entscheidende Nachteile:

  • Der Nutzer bekommt die mobile Seite angezeigt, wenn die Browsererkennung anschlägt und den Browser als mobil erkennt. Oftmals werden aber so Tablet-PCs wie Nexus 9 oder iPad dann auf die mobile Webseite weitergeleitet, obwohl die Standardansicht die geeignetere Version wäre. Manche Seiten lassen nicht einmal den Wechsel zur Standardansicht zu.
  • Oft wird über JavaScript aber auch gefragt, ob man zur mobilen Ansicht wechseln möchte. Konsequenz: Erst werden die Standard-Inhalte geladen, anschließend nochmal die mobilen Inhalte. Sehr gut für das Traffickontingent des Mobilfunkproviders…
  • Je nach System, welches der Anbieter nutzt, müssen Inhalte für den mobilen Webauftritt separat gepflegt werden. Dieses bedeutet im besseren Fall Mehrarbeit für den Anbieter, in der Realität oftmals aber auch weniger Inhalt für den Besucher mit mobilem Gerät – die vollständigen Informationen gibt es nur in der Standardansicht. Mit etwas Glück ist auch dahin verlinkt…
  • Auch mobile Endgeräte haben unterschiedliche Auflösungen und Abmessungen. Eine mobile Ansicht berücksichtigt dieses meistens nur unzureichend.

Viel besser ist also responsives Webdesign. Hier wird dem Browser nur gesagt, dass er abhängig von der Anzeigefläche Inhalte so oder anders darstellen soll. Dieses hat zur Folge, dass ein und dieselbe Seite auf unterschiedlichen Medien mehr oder weniger stark anders aussehen kann, aber vor allem alle Inhalte vorhanden sind. Es geht sogar so weit, dass eine Seite im „Hochkantmodus“ (Portrait) des Smartphones anders aussieht als im „Quermodus“ (Landscape). Und noch ein Vorteil: Während reine mobile Websites erst aufwändig neu entwickelt werden müssen, kann man die meisten bestehenden, alten Websites mit geringfügigen Anpassungen responsiv gestalten. So ist www.pothe.de, vom Grunde her ist das Design bereits mehrere Jahre alt, innerhalb weniger Stunden Arbeit responsiv geworden (ausgerechnet dieser Blog erfüllt als Ausnahme die Anforderungen noch nicht, dieses soll aber bald folgen). Schauen Sie sich die Seite doch einmal mit Ihrem Smartphone oder Tablet an – oder aber verändern Sie die Größe des Browsers auf der Seite (bitte derzeit aber nicht hier im Blog).

Hier mal Screenshots, wie die Seite auf dem Telefon aussieht – einmal im Portrait-, einmal im Landscape-Modus. Zur Erläuterung: Im Portraitmodus ist die im Landscape-Modus noch vorhandene linke Navigation unterhalb des eigentlichen Seiteninhalts gerutscht.

Screenshot_2015-02-23-17-17-38

Screenshot_2015-02-23-17-14-39