Das mobile Internet und vor allem Responsive Webdesign sind relativ neue Entwicklungen. Vieles befindet sich im Wandel, die zugrunde liegenden Technologien werden laufend erweitert, verändert und verbessert. Wie bereits ausführlich erläutert, geschieht die Anpassung an das jeweilige Endgerät beim RWD auf Seite des Clients, wohingegen die Umleitung auf separate mobile Websites i.d.R. serverseitig geschieht. Verschiedene neue Ansätze versuchen die Vorteile beider Verfahren miteinander zu kombinieren. RESS beispielsweise steht für Responsive Webdesign + Server Side Components. Dabei handelt es sich im Prinzip um gewöhnliches Responsive Webdesign, allerdings mit einer partiellen Auslieferung unterschiedlicher Inhalte je nach erkanntem Browsertyp (vgl. Maurice 2012a, S. 360).

Inzwischen sind einige Usability-Experten gar der Meinung, dass eine Optimierung für bestimmte Geräteklassen nicht mehr ausreichend sei (vgl. Dahlström 2014; Ruska 2014). In diesem Zusammenhang stößt man in zahlreichen Webentwickler-Blogs auf den device-agnostic-Ansatz, der vorsieht, sich keine Gedanken mehr darüber zu machen, für welche Geräte man gestaltet. Responsive Webdesign wird dabei zwar zu Grunde gelegt, der Ansatz geht jedoch darüber hinaus (vgl. Harbour 2013; Walton 2014).

Doch es wird noch weiter gedacht: So schlägt beispielsweise Google laut Surojit Chatterjee, Head of Global Mobile Search Ads Product, künftig eine Richtung ein, bei der der Kontext, in dem sich der Nutzer gerade befindet, eine deutlich größere Rolle spielen soll als das physikalische Gerät, welches er gerade benutzt. Dies würde beispielsweise bedeuten, dass ein Nutzer, der um die Mittagszeit im Supermarkt an der Kasse ansteht, eine Seite anders präsentiert bekommt als jener, der abends gemütlich zu Hause auf der Couch surft – egal ob er dies nun an einem Smartphone, Tablet oder Laptop tut (vgl. Kim 2013b; Hof 2014). In diesem Zusammenhang kommt das Thema BigData, also die automatisierte Sammlung und Auswertung großer Datenmengen ins Spiel. Mobile Endgeräte eignen sich hierfür dank ihrer umfangreichen Sensorik und Allgegenwärtigkeit besonders (vgl. Mena 2013, S. 299ff). Für die meisten Websites – insbesondere Verlagsangebote – sind diese Trends jedoch noch nicht relevant und zudem nur schwer mit den vorhandenen Ressourcen realisierbar. Aus diesem Grund wurden sie im Rahmen dieser Arbeit nicht näher betrachtet, könnten aber Gegenstand zukünftiger wissenschaftlicher Publikationen werden.

In jedem Fall lässt sich festhalten, dass sich das Web nach wie vor in einem hochdynamischen Entwicklungsprozess befindet. Mit der flächendeckenden Verbreitung von LTE-Verbindungen, neuen Gerätehybriden, Wearables und der kontinuierlichen Weiterentwicklung des HTML-Standards steht dem mobilen Internet eine spannende Zukunft bevor.

Der Beitrag Künftige Entwicklungen des mobilen Webs erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.

Mit der Krise der „Frankfurter Rundschau“ (vgl. Spiegel Online 2012a) und dem Ende der „Financial Times Deutschland“ (vgl. Spiegel Online 2012b) zeichnet sich ab, dass sich das amerikanische Zeitungssterben auch in Deutschland fortsetzt. Von Miami bis Seattle wurde dort bereits aufgrund bröckelnder Anzeigenerlöse und schrumpfender Verkaufszahlen ein Traditionsblatt nach dem anderen eingestellt (vgl. Schwab 2009; Weichert 2009, S. 7–10). Die jüngsten IVW-Zahlen zeigen, dass es auch in Deutschland für den einen oder anderen Verlag noch schwierig werden dürfte. Und auch durch das Wachstum bei digitalen Ausgaben (ePaper) können die Rückgänge der Papierauflagen nicht ausgeglichen werden (vgl. Genios 2013; IVW 2014c). Die Branche steht unter Zugzwang und muss neue Erlösmodelle entwickeln, um Verluste im Anzeigen- und Abo-Geschäft auszugleichen (vgl. Pasquay 2013). Das starke Wachstum des stationären und mobilen Internets birgt für Verlage aber auch neue Chancen: Bereits 2013 besuchten vierzig Prozent der Internetnutzer regelmäßig ein Online-Angebot der Tagespresse (vgl. Agma 2013). Trotz aller wirtschaftlichen Herausforderungen, denen sich die Branche insbesondere am Werbemarkt gegenüber sieht, erreichen Zeitungen gedruckt, online und mobil heutzutage mehr Menschen als je zuvor, betont auch Helmut Heinen, Präsident des Bundesverbands Deutscher Zeitungsverleger (BDZV) in seiner Rede beim Zeitungskongress 2013. Fünfzig Millionen Männer und Frauen würden täglich Zeitungs-Inhalte lesen bzw. nutzen, was fast achtzig Prozent der deutschsprachigen Bevölkerung über vierzehn Jahren entspräche (vgl. Heinen 2013).

Laut einer Studie von Vibrant Media, dem weltweit führenden Anbieter kontextueller Werbelösungen, hatten im Jahr 2013 zwei Drittel (65%) der führenden deutschen Print-Medienmarken keine für das Smartphone optimierte Website. Dabei sind die Zeitungen noch überwiegend gut aufgestellt: Zumindest die führenden überregionalen Blätter und fast siebzig Prozent der regionalen Zeitungen verfügen über entsprechend optimierte Websites.

(Mehr Statistiken finden Sie bei Statista)

