HDBLOG


Kategorien


Neueste Beiträge


Neueste Kommentare


Archive


HDNET GmbH & Co. KG


Ravensbeger Str. 22
33824 Werther (Westf.)
Impressum | Datenschutz

HDBLOG

/ 5

Websites

Warum Responsive Webdesign?

1st Oktober 2013

Mobiles Internet steckte in den Kinderschuhen, als Steve Jobs 2007 mit dem ersten iPhone das Smartphone revolutionierte. Websites wurden bis dato fast ausschließlich auf PCs und Notebooks betrachtet. Die Auflösungen der Bildschirme waren für alle Geräte nahezu gleich; es gab keinen Bedarf für Anpassungen. Mit dem Verkaufsstart des iPhones vor sechs Jahren änderte sich die digitale Welt grundlegend. Der Weg war frei für eine Vielzahl an mobilen Telefongeräten, die eine ebenso große Zahl an Bildschirmauflösungen mitbrachten. Die Folge: veränderte Anforderungen an Websites.

Wer 2007 Websites auf dem iPhone-Bildschirm betrachtete, der war zwar angetan von den Möglichkeiten der neuen Technik, verfluchte aber auch schnell diese, die nicht richtig dargestellt werden konnten. Die großen Unternehmen reagierten als erstes und entwickelten eigene Websites für Mobil-User. Über eine Weiche werden die Nutzer auf die Website umgeleitet, die für ihre Technik am besten geeignet ist. Neben der Desktopversion stand Smartphonenutzern nun eine verkleinerte und oftmals inhaltlich angepasste mobile Version zu Verfügung. Und das war auch bitter nötig. 2012 surften erstmals mehr User auf einem mobilen Endgerät als auf einem PC/Laptop.
 

Mobile Websites funktionieren nicht mehr

Doch schon bald schmiss Apple das nächste Gerät auf den Markt, was das Surfverhalten vieler Nutzer (erneut) grundlegend verändern sollte – das iPad erschien im Frühjahr 2010. Die mobilen Websites stießen an ihre Grenzen. Sie waren durch ihre Breitenbeschränkung für Tablets ungeeignet. Die Desktopversion der Website musste auf dem Tablet meist umständlich gezoomt und verschoben werden. Die Webentwickler-Gemeinde stand vor einem grundlegenden Problem. Sollte man jetzt eine dritte Version der Website extra für Tablets erstellen? Befürwortern dieses Ansatzes stellte sich gleich die nächste Frage. Wie würde man dann mit dem nächsten oder übernächsten Gerät umgehen, das – wer weiß? – vielleicht nur wenige Jahre hinter dem Horizont wartete? Dazu kam eine andere Schwierigkeit: wie kann die große Anzahl an Auflösungen der diversen Geräte kompensiert werden?

2010 löste sich Ethan Marcotte in seinem Artikel Responsive Web Design erstmals von der Brückentechnologie mobile Website. Statt den Nutzer hier oder dorthin umzuleiten wird eine einzige Website so programmiert und gestaltet, dass sie auf jedem Endgerät stimmig angezeigt werden kann. Und das nicht nur heute, sondern auch in der Zukunft, wenn neue Geräte mit anderen Auflösungen oder Beschränkungen auf den Markt kommen. Der Trick: es wird lediglich die Darstellung der Inhalte so verändert, dass sie auf dem jeweiligen Gerät automatisch passend ausgegeben werden. Ebenfalls lassen sich nicht benötigte Elemente unkompliziert ausblenden und erweiterte Funktionen einbinden.
 

Warum Responsive Webdesign die Lösung ist

Die mobilen Websites hatten ein administratives Problem aufgeworfen. Sie waren defacto eigene Instanzen und mussten als solche getrennt gepflegt werden. Außerdem führte die Verdopplung oder gar Verdreifachung des gleichen Contents zu Problemen mit den Suchmaschinen. Für Google existierten mehrere Webseiten mit dem gleichen Inhalt – ein starkes negatives Signal, das häufig zu starken Einbrüchen in der Suchmaschinen-Sichtbarkeit führte. Über diverse Anpassungen durch Google ist dieses Problem heute kein Thema mehr, dennoch ist die Pflege und Wartung von mehreren Varianten meist sehr aufwändig. Mit einer responsiven Website wird dieser Nachteil gleich „an der Wurzel behandelt“.

