Alle Beiträge von Philipp Renger

Seine Begeisterung für die neuen Medien und deren soziale Strukturen sowie sein betriebswirtschaftlicher Hintergrund machen ihn zum idealen Sparringspartner. Ein tiefgreifendes Verständnis der Netzwelt sieht er als Basis für seine Arbeit und die daraus resultierenden Konzepte und Strategien.

Richtig Mobil – Adaptive vs. Responsive Webdesign

In den letzten Jahren hat sich die Anzahl der unterschiedlichen Endgeräte und somit auch der unterschiedlichen Auflösungen rasant gesteigert. Gab es früher 3-4 unterschiedliche Auflösungen, sind es heute zig verschiedene. Doch die meisten Webseiten sind nicht dafür optimiert, auf all diesen unterschiedlichen Auflösungen die passende Darstellung zu haben. Und genau das ist die Aufgabe von adaptive und responsive Webdesign: auf jedem Ausgabegerät (Desktop, Tablet, Smartphone) und für jede mögliche Auflösung die ideale Darstellung der Inhalte zu gewährleisten. In diesem Artikel möchte ich die Gemeinsamkeiten und Unterschiede beider Herangehensweisen sowohl auf technischer, als auch auf darstellerischer Ebene aufzeigen, ohne dabei zu sehr ins Detail zu gehen. Ziel ist es dieses komplexe Thema etwas zugänglicher zu machen.

Ob adaptive oder responsive Webdesign, es geht um Anpassung der Webseite an die Hard- und Softwareumgebung des Besuchers. Responsive Webdesign stellt dabei eine Steigerungsform des Adaptive Webdesign dar und bietet eine weitaus größere Flexibilität gegenüber den verwendeten Endgeräten. Doch dazu später mehr.

Adaptive vs. Responsive Webdesign

Gemeinsamkeiten und Abgrenzung zur mobilen Website:
Sowohl responsive, als auch adaptive Webdesign zielen darauf ab, Seiten auf unterschiedlichen Endgeräten mit unterschiedlichen Hard- und Softwareumgebungen optimiert darzustellen. Man möchte dadurch die Notwendigkeit multipler Systeme und den damit in Verbindung stehenden höheren Pflegeaufwand vermeiden und den Funktionsumfang der Seite erhalten. Ziel ist es dabei, dem Besucher ein möglichst stringentes (Marken-)Erlebnis über alle Endgeräte hinweg zu ermöglichen.
Somit grenzen sich diese beiden Optionen klar von mobilen Websites ab, welche häufig parallel zur eigentlichen Internetpräsenz aufgebaut und separat gepflegt werden müssen. Diese sind unter einer abweichenden URL wie m.website.com, mobile.website.com oder website.com/mobil zu erreichen und unterscheiden sich teilweise deutlich von den regulären Varianten der Unternehmensauftritte.

Die Motivation für die Umsetzung einer mobilen Website ist naheliegend. Ziel ist es, dem Nutzer für seinen Anwendungskontext passende Inhalte und Funktionen zur Verfügung zu stellen, die von denen der regulären Internetpräsenz teilweise stark abweichen.
So unterscheidet sich die mobile Website der Deutschen Post deutlich von der regulären. Die mobile Version geht viel stärker auf die nachgefragten Anwendungsszenarien der Nutzer ein, die auf die Präsenz der Deutschen Post mit einem mobilen Endgerät zugreifen. Funktionalitäten wie die Filial- oder Briefkastensuche sind hier wesentlich prominenter platziert als dies auf der regulären Internetpräsenz der Fall ist. Das Layout der mobilen Post-Webseite beachtet zusätzlich die mobilen Bedienkonzepte und ist voll auf Touchdevices ausgerichtet.

Mobile Webseite der Deutschen Post
Mobile Webseite der Deutschen Post

Mobile Websites bedienen also primär unterschiedliche Anwendungsszenarien im mobilen Kontext und weisen bzgl. der Inhalte und Funktionalitäten deutliche Unterschiede zu den regulären Internetpräsenzen auf.