Deutlich schlechter hingegen sieht es bei den Websites von Magazinen aus, die sich an Leser mit einem bestimmten Interessengebiet wenden, sog. Special-Interest-Zeitschriften. Von den zehn größten dieser Magazine verfügte kein einziges über eine mobiloptimierte Website (vgl. Vibrant Media 2013). Zu den Hinderungsgründen nennt Vibrant Media keine Details. Im Bereich des E-Commerce indes führte das Marktforschungsunternehmen ComScore hierzu eine Umfrage durch. Als Grund für fehlende Mobiloptimierung wurden dabei die hohen Kosten und der große Zeitaufwand genannt, den die entsprechende Optimierung einer Website mit sich bringt. Hinzu kommen Bedenken in Bezug auf Payment und Sicherheit – Argumente die sich jedoch auf Zeitungsverlage nicht ohne Weiteres übertragen lassen (vgl. Gillner 2012). Im Folgenden werden daher mögliche Probleme mit mobiloptimierten Websites aus Sicht der Verlage behandelt.

Monetarisierung redaktioneller Inhalte

Im Sommer 2013 rief der Zeitschriftenverlegerverband VDZ seine Mitglieder dazu auf, schnell auf die Entwicklung des mobilen Internets zu reagieren und Geschäftsmodelle zu entwickeln, die nicht nur mobile Werbung, sondern auch redaktionelle Bezahlinhalte (Paid-Content) und den Produktkauf mittels mobiler Endgeräte umfassen (vgl. Hauser 2013). Das viel diskutierte Thema Paid-Content allein wird allerdings wohl nicht ausreichen um die sinkenden Printerlöse auszugleichen: Laut einer Studie der Hochschule Offenburg ist zwar die Relevanz lokaler Informationen und Services hoch, die Bereitschaft für lokale Informationen auf dem Smartphone oder Tablet zu bezahlen jedoch eher gering. Gute Chancen für lokale Verlage sieht die Studie indes im Bereich des M-Commerce (vgl. Hochschule Offenburg 2013). Allerdings setzen die Verlage primär auf Apps anstatt auf mobile Websites – denn wie bereits erläutert, lassen sich diese durch die Möglichkeit des zentralen Vertriebs über Appstores leichter monetarisieren (vgl. Tißler 2010). Laut einer Studie des Beratungsunternehmens DSP-Partners und des Testing-Anbieters testhub werden sieben von zehn Apps in den Top-10-Rankings der aktivsten App-Publisher von Verlagen angeboten. Allein die vierzehn näher untersuchten Verlage hatten insgesamt 757 Smartphone- & Tablet-Apps in den Appstores. Obwohl der Markt von kostenlosen Apps dominiert wird, forcieren die Verlage eher kostenpflichtige Apps (vgl. DSP 2013).

Valide Reichweitenmessung mobiler Angebote

Webbasierte Verlagsangebote sehen sich im Hinblick auf mobile Endgeräte mit weiteren Problemen konfrontiert: So fordert beispielsweise die Informationsgemeinschaft zur Feststellung der Verbreitung von Werbeträger (IVW) seit Juli 2013 die getrennte Messung von mobilen Angeboten, was zusätzlichen technischen Aufwand mit sich bringt (vgl. IVW 2014b). Insbesondere bei anpassungsfähigen Websites widerspricht der Ansatz einer gesonderten Ausweisung mobiler Zugriffe dem eigentlichen Grundgedanken des Responsive Webdesigns – schließlich gibt es hier nur eine zentrale Codebasis. Für die valide Messung der Portale ist die Firma INFOnline zuständig (vgl. INFOnline 2014). Diese hat mit dem SZM-Tag 2.0 zwar erst kürzlich ein neues, plattformübergreifende Messverfahren vorgestellt (vgl. INFOnline 2013; Berger 2014) – trotzdem muss die Trennung zwischen mobilen und stationären Besuchern auf Responsive Websites nach wie vor durch den Websitebetreiber sichergestellt werden (vgl. INFOnline et al. 2014) [vgl. Kriterium 11].

Anbindung der Redaktionssysteme

Redaktionssysteme müssen ebenfalls an die neuen Anforderungen angepasst werden. Leser von Online Zeitungsangeboten erwarten Informationen über aktuelle Geschehnisse möglichst zeitnah und zudem über verschiedene Kanäle (Online, Mobile, Print, ePaper usw.). Hier geht der Trend deutlich in Richtung Single Source Publishing: Dabei ist das Ziel, Inhalte in möglichst kleine Bausteine aufzuteilen und möglichst medienneutral an nur einer Stelle zu pflegen. Aus einer zentralen Quelle können dann sämtliche Kanäle beliefert werden (vgl. Closs 2011, S. 3–7).

Werbevermarktung

Dass viele Verlage bislang auf einen zentralen, vollständig anpassungsfähigen Auftritt für sämtlichen Endgeräte verzichten, wird z.T. auch auf die Vermarkter zurückgeführt, die sich bei ihren Werbeanzeigen von festen Pixelgrößen und eindeutig definierten Anzeigenpositionierungen verabschieden müssten. Die Verlage befürchten offenbar, dass ihnen wichtige Erlöse verloren gehen, wenn sie zugunsten eines Responsive Webdesigns auf die klassischen Bannerformate verzichten würden (vgl. Krauß 2014). Mit anpassungsfähigen, neuen Werbeformen wie beispielsweise Responsive und Native Ads stehen zwar bereits Alternative bereit (vgl. Schneider 2013; Dziallas 2014), allerdings hält der größte Verbund deutscher Tageszeitungsvermarkter OMS bislang an einer klaren Trennung zwischen mobiler und stationärer Werbung fest (vgl. OMS 2014) [vgl. Kriterium 3].

Beispiele für mobiloptimierte Ansätze aus der Verlagsbranche

Viele deutsche Printtitel können im Bereich des mobilen Internets bereits beträchtliche Reichweiten vorweisen: Unter den zehn größten mobilen Websites, mit jeweils mehr als vierzig Mio. mobilen Besuchen (Visits) im Monat, findet sich die Bild, der Spiegel und der Focus. Auch die Süddeutsche Zeitung, die Welt, die Zeit, der Stern und die Frankfurter Allgemeine Zeitung sind weit vorne dabei und können monatlich mit jeweils mehr als sechs Mio. mobilen Visits aufwarten. Die IVW-Zahlen zeigen, dass inzwischen fast jeder dritte Leser auf die großen Internetangebote von unterwegs aus zugreift. Zumindest die großen Verlagshäuser scheinen also das mobile Internet als Chance erkannt zu haben (vgl. Hauser 2013; IVW 2014a). In diesem Abschnitt werden einige ausgewählte mobile Angebote aus der Verlagswelt vorgestellt.