Die Vorteile von responsiven Websites:

  • Kein Mehraufwand bei der Inhaltsverwaltung
  • Benutzerfreundlich auf jedem Endgerät
  • Zukunftssicher
  • Plattformübergreifend
  • Suchmaschinenfreundlich

 

Responsive Webdesign am Praxisbeispiel

Eine responsive Version einer Website passt sich automatisch an die Breite des Displays/Monitors und deren Auflösung an. Die inhaltlichen und gestalterischen Elemente werden dabei in ihrer Größe verändert und entsprechend neu angeordnet; unabhängig davon, ob die Darstellungsbreite 320 Pixel, 600 Pixel oder einen beliebigen anderen Wert beträgt.

Nicht-Responsive Version

responsive-desktop
Ohne diese Anpassung wird selbst auf einem Smartphone, sofern keine mobile Variante existiert, die Desktopversion einer Website ausgegeben. Nur durch umständliches Zoomen und Verschieben können alle Inhalte vom Nutzer erfasst und auch gelesen werden.

Responsive Version

responsive-smartphone

Durch eine responsive Anpassung wird dem User eine für sein Gerät optimierte Version angezeigt; unabhängig der Displaygröße und Auflösung. Die gleiche Seite ist so auf Anhieb benutzerfreundlich und lesbar. Bei diesem Beispiel wird die Navigation über einen Menübutton aufgerufen und spart auf diese Weise Platz ein. Sämtliche Inhalte haben sich untereinander angeordnet, die Hauptinformationen (Überschrift, Aufmacherbild und Text) stehen am Anfang und können ohne viel scrollen erreicht werden. Außerdem wurde der Footer auf die wichtigsten Punkte heruntergebrochen.
 

Der Weg zu vielen Displays

Laut dem Marktforschungsunternehmen IDC werden bereits im aktuellen Jahr 2013 mehr als 1 Milliarde Smartphones abgesetzt – Tendenz steigend.

Mittlerweile existiert eine Vielzahl von Websites, die dem Prinzip des Responsive Webdesigns folgen. Das ist auch gut so, denn die Anzahl (und der Anteil) an Smartphones und Tablets steigt immer weiter. Dabei sind in den Webanalyse-Tools Customer Journeys zu beobachten, die über mehrere Geräte hinweg gehen.

Wer morgens auf dem Weg zur Arbeit in der Bahn mit dem Smartphone surft, ist kurze Zeit später mit dem Firmen-Rechner im Netz. Auch wenn Chefs und Unternehmen das nicht gerne hören, ein Großteil der Deutschen erledigt eine Vielzahl digitaler Privatsachen am Arbeitsplatz. Von Recherchen für Versicherungen über elektronische Behördengänge bis hin zum Windowshopping (deutsches In-etwa-Äquivalent: Schaufensterbummel) ist alles dabei. Die User Experience erstreckt sich also schon bis zur Mittagspause über mehrere Geräte. Am Abend kommt mit dem Tablet auf dem Sofa noch ein weiteres hinzu. An irgendeinem Punkt in dieser Kette erfolgt der Kaufentschluss und auf einem der Geräte erfolgt der Checkout.
 

Neue Geräte, neue Herausforderungen

Das ist für den User großartig, führt aber auch zu neuen Herausforderungen. Viele User navigieren beispielsweise geographisch. Die Position eines Artikels auf der Website wird memoriert. Findet der User den Artikel auf dem Tablet nicht (sprich: an anderer Position), kann das zu Absprüngen führen – bei ansonsten sicheren Käufen. Die Herausforderungen eine gleichbleibende User Experience auf unterschiedlichen Endgeräten zu schaffen ist die aktuell größte Aufgabe für Betreiber von Websites und Online Shops; und es ist kein Ende in Sicht.