Unterschiede zwischen responsive und adaptive Webdesign:
Beim responsive Webdesign werden Größenangaben in ein Verhältnis zueinander gesetzt. Dabei definiert ein Basiswert die maximale Breite der Webseite. Alle weiteren Größenangaben werden anschließend in das Verhältnis zum Basiswert gesetzt. Aus Pixelangaben werden somit Prozentwerte. Folge dieser Anpassung ist eine flexible oder auch fließende Webseite, die durch Repositionierung, Skalierung sowie dem Ausblenden einzelner Inhaltselemente, auf die unterschiedlichen Browser und Ausgabegeräte reagiert. Somit wird eine bestmögliche Darstellung und Anordnung gewährleistet. Die Beachtung von zusätzlichen Informationen seitens der Endgeräte durch sogenannte Media Queries ermöglichen dabei eine unterschiedliche Anordnung in Abhängigkeit von Bildschirmgröße, Auflösung, Ausgabegerät und weiteren Attributen.
Dabei ist es häufig notwendig einzelne Inhaltselemente wie Header oder Menü in verschiedenen Variationen zu gestalten bzw. zur Verfügung zu stellen, um eine Darstell- und Bedienbarkeit der Seite über alle Ausgabegeräte hinweg zu gewährleisten. Das Ergebnis dieser Anpassungen ist eine Seite, welche auf allen Geräten, unabhängig von der Auflösung des Ausgabebildschirms, flächendeckend* dargestellt werden kann.
Ein prominentes Beispiel für eine responsive Website ist Microsoft. Hier gibt es beispielsweise zwei unterschiedliche Darstellungen der Hauptnavigation und des Headerbereiches. Beim Verkleinern und Vergrößern des Browsers werden diese Veränderungen sichtbar.

Der Ansatz beim adaptive Webdesign ist ähnlich dem responsive Ansatz, jedoch fehlt die flexible Komponente. Für den Benutzer äußert sich dies durch Sprünge, so genannte „Breakpoints“ in der Darstellung. Die Website wird auf die 3-4 wichtigsten Auflösungsstufen, also in vorgegebenen Stufen, optimiert. (Diese Breakpoints finden auch beim Responsive Webdesign Einsatz, jedoch sind sie aufgrund der flexiblen Anpassung an den Browser für den Nutzer weniger auffällig.)

Beispielsweise wird eine Website oder ein einzelnes Element dieser in Browserfenstern mit einer Breite zwischen 320 und 767 Pixeln gleich dargestellt. Erst ab einer Browserbreite von 768 Pixeln „springt“ das Layout der Website oder des Elementes um.
Ein Beispiel hierfür ist die Seite von Sony USA.

Welche Lösung ist die Richtige?
Welche Herangehensweise man bei einer Website an den Tag legt, hängt primär von drei Kriterien ab:

  • Aufwand der Umsetzung
  • Anspruch an Design & Usability
  • Wunsch nach zukunftsorientierter Website

Eine zukunftsorientierte Website, welche auflösungsunabhängig ist und somit für zukünftige Endgeräte mit bisher unbekannten Auflösungen gewappnet ist, lässt sich nur mithilfe von responsive Webdesign realisieren. Sie erfüllt hohe Erwartungen an das Design und weist über alle Geräte hinweg eine hohe Usability auf. Der Aufwand für die Umsetzung ist im Vergleich zu einer adaptive Website durchaus umfangreicher, aber auch hier gibt es Abstufungen bzgl. der Umsetzung.
Eine adaptive Website erfüllt den Anspruch der Darstell- und Bedienbarkeit auf mobilen Endgeräten. Die Darstellung ist jedoch nur für einige wenige Auflösungen optimiert, sodass es hin und wieder zu Darstellungs- und Bedienproblemen führen kann. Zusätzlich besteht häufig der Bedarf eine adaptive Website in regelmäßigen Abständen an ggf. neue, weit verbreitete Auflösungen anzupassen.

Wer sich intensiver mit der Thematik beschäftigen möchte, dem kann man das Buch „Responsive Webdesign – Reaktionsfähige Websites gestalten und umsetzen“ von Christoph Zillgens empfehlen, da es sowohl für Entwickler, als auch Designer eine umfangreiche Vertiefung der Thematik bietet.

Tipp: Mithilfe des Tools Screenfly lässt sich die Wiedergabe von Websites auf unterschiedlichen Endgeräten simulieren, wobei die Darstellung nicht immer derer auf dem eigentlichen Endgerät entspricht.