Bild.de als Beispiel für eine dedizierte mobile Website

Das Angebot der Bild-Zeitung sticht durch überdurchschnittliche absolute Besucherzahlen und einen hohen Anteil mobiler Visits aus dem Gesamtangebot deutscher Zeitungswebsites heraus. Im April 2014 verzeichnete die mobiloptimierte Variante von Bild.de über 92 Mio. Visits – zwei Drittel der gesamten Besuchszahlen, die im selben Monat bei etwa 279 Mio. Visits lagen (vgl. IVW 2014a). Der Bild.de-Verlag Axel Springer gilt in der Branche als digitaler Vorreiter. Unter dem Begriff BildPLUS wurde ein erfolgreiches Paid Content Modell in das Online-Angebot integriert. Zudem sind auf der Seite Geo-Lokalisierungsfunktionen integriert, die beispielsweise dazu genutzt werden, den Nutzern relevante Neuigkeiten aus der Umgebung anzuzeigen (vgl. Bild.de 2011; IT Times 2013).

Nachdem der mobile Auftritt bereits im September 2011 komplett überarbeitet wurde (vgl. Bild.de 2011), fand nun April 2014 ein erneuter vollständiger Relaunch statt. Erwähnenswert ist an dieser Stelle, dass die mobiloptimierte Variante teilweise nach den Prinzipien des Responsive Webdesigns umgesetzt wurde. Trotzdem verzichtet Bild auch weiterhin nicht auf eine Trennung zwischen stationären (www.bild.de) und mobilen Endgeräten (m.bild.de): Zugriffe von Desktop-PCs werden auch weiterhin auf die Desktop-Variante umgeleitet, während mobile Endgeräte auf die neue mobile Website gelangen. Durch das Responsive Design der mobilen Website geht Axel Springer auf die große Vielfalt der als mobil zu definierenden Geräte und ihre unterschiedlichsten Display-Formate ein (vgl. Schade 2014b; Zillgens 2013, S. 10–13).

Boston Globe als Beispiel für Responsive Webdesign

Eine der ersten Zeitungen und eine der ersten Websites überhaupt, die die Prinzipien des Responsive Webdesigns konsequent berücksichtigt hat, ist der Internetauftritt der Boston Globe (vgl. BostonGlobe.com 2014). Die Seite passt sich über sechs Zwischenschritte hinweg in Größe, Spaltenbreite, Funktionalität, Navigation und Struktur an das jeweilige Bildschirmformat an. Zudem wurden Möglichkeiten zum Speichern einzelner Artikel implementiert, die es ermöglichen, die Seite auch Offline zu verwenden. Die Website erhielt viel Aufmerksamkeit sowohl von Seiten der Verlagsbranche als auch von Webentwicklern. Da die Website u.a. über kostenpflichtige Inhalte und native Werbeformen finanziert wird, konnte die Positionierung von Werbebannern offenbar vernachlässigt werden – auf der Seite findet sich generell kaum (klassische) Bannerwerbung (vgl. Rowinski 2011; O’Regan 2011).

Der Beitrag Probleme der Verlage mit mobilen Websites erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.

Die Optimierung einer Website für mobile Endgeräte ist immer mit einem Mehraufwand verbunden. Viele Website-Betreiber scheuen offenbar die Kosten, die mit der mobilen Webentwicklung verbunden sind – ein großer Teil der Websites ist noch nicht für das mobile Web gerüstet (vgl. Hochschule Rhein-Main 2013, S. 9–10; Haufe 2013; Vibrant Media 2013; Gillner 2012). Indirekt kann aber gerade der Verzicht auf mobile Websites teuer werden, bedenkt man wie hoch der Anteil derer ist, die inzwischen mobil im Internet unterwegs sind.

Nielsen schreibt in seinem Mobile Usability-Buch „Build a separate mobile-optimized site (or mobile site) if you can afford it“ (Nielsen et al. 2012, S. 18) und suggeriert damit, dass eine separate mobile Website teurer sei, als die Umsetzung einer anpassungsfähigen Seite. Die Erstellung dedizierter mobiler Websites ist entgegen anders lautender Meinungen jedoch in der Regel nicht kostenintensiver als die Umsetzung einer Responsive Website. Wie bereits erläutert, ist letzteres (richtig umgesetzt) in etwa genauso aufwändig. Erst wenn zusätzlich zur stationären und mobilen Website noch separate Varianten für Tablets oder zudem gar SmartTVs hinzukommen, verschieben sich die Kosten zu Gunsten einer Responsive Website (vgl. Grötsch 2013; Lawson 2012b). In jedem Fall sollte man bedenken, dass Responsive Webdesign ein relativ neuer Ansatz ist, der es erforderlich macht, dass sich Entwickler und Designer zunächst weiterbilden, um die nötigen Kompetenzen zu erwerben. Zudem müssen häufig Prozesse umgestellt werden, da sich das lineare Vorgehen aus dem klassischen Webdesign für Responsive Webdesign nicht gänzlich eignet (vgl. Moth 2013; Frost 2012a) [vgl. Kriterium 16].

Langfristig gesehen stellt sich Responsive Webdesign als das günstigere Modell heraus, da hier nur eine einzige Content- und Codebasis gepflegt werden muss. Betreibt man zwei separate Websites, müssen Änderungen und Wartungen häufig bei beiden Varianten durchgeführt werden. Wird zudem noch die mobile Variante von einer anderen Agentur betreut als die stationäre, entsteht darüber hinaus zeitintensiver Abstimmungsaufwand [vgl. Kriterium 17]. Erwähnenswert ist auch, dass die Gerätedatenbank, die im Zusammenhang mit der User Agent Analyse die Umleitung auf die mobile Variante sicherstellt, stetig aktuell gehalten werden muss (vgl. Grötsch 2013; Frost 2012a) [vgl. Kriterium 18].

Der Beitrag Finanzielle Aspekte bei der Entscheidung zwischen Responsive Webdesign und separater mobiler Website erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.

Ob eine mobile Website separat oder als Responsive Website umgesetzt werden sollte, hängt u.a. auch von dem Ziel ab, das verfolgt wird. Eine Zeitungswebsite wie beispielsweise WN.de verfolgt andere Ziele als ein E-Commerce Anbieter, wie beispielsweise der Online-Versandhändler Zalando.de. Die unterschiedlichen Konsequenzen für die mobile Website lassen sich am besten anhand von Beispielen erläutern [vgl. Kriterium 1]:

Zeitungs- und Nachrichtenwebsites

Das Ziel einer Zeitungswebsite liegt vor allem darin, dem Leser auf möglichst allen möglichen Endgeräten ein angenehmes Leseerlebnis zu bieten, ihn damit lange auf der Seite zu halten und möglichst zum Wiederkommen zu bewegen. Schließlich verdient ein Verlag durch die Einblendung von Werbeanzeigen oder durch kostenpflichtige Inhalte (Paid Content) (vgl. Malcher 2012). Zudem erwarten insbesondere Besucher einer Nachrichtenwebsite, dass sie auf der mobilen Variante dieselben Inhalte finden wie auf der Desktop-Variante. Die Behauptung von Usability-Guru Jacob Nielsen, dass Inhalte auf einer mobilen Website deutlich reduziert werden sollten, wird von vielen Fachleuten in Frage gestellt, besonders da seine Erkenntnisse auf Untersuchungen aus den Jahren 2009 und 2011 beruhen, als die Technik von Smartphones und Tablets noch nicht so weit fortgeschritten war. Es gilt als „Mythos des mobilen Webs“, dass Nutzer mobiler Endgeräte nicht auf alle Informationen und Möglichkeiten zugreifen wollen, die auch Desktop-Nutzern zur Verfügung stehen. Demnach kann Responsive Webdesign eine durchaus interessante Alternative für Zeitungswebsites darstellen – zumal zahlreiche große Printtitel wie beispielsweise das TIME Magazin, die Boston Globe oder die Metro inzwischen bereits auf diese Technologie setzen (vgl. Frost 2012b; Clark 2012, S. 10–12; Nielsen et al. 2012, S. 18,26; Phillip 2013; BostonGlobe.com 2014; Metronews.ca 2014; Time.com 2012).

Internet-Versandhändler/E-Commerce-Websites

Das Ziel eines Internet-Versandhändlers besteht wiederum darin, eine möglichst hohe Konversionsrate zu erzielen, also möglichst viele Kunden zum Kauf zu bewegen. Ein besonders benutzerfreundlicher Kaufprozess ist dabei nur schwerlich responsive umzusetzen. Hinzu kommt, dass Online-Versandhändler häufig gesondertes Online-Marketing speziell für mobile Endgeräte betreiben. Außerdem ist es einfacher, eine dedizierte mobile Website im Hinblick auf die Performance zu optimieren – gerade im Onlinehandel zählt jede Millisekunde. Zusammengenommen spricht E-Commerce also eher für die Nutzung einer separaten mobilen Website – insbesondere wenn diese an eine gesonderte Marketingstrategie gekoppelt ist (vgl. Fay 2014; Voelcker 2013; Baumgartner 2013) [vgl. Kriterium 2]. Sowohl Ebay, als auch Amazon und Zalando betreiben gesonderte mobile Portale mit optimierten Prozessen für mobile Endgeräte (vgl. Ringsdorff 2013). Für neue, kleinere Shops kann aber dennoch eine Responsive Website besser geeignet sein, insbesondere wenn der Betrieb einer zusätzlichen mobilen Website nur schwer gestemmt werden kann und ohnehin keine gesonderte mobile Marketingstrategie geplant ist (vgl. Infofactory AG 2013). So stellte das E-Business Magazins t3n.de erst kürzlich fünf anpassungsfähige E-Commerce Websites vor (vgl. Tißler 2013) [vgl. Kriterium 7].

Reine Informationswebsites von Unternehmen, Einzelhandel und Co.

Eine weitere wichtige Website-Kategorie sind Informationsseiten von lokalen Einzelhändlern oder Dienstleistern. Viele Ärzte, Rechtsanwälte, Discotheken und Geschäfte betreiben Websites mit kompakten Informationen über ihr Unternehmen, das Produkt- bzw. Leistungsspektrum, Anfahrtsbeschreibung und ähnlichem (vgl. Fabricius 2013). Der Umfang solcher Websites ist meist überschaubar und lässt sich gut in Form einer Responsive Website realisieren. Starbucks.com beispielsweise wird oftmals als Paradebeispiel für gutes Responsive Design genannt (vgl. Wentworth 2013). Bemerkenswert ist auch, dass der Café-Betreiber den kompletten Styleguide für das Responsive Design der Seite veröffentlicht hat (vgl. Starbucks.com 2013).

Fazit zur Bedeutung von Art, Inhalten und Zielen einer Website für die Technologieentscheidung

Zusammenfassend lässt sich feststellen, dass das Ziel, das Geschäftsmodell und der Inhalt einer Website, einen wesentlichen Einfluss auf die technologische Entscheidung haben müssen. Ob eine mobile Website nur ein reduziertes Abbild der Desktop-Website sein sollte, ist inzwischen äußerst umstritten. Einig ist man sich darin, dass die Anordnung von Inhalten auf einer mobilen Seite gut durchdacht werden müssen. Da auf kleinen Displays nicht so viel Inhalt im sichtbaren Bereich angezeigt werden kann wie auf Desktop-Geräten, muss priorisiert werden, was oben steht und was nur mittels Scrollen erreichbar ist (vgl. Schade 2014a; Pernice 2014) [vgl. Kriterium 6]. Das bereits im Zusammenhang mit Media Queries erwähnte CSS Flexible Box Layout Module kann dabei beim Responsive Webdesign hilfreich sein. Zudem stellt sich die Frage ob unterschiedliche Marketing- und Contentstrategien auf dem mobilen und stationären Portal gefahren werden sollen. Sollen auf dem mobilen Portal bewusst andere Inhalte dargestellt werden als auf der stationären Seite, spricht dies eher für die Umsetzung separater Websites (vgl. Ghazarian 2014; Butters 2013) [vgl. Kriterium 8].

Der Beitrag Responsive Webdesign in Abhängigkeit von Art, Inhalten und Zielen einer Website erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.

Aufgrund des begrenzten Platzangebotes und des Nutzungskontextes ist es, besonders bei mobilen oder mobiloptimierten Websites erforderlich, sich auf das Wesentliche zu fokussieren (vgl. Herzberger 2012). Hinzu kommt die große Bandbreite unterschiedlicher Geräte und Bildschirmauflösungen. An erster Stelle sollte demnach stehen, sich detailliert zu überlegen, was die Kernaussagen und -funktionen der Website sind, damit diese in den Mittelpunkt gerückt werden können (vgl. Zillgens 2013, S. 2).

Ein großer Vorteil in der Umsetzung separater mobiler Websites liegt dabei darin, dass man sie unabhängig von der Desktop-Variante umsetzen und optimal an die erwarteten Bedürfnisse der mobilen Besucher anpassen kann. Eine möglicherweise bereits vorhandene Desktop-Website kann in diesem Fall unverändert beibehalten werden, was es dem Betreiber zunächst einfach macht [vgl. Kriterium 13]. Allerdings sollte bedacht werden, dass die Pflege zweier separater Websites und das entsprechende Vorbereiten der Inhalte wiederum einen dauerhaften Mehraufwand darstellen. Um darüber hinaus sicherzustellen, dass die dedizierte mobile Website auch auf aktuellen Endgeräten stets optimal dargestellt wird, muss diese immer wieder an die Anforderungen jener Geräte angepasst werden (vgl. Ressel 2013; Smartz.com 2014).

Entscheidet man sich hingegen für ein geräteübergreifendes reaktionsfähiges Layout, ist eine vollständige Überarbeitung des bestehenden HTML-Markups notwendig – denn ein vorhandenes, komplexes System lässt sich nicht ohne weiteres auf beliebige Auflösungen skalieren. Es steckt ein hoher konzeptioneller Aufwand dahinter, die Webseiten für alle Auflösungen benutzerfreundlich zu gestalten und gleichzeitig alle Funktionen zur Verfügung zu stellen, die der Nutzer von der Desktop-Variante gewöhnt ist (vgl. Ressel 2013). Laut dem britischen Designer Mark Boulton empfiehlt es sich in diesem Prozess, die Website nicht wie üblich auf einer willkürlich definierten Leinwand von außen nach innen zu konzipieren, sondern stattdessen von innen nach außen vorzugehen. Websites sollten demnach ausgehend vom Inhalt entwickelt werden (vgl. Boulton 2011). Dies deckt sich mit dem bereits vorgestellten Mobile First Gedanken, der häufig in Zusammenhang mit Responsive Webdesign erwähnt wird (vgl. Zillgens 2013, S. 4). Bedacht werden sollte auch, dass anpassungsfähige und flexible Grids in Layout-Programmen schlecht abgebildet werden können – diese arbeiten schließlich mit festen Pixelgrößen. Es empfiehlt sich daher bereits in einer frühen Phase direkt im HTML-Code zu arbeiten um Breakpoints, flexible Spalten und Medien abzubilden (vgl. Hellwig 2012) [vgl. Kriterium 16].

Der im Gegensatz zur Umsetzung einer separaten mobilen Website höhere initiale Aufwand kann sich schnell rentieren, da nicht zwei Websites parallel gepflegt werden müssen und sich eine Responsive Website auch an neue Endgeräte i.d.R. besser anpassen kann (vgl. Smartz.com 2014; Kim 2013a, S. 31).

Der Beitrag Aufwand Responsive Webdesign vs. dedizierte mobile Website erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.

Ein Thema, das insbesondere im Zusammenhang mit dedizierten mobilen Websites auftaucht, ist deren Problematik im Hinblick auf Suchmaschinen (SEO-Optimierung). Kritiker dedizierter mobile Websites verweisen auf die sog. Duplicate Content-Problematik, die beim Betrieb mehrerer separater Websites mit ähnlichen oder identischen Inhalten auftritt (vgl. Byers 2013). Google nimmt Seiten, die weitgehend identische Inhalte enthalten, aus seinem Suchindex und straft (im schlimmsten Fall) beide Websites ab, sodass eine hohe Position in den Suchtreffern kaum noch zu erreichen ist (vgl. Google Inc. 2014). Genau dies ist jedoch bei separaten mobilen Websites der Fall: In der Regel liegt die Desktop-Website unter der Stammdomain (bspw. www.bild.de), während die mobile Website mittels Subdomain (bspw. m.bild.de) erreichbar ist. Ebenfalls möglich ist, dass die Domain zwar identisch bleibt, der Server jedoch dynamisch unterschiedliche HTML-Dokumente abhängig vom User-Agent, der die Seite angefordert hat, ausliefert (vgl. Google Inc. 2013).

Google gibt zu jedem Szenario klare Handlungsempfehlungen für Websitebetreiber heraus. Bei gesonderten URLs sollte auf der Desktop-Seite folgende Annotation hinzugefügt werden:

Auf der mobilen Seite muss zudem der sog. Canonical-Tag ergänzt werden:

Bei dynamischer Auslieferung ohne Änderung der Subdomain empfiehlt Google den Websitebetreibern, mittels eines Vary-HTTP-Headers mitzuteilen, welche Variante jeweils gerade ausgeliefert wird. Der Vary-HTTP-Header ist Bestandteil der Serverantwort auf einen HTTP-Request. In beiden Fällen kann Google somit erkennen, dass es sich nicht um Täuschungsversuche, sondern um Maßnahmen zur Mobiloptimierung handelt (vgl. Google Inc. 2013) [vgl. Kriterium 4].

Dennoch rät Google offiziell zur Verwendung von Responsive Webdesign und verweist darauf, dass der Google-Crawler effizienter arbeiten kann, wenn nur eine Seite vorliegt. Schließlich müsse der Crawler im Falle einer dedizierten mobilen Website die doppelte Anzahl an Unterseiten erfassen – dies könne sich negativ auf die Sichtbarkeit des Gesamtangebotes im Google Suchindex auswirken. Weiterhin wird im Google Entwicklerblog darauf hingewiesen, dass Responsive Websites schneller laden, weil vorher keine Umleitung erfolgen muss und dass sich Inhalte von Responsive Websites auch geräteübergreifend leichter teilen und verlinken lassen (vgl. Google Inc. 2013). Das Teilen von Links zu Websites mit separaten Versionen für mobile und stationäre Endgeräte führt oft zu Problemen, da man i.d.R. nicht weiß, ob der Link von einem mobilen oder von einem stationären Endgerät aus angeklickt wird – unter Umständen betrachten Nutzer dann nicht die für ihr Gerät optimale Version der Seite (vgl. Slegg 2013). Besonders ungünstig ist dies, wenn auf der mobilen Website bestimmte Inhalte wie Umfragen, Videos oder sonstige Medien weggelassen werden. Der folgende Screenshot zeigt, wie dies beispielsweise bei WN.de zu Situationen führt, in denen Nutzer den mobilen Link zu einem Artikel teilen, obwohl die stationäre Version der Webseite über erweiterte Inhalte verfügt:

Deshalb rät Webentwicklerin Florence Maurice dazu, Links zu jeweils anderen Version im oberen Bereich der Seite zu platzieren, damit Nutzer jederzeit von der mobilen Version zur Desktop-Version wechseln können und umgekehrt. Sollte eine automatische Umleitung vorgesehen sein, müsse der Nutzer unbedingt im Vorfeld gefragt werden, ob er tatsächlich zur für sein jeweiliges Endgerät optimierten Variante wechseln möchte. Derartige Maßnahmen kann man sich auf einer Responsive Website sparen, da es schließlich lediglich eine Seite für alle Geräte gibt (vgl. Maurice 2012a, S. 358f) [vgl. Kriterium 5].

Jedoch finden sich in Fachkreisen auch SEO-Argumente, die gegen Responsive Webdesign sprechen. So führt der Suchmaschinen-Experte Bryson Meunier an, dass Menschen auf mobilen Endgeräten andere Dinge suchen bzw. finden möchten, als auf Desktop-Geräten. So behauptet Meunier, dass mobile Internetnutzer ihre Suchbegriffe oft mit Stichworten wie „mobile“, „Android“ oder „iPhone“ ergänzen – und dann primär separate mobile Websites als Ergebnisse erhalten, anstatt geräteübergreifende Responsive Websites. Ebenso merkt Meunier an, dass viele mobile Websites auf Spezialfunktionen mobiler Endgeräte zurückgreifen und als Treffer auf einem Desktop-Gerät keinen Sinn ergeben. Zu nennen seien hier beispielsweise Filialfinder, die auf den Standort des Nutzers zugreifen oder Websites, die einen Barcode-Scanner beinhalten, der wiederum die Kamera des Gerätes benötigt (vgl. Meunier 2013) [vgl. Kriterium 10]. Seine Argumentation ergibt jedoch nur dann Sinn, wenn Betreiber separater mobiler Websites auch separate SEO-Maßnahmen für selbige umsetzen.

Ob eine Website von Google als „mobile friendly“ eingestuft wird, lässt sich übrigens mit einem Google Webmaster Tool ermitteln.

Der Beitrag Suchmaschinenoptimierung bei mobilen Websites erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.

Mobile Endgeräte bieten durch ihre technischen Eigenheiten Möglichkeiten, die mit klassischen Desktop-PCs bisher nicht denkbar waren. Ein Beispiel wäre die Verbesserung der Usability einer mobilen Website, indem man an bestimmten Stellen die Bedienung per Gestensteuerung ermöglicht. So ließen sich beispielsweise die Bilder in einer Fotostrecke mittels Wischen (engl. Swipen), also einer raschen Fingerbewegung quer über das Display durchblättern (vgl. Maurice 2012a, S. 170–172; W3C 2013d). Einige Websites prüfen, ob das Gerät hochkant oder quer gehalten wird und schalten beispielsweise Videos oder Fotostrecken abhängig davon in einen Vollbildmodus (vgl. O’Donoghue 2013). Eine weitere einfache Möglichkeit, die Usability mobiloptimierter Websites zu verbessern, ist das Kennzeichen von Formularfeldern mit passenden HTML5 Input Types. Das jeweilige mobile Endgerät kann dann ein optimiertes Tastaturlayout anzeigen, um die Eingabe zu erleichtern (vgl. West 2012):

Insbesondere bei Responsive Websites kann man jedoch nicht davon ausgehen, dass die Benutzer über die nötige technische Ausstattung wie beispielsweise ein berührungsempfindliches Display verfügen. Daher sollte stets auch die Möglichkeit zur Bedienung mit Maus und Tastatur sichergestellt werden (vgl. Maurice 2012a, S. 170).

Auf der anderen Seite gelten für mobile Endgeräten einige Einschränkungen, die auf stationären PCs i.d.R. nicht zum Tragen kommen. So wird beispielsweise das Flash-Plug-in auf vielen mobilen Endgeräten nicht unterstützt (vgl. Adobe 2011; Jobs 2010). Auch Java-Applets, also in der Programmiersprache Java realisierte Programme die in Websites integriert sind, können auf vielen Tablets und Smartphones nicht genutzt werden (vgl. Java.com 2013) [vgl. Kriterium 9].

Der Beitrag Mobile Spezialfunktionen erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.

Wie bereits im vorherigen Beitrag erläutert, sollte bei der Erstellung eines mobilen Angebotes besonderer Wert auf die Performance, d.h. auf kurze Lade- und schnelle Reaktionszeiten gelegt werden. Folgende Tipps geben (ohne Anspruch auf Vollständigkeit) einen groben Überblick über Optimierungsansätze:

Einsatz von Tools

Um die Effektivität von Optimierungen überprüfen zu können, sollte man sich entsprechender Tools bedienen. Alle Browser bieten beispielsweise Erweiterungen an, um die Netzwerkkommunikation zu verfolgen. Zu nennen ist hier beispielsweise das Firebug Plug-in des Browsers Firefox (vgl. Maurice 2012a, S. 118f).

Zudem existiert im Web eine ganze Reihe von kostenlosen Angeboten (beispielsweise unter mobitest.akamai.com), auf denen man die Performance einer Website mit unterschiedlichen Geräten testen kann (vgl. Gardner et al. 2012, S. 47).

Codeoptimierung

Jeglicher Code sollte im Hinblick auf die Performance optimiert werden. Das bedeutet beispielsweise, möglichst auf Tabellenlayouts oder HTML-Formatierungsangaben zu verzichten und dies stattdessen vollständig über CSS zu realisieren. Sowohl im HTML- als auch im CSS-Code sollte nur das stehen, was wirklich gebraucht wird (vgl. Maurice 2012a, S. 119–120). Mit sog. CSS- und JavaScript Minifiern lässt sich Code von überflüssigen Zeilenumbrüchen, Kommentaren und Leerzeichen bereinigen (vgl. Chilton 2014).

Auch die Reihenfolge der Elemente im Code spielt eine Rolle: CSS Dateien sollten möglichst weit oben im HTML-Dokument eingebunden werden, JavaScript hingegen besser unten – somit kann die Seite früher angezeigt werden, auch wenn noch nicht jedes Script aktiv ist (vgl. Zillgens 2013, S. 331–332).

Reduktion von HTTP-Requests

Für jedes auf einer Website eingebundene Element (Bilder, JavaScript-Dateien usw.) muss der Browser eine einzelne Anfrage (HTTP-Request) an den Server senden. Ein Browser arbeitet die hierzu benötigten Verbindungen zum Server gemäß der Spezifikationen des HTTP-1.1 Protokolls jedoch nicht alle parallel zueinander ab –maximal sechs Anfragen können gleichzeitig verarbeitet werden. Jede weitere Anfrage muss „warten“, bis eine andere beendet wurde. Jeder HTTP-Request erzeugt dabei einen gewissen „Verwaltungsaufwand“, den sog. Overhead. Könnte der Browser alle benötigten Dateien gleichzeitig abrufen, würde dieser Overhead nur einmalig Zeit kosten – da die Abrufe jedoch nacheinander ablaufen, summiert sich der Zeitaufwand. Die Overheads sind zwar nicht groß, benötigen dennoch eine gewisse Übertragungszeit. Hierbei spielt die bereits erwähnte Latenz eine Rolle – damit ist allgemeinverständlich ausgedrückt die Reisezeit gemeint, die der Informationsaustausch zwischen Client und Server benötigt – ohne das überhaupt Nutzdaten übertragen wurden. Latenzen sind bei Mobilfunkverbindungen technisch bedingt grundsätzlich höher als bei der Übertragung per Kabel (vgl. Zillgens 2013, S. 318–320).

Aus diesem Grund sollte die Anzahl der HTTP-Requests so gering wie möglich gehalten werden. Erreichen lässt sich dies beispielsweise durch das Zusammenführen mehrerer JavaScript- oder CSS-Dateien zu jeweils einer Datei. Für kleine Grafiken und Icons bieten sich CSS-Sprites an. Hierbei werden mehrere Einzelgrafiken in einer größeren Bilddatei zusammengefasst. Via CSS und der Angabe background-position wird dann anstelle der Originalgrafik ein Ausschnitt aus jener großen Bilddatei angezeigt. Auch Social-Media-Buttons verursachen unnötig viele HTTP-Requests und sollten (sofern möglich) vermieden bzw. durch Grafiken oder einfache Links ersetzt werden (vgl. Zillgens 2013, S. 321-329, 337-339,347-348).

Asynchrones Laden via Ajax und Lazy Loading

Ebenfalls kann sich das asynchrone Laden von Inhalten beträchtlich auf die Ladezeiten auswirken. Dabei wird bei bestimmten Elementen der Seite bewusst darauf verzichtet, sie beim Hauptladevorgang mit herunterzuladen. Man lädt die Komponenten (Bilder usw.) dann beispielsweise nach, sobald sie beim Scrollen in den sichtbaren Bereich kommen. Mittels der auf JavaScript und XML basierenden Technologie Ajax lassen sich auch ganze Teilbereiche der Seite nachladen, ohne die komplette Website neu zu laden (vgl. Zillgens 2013, S. 345–346; Maurice 2012a, S. 121).

Sonstige Hinweise zur Performance-Optimierung

Wie eingangs bereits erwähnt, ist das Thema Performance-Optimierung überaus umfangreich. Es existieren zahlreiche weitere Möglichkeiten, die Performance einer Website zu verbessern. Zu nennen sind hier beispielsweise die komprimierte Übertragung (GZIP), Caching, die Nutzung von Content Delivery Networks, HTML5 Web Storage oder das async-Attribut – weitere Informationen hierzu finden sich unter den entsprechenden Keywords im Netz (vgl. Zillgens 2013, S. 351; Maurice 2012a, S. 125–131; W3C 2013f).

Der Beitrag Performance-Optimierung mobiler Websites erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.

Ein zentrales Argument, welches Verfechter separater mobiler Websites häufig anführen, ist deren bessere Performance. Responsive Webdesigns müssen mit einer einzigen Codebasis sämtliche Geräte bedienen – es ist kaum vermeidbar, dass Daten heruntergeladen werden, die dem jeweiligen Endgerät ohnehin verborgen bleiben. Dedizierte mobile Websites lassen sich einfacher optimieren – zumal dort wirklich nur die Inhalte geladen werden müssen, die auf mobilen Endgeräten tatsächlich benötigt werden (vgl. Rosewell 2013). Der Web Performance Forscher Guy Podjarny ermittelte im Rahmen einer Untersuchung von 347 Responsive Websites, dass 86% der Seiten in der kleinsten Darstellungsvariante nur geringfügige bis gar keine Performance-Vorteile gegenüber der größten Variante vorweisen konnten (vgl. Podjarny 2012). Allerdings liegt dieses schlechte Verhältnis oftmals vermutlich weniger in der Technologie begründet, sondern stellt wohl eher eine Folge mangelhafter Umsetzung durch die Betreiber dar – an Informationen zur Performance-Optimierung, auch im Responsive Webdesign, mangelt es in der Literatur nicht. Allerdings ist diese mit einem Mehraufwand verbunden, der letztendlich zu höheren Entwicklungskosten führen kann (vgl. Kim 2013a, S. 34–35).