Die Zukunft wird immer neue Geräte bringen, das ist sicher. Eine Brille mit Datenverbindung klingt immer noch wie Science Fiction, ist es aber nicht mehr. Die Google Glass wird stand heute zwar doch erst in ein paar Jahren auf den europäischen Markt kommen, ist aber dennoch Technik von heute. Auf der IAA in Frankfurt wurde einmal mehr das vernetzte Auto propagiert und auf der IFA war das „Netz der Dinge“ wieder eins der großen Themen. Kühlschränke als User Agents? Klingt komisch, kommt aber so – und die Websites müssen mitziehen.

Kommentare

  • Jörg
    12:24 am 15. Oktober 2013
    Jörg
    Antworten Autor

    Schöner Artikel. Ich bin ja auch ein großer Fan von Responsive Webdesign, aber ein paar Nachteile gibt es ja doch.

    – Man kann nicht wirklich für beide Welten gleichzeitig optimieren. Entweder man verfolgt den Ansatz mobile- oder Desktop first. Was dann zu einer zu spartanischen, oder einer zu überfrachteten Seite führen kann. Also das ist mMn schon eine größere Herausforderung für den Entwickler.

    – Man kann serverseitig nicht die Bandbreite messen, mit der der Besucher auf der Seite surft. Wenn man keine clientseitige Lösung dafür parat an, z.B. Bildschirmauflösung an den Server übermitteln, werden zwangläufig zu große Bilder an den Besucher geschickt. Das bremst bei einer langsamen Verbindung dann doch ziemlich aus. Und da mit Javascript was zu basteln, ist sicher nicht ideal.

    • Benjamin Hirsch
      13:22 am 15. Oktober 2013
      Benjamin Hirsch
      Antworten Autor

      Ist man der Meinung, dass ein bestimmter Inhalt aus Platzgründen nicht auf der mobilen Version erscheinen soll, so sollte man sich zuerst dir Frage stellen, ob das Element überhaupt, also auch auf der Desktopvariante, existieren muss. Es scheint nicht so wichtig zu sein und lenkt im schlimmsten Fall sogar von anderen Elementen ab, die scheinbar als wichtiger eingestuft werden. Möchte man trotzdem Elemente bestimmten Versionen zuordnen, so könnte man mit Klassen arbeiten, die diesen Inhaltselementen direkt im Backend eines CMS zugeteilt werden. Wenn die Planung und Konzeption einer Website passend ausgelegt ist, können auch diese Anforderungen erfüllt werden.

      Die Dateigröße spielt meiner Meinung nach nur auf Smartphones eine Rolle, da sich Benutzer von Tablets meist innerhalb eines W-LANs befinden. Bevor man jedoch alle Fotos und Grafiken durch eine Lösung über Javascript oder auf einem anderen Weg verkleinert darstellt, sollte man sich dem bewusst sein, dass die meisten Geräte über ein hochauflösendes Display verfügen. „Optimierte“ Bilder sehen dann schnell matschig und unscharf aus. Bei Grafiken könnte man z.B. auf SVG zurückgreifen. Hier gibt es derzeit viele verschiedene Lösungsansätze.

  • Anja
    16:00 am 18. Februar 2015
    Anja
    Antworten Autor

    Sehr schön erklärt! zum Glück sind inzwischen doch so viele Webseiten responsive, was es bedeutet, eine nicht mobile-optimierte Website auf dem Smartphone ansehen und bedienen zu wollen, merkt man ja erst wenn dieser Fall eintritt.. winzige, unleserliche Schrift und zoomen en masse. das macht keinen Spaß.

  • FORMGEFLECHT
    19:55 am 13. Dezember 2016
    FORMGEFLECHT
    Antworten Autor

    Hallo,
    einen wichtigen Punkt in der Auflistung fehlt meiner Meinung nach noch. Und zwar spielt die Performance einer Seite auf mobilen Endgeräten eine richtige Rolle. Sprich sind die Bilder etc. für die jeweiligen Geräte optimiert, um nicht unnötige Datenmengen zu übertragen.

    • Benjamin Hirsch
      11:19 am 16. Dezember 2016
      Benjamin Hirsch
      Antworten Autor

      Die Performance spielt natürlich immer eine Rolle, egal ob es sich um die mobile Version einer Website handelt oder nicht. Der Artikel ist bereits 3 Jahre alt – mittlerweile sollten alle aktuellen Websites auch für mobile Geräte optimiert werden.