*bis zur Überschreitung des Basiswerts

Bereit für das mobile Zeitalter? Der 5-Punkte-Check

Die mobile Internet Nutzung in Deutschland nimmt unaufhaltsam zu. Während in Indien die Nutzung des mobilen Internets die Nutzung via Desktop schon längst überholt hat, so sind wir in Deutschland auf dem besten Weg dahin. Zeit zum zurück lehnen gibt es also nicht, denn die Wachstumsraten der mobilen Internet Nutzung in Deutschland* lassen nur vermuten, wann wir auch hier ein ähnliches Verhältnis wie in Indien erreichen werden.

Mobile Endgeräte mit unterschiedlichen Auflösungen

Der Wachstumsmotor mobiles Internet verändert Gesellschaft und Wirtschaft in vielerlei Hinsicht.
Das Informations- und  Kommunikationsverhalten wir mobiler und somit dynamischer. Nachrichten verbreiten sich schneller und die Gesellschaft vernetzt sich digital. Treiber dieser Entwicklung, wie Medienkompetenz oder Datenschutz, gewinnen zunehmend an Bedeutung und wirken sich positiv auf die Akzeptanz des mobilen Internets in der Gesellschaft aus. Doch die Gesellschaft ist damit der Wirtschaft einige Schritte voraus. Kaum 40% der deutschen Unternehmen mit bestehender Internetpräsenz haben ihr Angebot an das mobile Zeitalter angepasst. Ein Großteil der Unternehmen hat also noch einige Hausaufgaben nachzuholen, um wettbewerbsfähig zu bleiben.

Was müssen Sie also tun, um Ihr Unternehmen, Ihre Marke auch im mobilen Umfeld adäquat zu präsentieren? Achten Sie dabei auf folgende fünf Punkte:

    1. Überprüfen Sie Ihre Webseite auf die Darstellbarkeit auf kleineren Bildschirmen wie z.B. auf einem Smartphone oder einem Tablet. Sofern Ihnen kein passendes Endgerät zur Verfügung steht, können Sie mithilfe des Tools Screenfly simulieren, wie ihr Internetauftritt auf gängigen Endgeräten abgebildet wird. Alternativ können Sie Ihr Browserfenster verkleinern, um das Verhalten Ihrer Seite zu beobachten. Verändert sich die Darstellung Ihrer Webseite nicht, sollten Sie darüber nachdenken, diese zu überarbeiten.
    2. Überprüfen sie die Ladezeit ihrer Webseite auf mobilen Endgeräten. Liefern sie ihre Inhalte – speziell Bilder – mobil optimiert aus, um Ladezeiten zu reduzieren und ein schnelles Laden der Onlinepräsenz zu gewährleisten. Die Verwendung einer Image Publishing Software bietet hier schnelle Abhilfe. Vermeiden sie des Weiteren Technologien wie Flash, welche mit einem Großteil der mobilen Endgeräte nicht kompatibel sind.
    3. Mobil ist die Verfügbarkeit von Informationen wie Kontaktmöglichkeiten, Öffnungszeiten, Adresse und Anfahrtsbeschreibung sehr wichtig. Überprüfen sie selbst, ob diese Informationen schnell und unkompliziert über ihre Webseite einsehbar sind.
    4. Dank der Touchscreen Technologie in Smartphones, Tablets und mittlerweile auch Notebooks, sollten Sie überprüfen, ob die einzelnen Elemente ihrer Internetpräsenz, speziell im Bereich der Menüführung und Verlinkung, großflächig genug gestaltet sind. Ist dies nicht der Fall, besteht die Gefahr, dass Besucher Ihrer Webseite den gewünschten „Klick“ nur mit sehr viel Anstrengung ausführen können. In der Regel sollten funktionale Flächen eine Mindestgröße von 44 Pixel haben.
    5. Achten Sie besonders bei der Verwendung von Links in Newslettern auf die Mobilfähigkeit verlinkter Webseiten. In Deutschland lesen aktuell ca. 13% der Internetnutzer ihre E-Mails ausschließlich auf mobilen Endgeräten und 60% nutzen E-Mails sowohl auf mobilen als auch auf Desktop Endgeräten.