Insbesondere im Mobile Commerce wirkt sich jede Sekunde mehr an Ladezeit jedoch signifikant auf die Konversionsrate und somit auf direkt auf Umsätze aus. Der amerikanische Digital Marketing Dienstleister „TagMan“ untersuchte den Zusammenhang zwischen der Reaktions- und Ladezeit einer Website und den Kaufabschlüssen. Dabei wurde festgestellt, dass eine Verzögerung der Ladezeit um nur eine Sekunde die Konversionsrate bereits um 6,7% vermindert. Weiterhin hat die Verzögerung eine Verminderung der Pageviews um elf Prozent, sowie der Kundenzufriedenheit um sechzehn Prozent zur Folge (vgl. TagMan 2012).

Die Abbildung zeigt, dass jede weitere Sekunde Verzögerung die Konversionsrate weiter reduziert – erst bei einer Seiten-Ladezeit von sieben Sekunden wird ein Plateau erreicht, ab dem eine weitere Verzögerung keine signifikanten Nachteile mehr nach sich zieht (vgl. Everts 2014). Der Webperformance-Spezialist Bruce Lawson rät daher sogar dazu, bei begrenzter Zeit die Aufmerksamkeit eher auf Performanceoptimierung zu lenken, anstatt die Website durch die Implementation von Media Queries in Bezug auf Layout und Usability zu optimieren (vgl. Lawson 2012a) [vgl. Kriterium 15].

Das Thema Performance-Optimierung geriert mit der zunehmenden Verbreitung von schnellen DSL-Anschlüssen eine Zeit lang in den Hintergrund. Doch mit dem Aufkommen des mobilen Webs gewann das Thema wieder mehr Aufmerksamkeit: Mobile Datenverbindungen sind derzeit in vielen Regionen noch nicht optimal – und selbst beim schnellen Übertragungsstandard LTE ist die Latenz höher als beim kabelgebundenen DSL-Anschluss.

Positiver Nebeneffekt einer gut optimierten Responsive Website ist, dass auch die stationäre Variante von besserer Performance profitiert: Untersuchungen von Amazon, Yahoo und Microsoft bestätigen, dass selbst kleinste Verzögerung im Bereich von 100ms Desktop-PC Nutzer zum Verlassen der Seite bewegen können. Eine Langzeitstudie von Google zeigte auf, dass Nutzer ihre Aktivität fünf Wochen lang reduzierten, selbst wenn der verzögerte Seitenaufbau bereits behoben wurde. Performanceoptimierung ist demnach auch im Desktop-Bereich alles andere als sinnlos. Eine gut durchdachte und sauber umgesetzte Responsive Website, die auch bei mittelmäßigen mobilen Datenverbindungen noch benutzbar ist, wird auf Desktop-PCs enorme Geschwindigkeiten erzielen. Dies kann sich in erheblicher Weise auf die Zufriedenheit der Benutzer auswirken (vgl. Wroblewski 2011, S. 23–24).

Informationen zur Optimierung von Websites in Bezug auf deren Performance füllt ganze Bücher (vgl. Stefanov 2012), in einem folgenden Beitrag werde ich die Möglichkeiten daher nur grob umreißen.

Der Beitrag Performance im Responsive Webdesign erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.

Um den Anforderungen der diversifizierten mobilen Endgeräte gerecht zu werden, sollten auch Schriftgrößen in relativen anstatt absoluten Einheiten definiert werden. Denn Pixelangaben suggerieren bei Schriften eine feste Größe, die aufgrund von unterschiedlichen Pixeldichten und Browser-Zoomeinstellungen faktisch so in den seltensten Fällen vorhanden ist. Relativ definierte Schriftgrößen stehen in Bezug zueinander und können dadurch einfacher für unterschiedliche Displaygrößen angepasst werden. Nie richtig durchsetzen konnte sich die Einheit em – obwohl sie genau zu diesem Zweck entwickelt wurde: Das body-Element erhält eine Schriftgröße in Prozent. 100% entsprechen dabei 100% der im Browser als Standard eingestellten Schriftgröße (meist 16 oder 18px). An allen anderen Stellen wird die Einheit em verwendet. Diese bezieht sich dann auf den für body angegebenen Prozentwert. 2em entspräche beispielsweise der doppelten, 0.5em der halben Schriftgröße. Nachteil dieser Größeneinheit ist, dass sich em-Angaben stets auf die Schriftgröße des jeweiligen Elternelements beziehen. Hat dieses Elternelement (beispielsweise eine div-Box) nun eine von der body-Angabe abweichende Schriftgröße, werden etwaige Kindelemente (auch bei identischer em-Angabe) in einer anderer Größe dargestellt als wenn sie nicht innerhalb des Elements stünden. Ein bloßes Verschieben von Seiteninhalten kann also dazu führen, dass diese eine andere Schriftgröße erhalten (vgl. Zillgens 2013, S. 25–26, 188; W3C 2013a).

Die neue Einheit rem verzichtet auf dieses Verhalten bei verschachtelten Elementen. Nachdem hier für das Wurzelelement html (alternativ: body) eine Größe in Prozent oder Pixel definiert wurde, beziehen sich alle anderen rem-Angaben auf eben diese und nicht auf das jeweilige Elternelement. Um auch ältere Browser zu unterstützen, sollten stets Pixelwerte vorangestellt werden:

In Zukunft werden auch Viewport-abhängige Größen zur Verfügung stehen. Diese sollen dann die exakte Anpassung eines Textes an die Abmessungen des Darstellungsfensters ermöglichen. 1 vw entspricht dabei 1% der Breite, 1 vh 1% der Höhe des Darstellungsfensters. Durch Nutzung von vmin und vmax, die 1 vw oder 1 vh entsprechen, kann automatisch die jeweils kleinere oder größere Einheit gewählt werden (vgl. Zillgens 2013, S. 189–190; W3C 2013a).

Der Beitrag Schriftgrößen auf mobilen Websites erschien zuerst auf Benjamin Wiesrecker - Web Developer und Internet-Unternehmer - Based in Bochum.