Die Notwendigkeit der daraus folgenden Anpassungen können Sie am besten anhand ihrer eigenen Statistiken definieren: Wie viele Besucher greifen von mobilen Endgeräten auf Ihre Seite zu? Welche Seiten werden hauptsächlich mobil aufgerufen? Wie unterscheiden sich die Ausstiegsraten von Desktop zu Mobil?

Die Antworten auf diese Fragen können von Branche zu Branche unterschiedlich ausfallen. So liegt die Zugriffsrate von mobilen Endgeräten bei einigen Unternehmen bei unter 10%, bei anderen schon weit über 20%. Sicher ist, dass sich dieser Anteil innerhalb der nächsten Jahre erhöhen wird. Lag der Anteil der mobilen Zugriffe auf Webseiten in Deutschland im März 2012 noch bei 3%, so verzeichnen wir aktuell ca. 7% (Quelle), was einer enormen Wachstumsrate entspricht. Unternehmen geraten zunehmen unter Druck, um in diesem Bereich zu investieren, denn die Konkurrenz schläft nicht.

*Jeder dritte Deutsche besitzt aktuell ein Smartphone und jeder achte ein Tablet. Im Vergleich zu 2012 sind dies Steigerungsraten von über 50 bzw. 160 Prozent. Mehr als jeder zweite Internetnutzer ist heutzutage mobil unterwegs. Die Ergebnisse der Studie „Mobile Internetnutzung: Entwicklungsschub für die digitale Gesellschaft“ zeigen deutlich, wo die Reise hin geht. Klassische Desktop-Computer oder Notebooks werden zunehmend durch Tablets und Smartphones ersetzt bzw. ergänzt was zu einer intensiveren Nutzung des Internets in allen Bevölkerungs- und Altersschichten führt.

Facebook Graph Search bringt neues Leben ins Spiel

Gestern Abend hat Mark Zuckerberg die Facebook Graph Search vorgestellt. Wie so häufig wird Facebook auch dieses Feature erst nach und nach ausrollen. Wie gut die Graph Search funktioniert, werden wir vermutlich erst in einigen Wochen sagen können. Eins ist jedoch sicher: Die Graph Search wird noch mehr Menschen miteinander verbinden und die Nutzer in Abhängigkeit ihrer Privatsphären-Einstellungen noch sichtbarer machen. Es empfiehlt sich also seine Privatsphären-Einstellungen noch einmal zu überprüfen und sich vor Augen zu führen, welche Inhalte von welchen Personen über die Suche gefunden werden können. Denn früher oder später werden nicht nur Privatpersonen Nutzen aus der Suche ziehen, sondern auch Unternehmen. „Julia“ von Facebook zeigt euch, wie die Graph-Suche mit den Privatsphären-Einstellungen zusammenspielt und wie man diese verwalten kann.

Die Vorstellung der Graph Search verdeutlicht nun auch den Sinn und Zweck der Bezahlnachrichten (mehr Informationen zu den Bezahlnachrichten auf allfacebook.de), welche in den letzten Wochen von Facebook getestet wurden und es ermöglichen, auch ohne bestätigte Freundschaft, Nachrichten an andere Nutzer zu schreiben. Zwar war es bislang auch möglich, Nachrichten ohne vorhandene Freundschaft an fremde Personen zu versenden, jedoch landeten diese nicht in demselben Postfach wie Nachrichten von bestehenden Freunden. Bei bezahlten Nachrichten ist dies nun der Fall. Ob dies den aktuell veranschlagten Preis von 1$ rechtfertigt, bleibt abzuwarten.

Mithilfe der Graph Search wird es für Unternehmen in Zukunft also einfacher sein, relevante Nutzer proaktiv zu identifizieren und diese anschließend direkt zu kontaktieren.

Auf dieser Seite erklärt Facebook die unterschiedlichen Funktionen der Graph Search. Sofern man seinen Account auf Englisch umgestellt hat, kann man sich auf dieser Seite (ganz unten) für den Beta Test der Graph Search eintragen. Somit kommt man unter Umständen früher in den Genuss dieser neuen Funktion.

Für alle die das Event verpasst haben, hier gibt es das Facebook Event zur Vorstellung des Graph Search in voller Länge zu sehen: