WHITEPAPER

Einfach.Bloggen/Mobile Mobile first? So wird ein Blog fit für alle Endgeräte. Herausgeber gutefrage.net

Inhalt 1 Einleitung: Welcome to the jungle

4

2 Technische Grundlagen

6

2.1 Mobile Website

6

2.2 Responsive Webdesign

7

2.3 Adaptive Webdesign

8

2.4 Mobile App

8

3 Technische Umsetzung

9

3.1 Test und Analyse

10

3.2 Erste Schritte

13

3.3 Plugins für Mobile Websites

15

3.4 Responsive Themes

17

3.5 Plugins für Responsive Websites

19

WHITEPAPER

2

20

4 Mobile Content 4.1 Vier Thesen zu Mobile-Usern

20

4.2 Konkrete Handlungsempfehlungen

23

5 Fünf typische Fehler bei der Mobile-Optimierung

25

6 Think mobile – neue Chancen für Corporates und Blogger

28

6.1 Vorteile von Apps

28

6.1.1 Allgemeine Vorteile

28

6.1.2 Konkrete Vorteile für Blogger

29

6.2 App-Vermarktung: Handlungsempfehlungen von Blappsta

32

6.3 Blappsta-Apps für Blogger

34

7 Das letzte Wort

36

Linkliste

37

Impressum

39

WHITEPAPER

3

1 Einleitung: Welcome to the jungle Willkommen im Jahr 2015 – willkommen im Gerätedschungel. Die MultimediadeviceLandschaft war noch nie so fragmentiert wie heute. Desktop-PCs, Laptops, Netbooks, Tablets, Smartphones – sie alle greifen auf das Internet zu, doch bei jedem der Geräte ist die Darstellung eine andere. Und während Webmaster, Administratoren und auch Blogger sich teils noch fragen, welchen Weg sie sich am besten durch diesen Dschungel bahnen können, klopfen bereits mit Smart-TV und Smartwatch zwei weitere Gerätetypen an die Tür, die unterschiedlicher nicht sein könnten. Eines vorweg: Bevor wir uns in dieses Multidevice-Dickicht hineinbegeben, sollten wir noch einen Moment innehalten und uns fragen: Wie groß, wie relevant ist dieser Urwald eigentlich für uns? Müssen wir da wirklich durch oder reicht es, wenn wir ihn uns vom Rande aus anschauen? Dieses Whitepaper richtet sich in erster Linie an Blogger, die auf WordPress als Softwaregrundlage vertrauen, und stellt spezifisch für diese noch einmal eine Frage, welche die Web- und Marketingabteilungen von Großunternehmen schon etwas länger umtreibt: Wie relevant ist „Mobile“ als Kanal für mich? Die Antwort lässt sich mit einem simplen „sehr relevant“ bereits vorwegnehmen. Kommen sehen hat man es schon etwas länger – und 2014 war es dann endgültig so weit. Wie bereits 2009 von Morgan Stanley prophezeit[1], war im vergangenen Jahr der Mobile-Internet-Traffic erstmals höher als jener von Desktop-Devices. Damit ist endgültig klar: Mobile ist gekommen, um zu bleiben – und ist damit eine Entwicklung, mit der sich jeder Webmaster und damit auch Blogger befassen sollte. Die Gründe für den starken Anstieg des mobilen Datenverkehrs im Internet sind vielfältig. Sicherlich liegt einer von ihnen in der jungen Generation, die überwiegend mit dem Smartphone online ist.

WHITEPAPER

4

Doch auch die technischen Voraussetzungen haben in den letzten Jahren den Mobile-Shift begünstigt. Größere Displays machen Online-Inhalte besser zugänglich, insgesamt ist die gesamte Technik von Smartphones/Tablets sehr ausgereift und den Kinderschuhen längst entwachsen. Aber auch die Geschwindigkeit der Datenverbindungen ist immer weiter gestiegen, genauso wie die Verfügbarkeit von (Free) WiFi. Kurzum: Es ist immer komfortabler geworden, mit Smartphones und Tablets online zu gehen, und daher wird diese Möglichkeit auch von der Generation 18+ immer stärker genutzt, bis hin zu dem Punkt, dass manche Haushalte bereits gar keinen stationären PC mehr besitzen. Für Blogger stellt sich also nicht mehr die Frage, ob User mit mobilen Endgeräten auf ihren Blog gelangen, sondern wie deren Nutzererfahrung aussieht, ob ihnen der Blog gefällt und schlussendlich natürlich, ob sie wiederkehren. Auch Google hat das erkannt und wird bald „Mobile Friendlyness“ als Ranking-Faktor seinem Algorithmus hinzufügen.[  2 ] Durch den Dschungel müssen wir also durch, wenn wir uns nicht einen signifikanten Teil unseres Traffics abschneiden wollen, aber wie? Sollten wir zusätzlich zu unserem etablierten Blog eine Mobile Website anbieten? Ist Responsive Webdesign das Mittel der Wahl? Oder sollten wir gar den Schritt hin zur eigenen Mobile App wagen? Im Folgenden wollen wir diese drei Wege im Detail beleuchten, bevor wir uns konkreten Plugins und Themes für WordPress widmen. Im weiteren Verlauf des Whitepapers soll dann noch das Konzept für den Mobile Content beleuchtet werden. Wir wollen auf mögliche Fehler bei der Mobile-Optimierung eingehen und uns abschließend noch einmal detailliert dem Thema „Apps“ widmen. Also dann, auf in den Dschungel!

WHITEPAPER

5

2 Technische Grundlagen Bevor wir in die konkrete Umsetzung für WordPress einsteigen, sollen zunächst noch einige theoretische Grundlagen folgen um uns später das technische Verständnis einzelner Themes und Plugins zu erleichtern. Konkret betrachten wollen wir die unterschiedlichen Möglichkeiten, Inhalte auf mobile Endgeräte zugeschnitten darzustellen: Mobile Websites, Responsive Webdesign, Adaptive Webdesign sowie Mobile Apps.

2.1 Mobile Website Der klassische Weg, um eine Website für mobile Endgeräte darzustellen, ist eine Mobile Website. Desktop-Version und Mobile-Version existieren hier nebeneinander mit unterschiedlichen Templates und unterschiedlichen URLs. Eine Mobile Website ist üblicherweise über eine M-Subdomain verfügbar, also z.B. http://yahoo.com und http://m.yahoo.com. Die große Stärke einer Mobilen Website liegt darin, dass sie speziell für mobile Endgeräte angepasst ist. Sie kann bei Bedarf separat von der Desktop-Version optimiert beziehungsweise weiterentwickelt werden und kann im vollen Umfang auf die Funktionen eines typischen Smartphones – wie beispielsweise Touchdisplay, Neigungssensor oder sogar die Kamera – zugreifen. Darüber hinaus werden Mobile Websites in der Regel sehr schlank programmiert, um den mobilen Endgeräten ein möglichst geringes Datenvolumen aufzubürden. Die Nachteile mobiler Webseiten liegen darin, dass sie für eine bestimmte Größe entwickelt sind und zusätzliche URLs benötigen. Eine solche Architektur ist insbesondere in Bezug auf die wachsende Vielfalt an Displaygrößen mobiler Endgeräte problematisch. Eine Mobile Website wird auf allen mobilen Endgeräten gleich dargestellt, sei es nun ein iPhone 4, 5 oder 6, ein Samsung Galaxy Mini oder ein Tablet. Hinzu kommt gegebenenfalls der Aufwand, zwei oder mehr getrennte Webseiten zu verwalten.

WHITEPAPER

6

Letzten Endes muss also doch wieder ein Kompromiss gefunden werden um allen Displaygrößen gleichermaßen gerecht zu werden. Oder aber man macht sich die Arbeit, die Nutzer unterschiedlicher Endgeräte mit unterschiedlichen Themes anzusprechen, wie es beispielsweise mit WP Mobile Detector[ 3 ] möglich ist.

2.2 Responsive Webdesign Einen Schritt weiter als eine Mobile Website geht das Responsive Webdesign (RWD), welches sich dynamisch an die Eigenschaften des Ausgabegerätes anpasst. Die Website wird stets in der richtigen Größe für das Endgerät dargestellt und passt sich automatisch an Hoch- und Querfomat oder aber auch an Größer- und Kleinerziehen eines Browserfensters an. Den technischen Hintergrund von Responsive Webdesign bilden Media-Queries. Diese fragen die Eigenschaften des Endgerätes ab und bieten die Möglichkeit, die Darstellung einer Website an Displaygröße, Auflösung etc. anzupassen. RWD arbeitet dabei mit relativen Werten. So wird beispielsweise einer Grafik ein optimaler Prozentanteil am Layout zugewiesen, beispielsweise ein Viertel des Bildschirms. Diese Angabe wird anschließend auf jedem Endgerät umgesetzt.

Mit einem Aufbau einer Webseite als Grid (einzelne verschachtelte Elemente) ist eine Umsetzung als Responsive Seite einfach und sieht auf jeder Bildschirmgröße gut aus.

WHITEPAPER

7

Responsive Webdesign bietet zahlreiche Vorteile gegenüber Mobile Websites. Es ist nicht statisch, sondern passt sich flexibel an, ist leichter zu pflegen und es werden keine gesonderten URLs benötigt. Letzteres ist vor allem für die Suchmaschinenoptimierung relevant. Nicht umsonst ist Responsive Webdesign daher der von Google empfohlene Ansatz[ 4 ] zur Mobile-Optimierung. Ein Nachteil von RWD ist die tendenziell etwas höhere Ladezeit als bei Mobile Websites. Darüber hinaus bietet RWD zwar eine flüssige Nutzererfahrung über alle Displaygrößen hinweg, aber keine speziell für Mobilgeräte angepasste Darstellung. Die Vorteile eines mobilen Endgerätes wie Touchdisplay, GPS oder integrierte Kamera können also nicht oder nur schwer genutzt werden. Letztes dürfte für Blogs allerdings verschmerzbar sein.

2.3 Adaptive Webdesign Ein weiterer Ansatz des Webdesigns, der kurz erwähnt werden soll, ist Adaptive Webdesign, welches dem Responsive Webdesign sehr ähnlich ist. Auch das Adaptive Webdesign fragt die Endgerätespezifika mittels Media Query ab, die Anpassung erfolgt jedoch nicht flüssig, sondern in zuvor festgelegten Schritten eines Gestaltungsrasters. Üblicherweise deckt ein solches Raster drei Schritte für Smartphone, Tablet und Desktop-Computer ab. Der Vorteil gegenüber dem RWD ist, dass eher mit klassischen Mockups für die verschiedenen Grid-Stufen gearbeitet werden kann. Es lässt somit mehr gestalterischen Freiraum und ist technisch einfacher umzusetzen. Dafür hat es eine gewisse Fehlerquote bei allen Displaygrößen, die sprichwörtlich „durchs Raster fallen“.

2.4 Mobile App Die Königsdisziplin in der Mobile-Optimierung stellt zweifelsohne eine eigene Mobile App dar. Der große Vorteil dieser Lösung ist, dass keinerlei Kompromisse geschlossen werden müssen. Die App ist perfekt an das Endgerät angepasst und kann alle seine Funktionen nutzen. Die kleinen Smartphone-Programme eignen sich sehr gut

WHITEPAPER

8

zur Nutzerbindung, neue Leser zu gewinnen ist allerdings etwas schwieriger. Eine App hat auch ein paar Tücken im Detail: So ist der Aufwand für die Entwicklung einer App nicht unbeträchtlich, vor allem, da man separate Versionen für jedes MobileBetriebssystem (iOS, Android, Windows Phone etc.) benötigt. Dafür haben wir aber eine Lösung parat: In Kapitel 6 zeigen wir, wie jeder Blogger schnell und einfach zur eigenen App kommen kann.

3 Technische Umsetzung Nach diesem theoretischen Exkurs gehen wir an die praktische Umsetzung. In der Praxis wird sich zeigen, dass sich nicht jedes Plugin oder Theme exakt in eine der zuvor genannten Kategorien einordnen lässt, da ein Tool wie etwa WPtouch[ 5 ], auf das wir später noch eingehen werden (siehe Kapitel 3.3), als Quasi-Allzweckwaffe entwickelt wurde. Dennoch hilft der theoretische Background jedem, der sich selbständig auf die Suche nach Tools für die WordPress-Mobile-Optimierung macht, bei deren Kategorisierung. In diesem Kapitel wollen wir uns zunächst den Möglichkeiten für Tests und Analysen des eigenen Blogs widmen. Nachdem anschließend die ersten Schritte bei der Mobile Optimierung erläutert werden, geht es an die Vorstellung konkreter Plugins und Themes. Spätestens hier ist dann auch eine Entscheidung fällig, auf welchem Weg wir uns durch den Mobile-Dschungel bewegen wollen: Separate Mobile Website oder Responsive Theme? So viel sei vorweg verraten: Es gibt für beide Ansätze zahlreiche ausgereifte Tools.

WHITEPAPER

9

3.1 Test und Analyse In diesem Kapitel vorgestellte Tools: ፚፚ Google Test auf Optimierung für Mobilgeräte[ 6 ] ፚፚ Google PageSpeed Insights[ 7 ] ፚፚ Google Analytics[ 8 ] ፚፚ Quirktools Screenfly[ 9] ፚፚ Am I Responsive[ 10  ] Entscheidungen treffen sich leichter, wenn eine solide Datengrundlage als Voraussetzung gegeben ist. Bevor wir konkrete Schritte zur Mobile-Optimierung unternehmen, sollten daher ein paar grundlegende Fragen beantwortet werden: Wie viele User finden eigentlich den Weg über mobile Endgeräte zu uns? Wie mobile-tauglich ist unser Blog aktuell überhaupt? Und wenn er mobile-tauglich ist, wie sieht er auf verschiedenen Endgeräten konkret aus? Um das herauszufinden, gibt es eine Reihe empfehlenswerter Tools. Die ersten drei Tools kommen von Google. Mit dem Test auf Optimierung für Mobilgeräte[6] kann überprüft werden, wie gut eine Website für mobile Endgeräte angepasst ist. Sollte das Tool zu einem negativen Ergebnis kommen, gibt es konkrete Handlungsempfehlungen, was zu tun ist. Noch einen Schritt weiter gehen die PageSpeed Insights[7], welche sowohl für Mobile als auch Desktop konkrete Tips zur Geschwindigkeitsoptimierung einer Seite liefern. Bedenkt man, dass die Ladegeschwindigkeit einer Seite zum einen ein wichtiger Rankingfaktor von Google ist und zum anderen (gerade auf mobilen Endgeräten) maßgeblichen Einfluss auf die Bounce-Rate einer Seite hat, kann dieses Tool gar nicht oft genug empfohlen werden. Last but not least sei Google Analytics erwähnt. Das Tutorial How to Add Google Analytics to WordPress in Under 60 Seconds[11] bietet eine exzellente Anleitung für

WHITEPAPER

10

die Analytics-Implementierung in WordPress. Es gibt zahlreiche weitere Web Analytics Lösungen für Wordpress[12], Google Analytics ist jedoch nach wie vor das Flaggschiff unter diesen Tools. In diesem Whitepaper wird es explizit empfohlen, um herauszufinden, wie viele User eigentlich über welche Endgeräte auf den eigenen Blog kommen und wie sie sich dort verhalten. Wenn ihr also bisher kein Analysetool installiert habt, wird es jetzt endgültig Zeit dafür. Nach dem Setup wird Google Analytics einige Zeit brauchen, um Daten zu sammeln, die es anzeigen kann.

In Google Analytics können wir sehr schnell sehen, mit welchen Geräten, Auflösungen oder Betriebssystemen die Leser unseren Blog aufrufen.

WHITEPAPER

11

Empfehlenswert sind mindestens 30 Tage, um eine fundierte Datengrundlage für Auswertungen zu haben. Anschließend besonders interessant sind: • Anteil des Mobile-Traffic am Gesamt-Traffic • Time on Site • Bounce-Rate der Mobile-Besucher Mit diesen drei Kennzahlen haben wir eine erste Entscheidungshilfe, um die Relevanz des Mobile-Kanals für unsere Seite zu beurteilen. Je höher der Anteil des MobileTraffics, desto höher natürlich seine Relevanz. Andererseits deuten eine niedrige Time on Site beziehungsweise eine hohe Bounce-Rate der Mobile-Besucher auf akuten Handlungsbedarf hin, selbst wenn der Mobile-Traffic insgesamt gering ist. Bei hohem Mobile-Traffic-Anteil bietet sich eventuell eine Detailanalyse an, um herauszufinden über welche konkreten Endgeräte die User auf unsere Seite gelangen. Ein Tool abseits der Google-Lösungen, welches keinesfalls in diesem Whitepaper fehlen darf, ist Screenfly[9] von Quirktools. Mit Screenfly kann die Darstellung einer Website auf verschiedenen Endgeräten gezielt überprüft werden. Das Tool geht hierbei so weit, nicht nur bestimmte Displaygrößen, sondern sogar ganz bestimmte Endgeräte wie beispielsweise Kindle, iPad oder verschiedene Samsung-GalaxyGerätetypen zu berücksichtigen, und unterstützt selbstredend Hoch- und Querformat sowie benutzerdefinierte Bildschirmgrößen. Wer hingegen auf einen Blick direkt die Ausgabe einer Website auf Smartphone, Tablet, Notebook und Desktop-PC miteinander vergleichen möchte, dem sei Am I Responsive[10] empfohlen. Das Tool bietet keinen deutlichen Mehrwert gegenüber Screenfly, sieht aber einfach fantastisch aus und bietet einen schnellen Überblick.

WHITEPAPER

12

Das Tool Am I Responsive zeigt schick und übersichtlich auf einen Blick, wie unsere Webseite auf verschiedenen Displaygrößen dargestellt wird.

3.2 Erste Schritte Mit den vorangegangenen Tests und Analysen haben wir die Entscheidungsgrundlage für unser weiteres Vorgehen geschaffen. Euer Blog ist bereits responsive und die Google-Tools melden keine Probleme? Dann könnt ihr dieses Kapitel überspringen und euch direkt dem Mobile Content (Kapitel 4) widmen. Andernfalls werden wir nun die ersten Schritte für eine konkrete Mobile-Optimierung in Angriff nehmen. Hierfür muss zunächst unterschieden werden zwischen einem Blog, der bei WordPress gehostet ist, und einer WordPress-Installation auf der eigenen Domain.

WHITEPAPER

13

Der erste Fall trifft auf alle Blogs zu, die unter einer Adresse wie www.meinblog. wordpress.com erreichbar sind. In diesem Fall findet in der Regel eine automatische Mobile-Optimierung statt und es sind keine weiteren Schritte erforderlich[13]. Bei WordPress-Installationen auf der eigenen Domain sollte zunächst überprüft werden, ob die aktuelle Version von WordPress verwendet wird. Die Versionsnummer kann im Dashboard des WP-Backends abgerufen werden. Bei älteren Versionen ist sie in der Fußzeile sichtbar. Gegebenenfalls ist ein Update auf die aktuelle Version nach dieser Anleitung[14] notwendig. Anschließend empfiehlt sich ein Blick auf Design Themes. Hier sollte kontrolliert werden, ob das verwendete Theme in seiner aktuellen Version installiert ist – und falls nicht, ebenfalls ein Update durchgeführt werden. Eventuell liegt eine neue Version des Themes vor, die bereits für mobile Endgeräte optimiert wurde. Sollten Updates von WordPress oder des Themes notwendig gewesen sein, gehen wir wieder einen Schritt zurück und führen die oben erwähnten Tests und Analysen durch. Sollten weiterhin Probleme mit der Mobile-Tauglichkeit unseres Blogs bestehen, geht es jetzt ans Eingemachte. In diesem Fall wird es notwendig, unserer WordPress-Installation neue Plugins und/oder Themes hinzuzufügen. Hierbei müssen wir uns schlussendlich entscheiden, welchen Weg wir einschlagen wollen. Soll sich unser Blog in eine Responsive-Website verwandeln? Oder soll die Desktop-Version unverändert bleiben und ein spezielles Plugin für Mobile Websites installiert werden? Um diese Entscheidung zu erleichtern, werden nachfolgend ein paar einschlägige Tools präsentiert.

WHITEPAPER

14

3.3 Plugins für Mobile Websites In diesem Kapitel vorgestellte Plugins: ፚፚ Jetpack[15] ፚፚ WP Mobile Detector[3] ፚፚ WPtouch[5] Haben unsere Analysen aus Kapitel 3.1 ergeben, dass ein großer Teil unsere User nach wie vor über den Desktop-PC auf unsere Seite kommen, empfiehlt es sich besonders, den Weg über eine separate mobile Webseite einzuschlagen. Ganz nach dem Grundsatz „Never chance a running system“ möchten wir kein Risiko eingehen und die Desktop-Version unseres Blogs möglichst unangetastet lassen – aber auf jeden Fall sowohl für Google aus als für zukünftige Mobile User gewappnet sein. Ein Plugin, welches hier sehr hilfreich ist und ihr vielleicht sogar bereits aus anderen Gründen einsetzt, ist die Allzweckwaffe Jetpack[15]. Jetpack ist eines der funktionsreichsten WordPress-Plugins auf dem Markt und bietet mittlerweile 33 Module für etwa Rechtschreibprüfung, Monitoring und Social Media. Auf alle Funktion von Jetpack wollen wir hier nicht eingehen, für uns entscheidend ist, dass das Plugin auch ein Mobile Theme mitbringt mit dem wir eine Mobile Website umsetzen können. Werft selbst einen Blick auf den Funktionsumfang von Jetpack, das Tool bietet sich bei der Mobile-Optimierung vor allem dann an, wenn es noch weitere Probleme löst, die euch unter den Nägeln brennen. So ein „Funktions-Monster“ muss natürlich umfassend konfiguriert und gepflegt werden. Für den „Raketenrucksack“ sollte man als Webmaster schon ein wenig Zeit mitbringen, sich damit zu befassen. Habt ihr euch für den Einsatz von Jetpack entschieden, ist ein unbedingt notwendiger Schritt, alle nicht benötigten Module des Plugins in den Einstellungen zu deaktivieren. Andernfalls steigt die Ladezeit durch die zusätzlichen JavaScript- und CSS-Dateien stark an – und das sollten wir auf jeden Fall vermeiden.

WHITEPAPER

15

Einen Schritt weiter in Richtung Multidevice geht WP Mobile Detector[3]. Dieses Plugin erkennt automatisch, wenn der User ein mobiles Endgerät benutzt, und spielt ein entsprechendes Mobile Theme dafür aus. Der WP Mobile Detector ist eine gute Alternative für all diejenigen, die wenig Zeit oder Lust für ihre Mobile-Optimierung mitbringen, da dieses Tool einen Großteil der nötigen Schritte automatisch erledigt.

Das Wordpress-Plugin WPtouch bietet zwar kein echtes Responsive Webdesign, bringt aber alle Funktionen mit, damit ein Blog auch auf Smartphones gut aussieht und leicht bedienbar ist.

WHITEPAPER

16

Wer dennoch selbst ein wenig aktiv werden möchte, sollte über die Pro-Version für 50 $ nachdenken, welche Anpassungen an den Mobile Themes ermöglicht. Wer seinen Blog nicht auf Responsive umstellen möchte, das Thema „Mobile“ aber dennoch zu seiner Herzensangelegenheit gemacht hat, dem sei das Plugin WPtouch[5] empfohlen. WPtouch ist ein sehr professionelles, ausgereiftes Tool, welches eine echte Alternative zu Responsive Webdesign darstellt. Das Plugin bringt frei Haus ein Mobile Theme, Features für ein Mobile Menu und mobile-spezifischen Content mit. Wer mehrere Themes zur Auswahl haben oder diese editieren möchte, greift zur Pro Version für 49 $. Der absolute Clou von WPtouch ist aber sein App-Feature. Das Tool bietet dem Leser eines Blogs unkompliziert die Möglichkeit, ein Bookmark des Blogs auf seinem Homescreen zu speichern. Anschließend ist der Blog wie eine native App auf dem Smartphone verfügbar. Dies macht WPtouch auch für Blogger mit einem hohen Mobile-Traffic-Anteil interessant.

3.4 Responsive Themes Ungeachtet der Vorteile von WPtouch bleibt Responsive Webdesign das Mittel der Wahl, um möglichst zukunftsfähig für eine große Bandbreite an Displaygrößen aufgestellt zu sein. In WordPress führt der Weg zum RWD in der Regel nicht über ein Plugin, sondern über Themes. Es gibt eine Reihe an guten, kostenlos verfügbaren, responsiven WordPress-Themes wie beispielsweise Make[16]. Wer sich jedoch dauerhaften technischen Support und möglichst viele Anpassungsmöglichkeiten sichern möchte, der sollte bereit sein, bis zu 100 $ für ein hochwertiges Theme auszugeben. Eine große Auswahl an responsiven Themes findet sich beispielsweise auf • ThemeForest[17] • StudioPress[18] • TheThemeFoundry[19]

WHITEPAPER

17

Auf einem Theme-Marktplatz wie themeforest.net gibt es hunderte von schicken Themes für Euren Blog – viele davon sind responsive, jedoch kosten die meisten Geld.

Neben der Investition in das Theme führt der Weg zum responsiven Blog über eine intensive Anpassungsphase. Die Installation eines neuen Themes ist ein Relaunch der Website – und für den solltet ihr schon etwas Zeit mitbringen. Plant eine intensive Testphase ein, in der ihr euren Blog im neuen Gewand auf Herz und Nieren überprüft – zum einen mit den Test- und Analysetools aus Kapitel 3.1, zum anderen manuell, indem ihr euch Seite für Seite durch euren Blog klickt – und das am besten mehrfach auf verschiedenen Endgeräten. Screenfly[9] kann euch bei der Simulation von Endgeräten, die ihr selbst nicht zur Hand habt, unterstützen.

WHITEPAPER

18

3.5 Plugins für Responsive Websites Responsive Webdesign folgt einer anderen Philosophie als eine Mobile Website, da es versucht, über alle Endgeräte hinweg eine gelungene Darstellung zu erreichen. Dies bietet viele Vorteile, hat jedoch den Nachteil, dass eine echte Mobile-Optimierung nicht stattfindet. Um an dieser Stelle nachzubessern, sollen hier zwei zusätzliche Helferlein genannt werden: Schwierige Lichtverhältnisse bei der Smartphone und Tablet-Nutzung wie z.B. direkte Sonneneinstrahlung sind eine Rahmenbedingung, die bei der Mobile Optimierung berücksichtigt werden muss[20]. Das Plugin Standout Color Boxes and Buttons[21] bietet eine einfache Möglichkeit, farbig hervorgehobene Content-Boxen und für Touchpads angepasste Buttons zu einer WordPress-Seite hinzuzufügen. Auf diese Weise kann dem Bedürfnis der Mobile-User nach kräftigen Farben und Kontrasten sowie großen, auf einem Touchpad leichter klickbaren Buttons besser entsprochen werden. Je nach verwendetem Theme kann dieses Plugin mehr oder weniger sinnvoll sein, im Werkzeugkasten macht es sich aber allemal gut. Sollte das verwendete Theme mit einer gelungenen Darstellung überzeugen, jedoch von Haus aus kein speziell für mobile Endgeräte angepasstes Menü mitbringen, so schaffen Plugins wie Responsive Menu[22] oder WP Responsive Menu[23] Abhilfe. Hiermit stellt ihr sicher, dass sich Touchpad-User nicht durch eine fummelige Seitennavigation klicken müssen. Zu guter Letzt noch ein Tipp für die CSS-Profis unter euch: Wie im Theoriekapitel erwähnt, bilden Media Queries eine wesentliche Grundlage von Responsive Webdesign. Media Queries funktionieren clientseitig und sind ein CSS3-Modul. Natürlich bringen Responsive Themes ihre eigenen Media Queries mit, doch wer die Sache selbst in die Hand nehmen oder das vorhandene Media Query anpassen möchte, findet im Netz[24] schnell eine Anleitung.

WHITEPAPER

19

4 Mobile Content Nach der technischen Umsetzung und der Implementierung eines passenden Designs haben wir unseren Blog für Mobile optimiert – work done. Fast! Ja, es ist richtig, der technische Aspekt macht einen großen Teil der MobileOptimierung einer WordPress-Seite aus. Doch wir sollten uns auch ein wenig Gedanken über die eigentlichen Inhalte, um das Content-Konzept machen. Ist ein Blog inhaltlich stets gleichermaßen für Desktop-PCs und mobile Endgeräte geeignet? Gibt es Einschränkungen? Was ist zu beachten? Dieses Kapitel soll den inhaltlichen Aspekt einer WordPress-Mobile-Optimierung beleuchten und etwas Licht ins Dunkel bringen.

4.1 Vier Thesen zu Mobile-Usern 1. Mobile ist mehr als nur ein kleiner Bildschirm Zunächst einmal lässt sich festhalten, dass „Mobile“ nicht nur für einen kleineren Screen oder ein Touchdisplay steht. Es handelt sich um einen anderen Kanal mit abweichenden Eigenschaften und Nutzungsgewohnheiten, und nicht nur das: Für eine wachsende Anzahl von Menschen ist Mobile kein alternativer, sondern der einzige Weg, wie sie das Internet erleben. Sei es, weil sie gar kein Desktop-Device mehr besitzen, oder weil Smartphones und Tablets ihren Nutzungsgewohnheiten besser entsprechen. Dieser Typus von Usern verlangt nach Inhalten, die auf ihn zugeschnitten sind. Machen wir uns also Gedanken dazu, was den Nutzer eines mobilen Endgerätes auszeichnet, welche Bedürfnisse er hat und wie wir diesen entsprechen können.

WHITEPAPER

20

2. Urgent now – Mobile-User sind ungeduldig und immer auf dem Sprung Wer sich bereits mit Web-Usability befasst hat, kennt die These vom ungeduldigen Internetnutzer. Sie ist nicht neu und eine der Grundsäulen jeglicher Usability-Optimierung. Menschen, die im Internet unterwegs sind, sind tendenziell ungeduldig, möchten wenig klicken oder scrollen und vermeiden lange Wartezeiten. Dieser Grundsatz bildet den wichtigsten Baustein für ein Verständnis der Bedürfnisse des Nutzers, ganz gleich, ob diese mit einem Desktop-PC, Tablet oder Smartphone unterwegs sind. Jedoch sind Mobile-User häufig noch ungeduldiger als jene eines Desktop PCs. Wir werden später noch darauf eingehen, warum diese These nur eingeschränkt stimmt, doch sie hat einen wahren Kern. Ein entscheidender Punkt sind die Ladezeiten auf einem Mobile-Device. Wer mit seinem Smartphone oder Tablet unterwegs ist, hat gegebenenfalls nur eine eingeschränkte Internetverbindung und mit längeren Ladezeiten zu kämpfen. Einem solchen User direkt beim Seitenaufruf den Download von 5 MB Bildmaterial aufzubürden ist daher keine gute Idee. 3. Mobile-User benötigen eine optimierte Darstellung Captain Obvious speaking: „Mobile Endgeräte haben einen kleineren Bildschirm als Desktop-Devices.“ Diese simple Erkenntnis ist die wesentliche Grundlage der vorangegangenen Kapitel und stets der erste Ansatzpunkt, der einen Webmaster dazu bewegt, seine Seite für Mobile anzupassen. Doch nur auf responsive Design oder eine Mobile-Site zu vertrauen, ist zu kurz gegriffen. Vielmehr sollte sich ein Blogger folgende Frage stellen: „Wie erreiche ich möglichst optimal einen Nutzer, der höheren Ladezeiten und einem kleineren Bildschirm als ein Desktop-User ausgesetzt ist?“ Die Antwort liegt wie so oft im Webdesign in einer Konzentration auf das Wesentliche. Kurze, aussagekräftige Überschriften, kräftige Farben, klare Schriftarten, kurz gesagt „Minimalismus“. Noch mehr als der Desktop-User möchte ein Mobile-User innerhalb kürzester Zeit wissen, ob ein Artikel die Zeit wert ist, ihn zu lesen. Dies bedeutet im ersten Schritt wahrscheinlich, von einer prägnanten Überschrift oder einem aussagekräftigen Google-Suchergebnis angesprochen zu werden.

WHITEPAPER

21

Der nächste Schritt führt über eine möglichst kurze Wartezeit beim Öffnen des Artikels dahin, sich über diesen einen schnellen Überblick zu verschaffen. Ein in klare Abschnitte unterteilter Text, fett markierte Highlights, Aufzählungen und in Maßen eingesetzte Bilder helfen hierbei. Schnell fällt auf: Diese Punkte treffen nicht ausschließlich auf mobile Inhalte zu, sie dienen vielmehr als Anleitung für einen generell nutzerfreundlichen Content. Dies bringt uns zum entscheidenden Punkt: 4. Was gut ist für Mobile, ist auch gut für Desktop Man möchte meinen, diese Aussage würde in beide Richtungen funktionieren, dies ist jedoch nicht ganz richtig. Mit einer tendenziell schnelleren Verbindung und einem größeren Bildschirm „verzeiht“ ein DesktopPC mehr Schwächen in der Usability. Eine komplexe Schriftart ist vielleicht gerade so noch lesbar, ein viel zu großes Bild wird dank Glasfaserverbindung und einer schnellen CPU vielleicht trotzdem noch schnell geladen. Und sollte es doch mal etwas länger dauern, hat man im zweiten Tab noch Facebook offen und liest dort eben ein, zwei Beiträge, bis der Artikel fertig geladen ist. Diesen Luxus hat der Nutzer eines mobilen Endgerätes nicht und ist deswegen ungeduldiger.

Ist eine Webseite unzureichend für mobile optimiert, lassen sich Inhalte sehr schwer erfassen – zu große Bilder, zu lange Überschriften oder nicht angepasste Menüs werden keine mobilen User überzeugen.

Umgekehrt funktioniert die These jedoch. Ein Artikel, der auf einem mobilen Endgerät gut lesbar ist, funktioniert auch für einen Desktop PC.

WHITEPAPER

22

Dies bedeutet natürlich nicht, dass jede Website nun auf 480 x 50 Pixel Breite eingestellt werden sollte – darum kümmert sich im Zweifelsfall das Responsive Design. Eine klar strukturierte Seite mit schlanken Dateigrößen funktioniert jedoch in beide Richtungen, und während Flash-Inhalte auf einem iOS-Gerät nicht geladen werden, ist HTML5 universell einsetzbar.

4.2 Konkrete Handlungsempfehlungen Sich in den Nutzer hineinversetzen – Moblogging ausprobieren Ihr seid Blogger und möchtet euch möglichst gut in den Nutzer eines mobilen Endgerätes hineinversetzen? Versucht den ultimativen Schritt und werdet zum Moblogger. Mit den Mobile Applications for Wordpress[25] könnt ihr euren Blog von unterwegs aus betreuen. Wer beim Bloggen in der Umgebung eines mobilen Endgerätes arbeitet, dem fällt es auch leichter, sich in einen Leser hineinzuversetzen, der mit dem Smartphone unterwegs ist. Dieses Whitepaper soll keine dogmatischen Werte für eine optimale Textlänge oder die Dateigröße von Bildern angeben. Wer es aber einfach ausprobiert und sich damit in die Sicht des Users versetzt, bekommt schnell ein Gefühl dafür. Dauert der Upload eines Bildes zu lang? Dann trifft dies vielleicht auch auf das Öffnen des selbigen zu. Ihr seid unterwegs und möchtet über das leckere Essen in dem Restaurant schreiben, in dem ihr gerade sitzt? Gut – denn vielleicht ist das auch die Sorte von Inhalt, die mobile Leser besonders interessiert. Moblogging kann dabei helfen, den eigenen Blog durch eine bestimmte Brille zu betrachten und Inhalte gezielt für Mobile zu erstellen, anstatt anders herum einen Inhalt für Desktop zu schreiben und sich dann Gedanken darum zu machen, wie sich dieser für Mobile zurechtstutzen lässt. Aufmerksamkeit erregen – jetzt erst recht Ebenso wie für Desktop gelten auch für Mobile die Grundsätze eines aufmerksamkeitsstarken und hochwertigen Textes – und zwar mit noch höherer Dringlichkeit.

WHITEPAPER

23

Mobile-User selektieren noch schneller als Desktop User-Inhalte, für die sie ihre Zeit aufwenden wollen. Dennoch gelten die gleichen Usability-Grundsätze: • Spannende Headline • Knappe, präzise Schreibweise • Prägnante Einleitung – dem Leser schildern, warum der Artikel seine Zeit wert ist • Klare Struktur, Aufzählungen und Hervorhebungen verwenden • Bilder zur Unterstützung des Textes und zum Erregen von Aufmerksamkeit Ebenfalls hilfreich kann es sein, bereits zu Beginn eines Artikels die wesentlichen Inhalte in Stichpunkten aufzuführen. In Kombination mit einer starken Einleitung wird der Leser so gleich zu Beginn abgeholt und weiß, was er vom kommenden Text zu erwarten hat. Inhalte auf die Spezifika von mobilen Endgeräten abstimmen Ist die Aufmerksamkeit des Lesers erregt, gilt es, ihn auf der Seite zu halten und es ihm möglichst leicht zu machen, unsere Inhalte zu lesen. Hierbei unterstützen die folgenden Punkte: • Minimalismus • Verwendung kräftiger Farben • Klare, leicht leserliche Schriftarten • Dateigröße von Multimedia-Content beachten Im Hinblick auf die längeren Ladezeiten auf mobilen Endgeräten ist der letzte Punkt besonders wichtig. Bilder, Videos etc. sollten bereits beim Upload nur exakt so groß sein wie nötig. Enthält eine Seite viele multimediale Inhalte, empfiehlt sich die Untergliederung in einzelne, separat ladende Abschnitte. Noch einen Schritt weiter geht

WHITEPAPER

24

die Strategie, die einige Zeitungsverlage bereits erfolgreich anwenden. Sie verteilen über den Tag hinweg kurze, schnell lesbare Informationshäppchen und liefern am Abend, wenn der Leser vielleicht mehr Ruhe und Zeit mitbringt, ausführlichere Artikel. Urgent now – oh really? Ist mobile also alles anders? Mitnichten! Es handelt sich um einen anderen Kanal, der eine eigene Betrachtung, eine eigene Herangehensweise benötigt. Doch wie dieses Kapitel zeigen soll, lassen sich viele Aspekte der Content-Strategie, die für Desktop-PCs gelten, auch für mobile Endgeräte nutzen. Dies gilt auch für den „urgent now“-Usertypus. Dieser mag als Archetyp des gestressten Handynutzers gelten, jedoch steht ihm mindestens gleichberechtigt der „bored now“-Nutzer gegenüber – und der bringt reichlich Zeit mit. Denn wir alle nutzen unsere Smartphones und Tablets nicht nur, um uns möglichst schnell zu informieren, sondern auch, um Zeit totzuschlagen. Im Zug, in der U-Bahn, in Wartezimmern. Und was liest man da lieber als einen spannenden Blogartikel?

5 Fünf typische Fehler bei der Mobile-Optimierung Bisher haben wir uns in diesem Whitepaper ausführlich den Dos gewidmet, Zeit also, noch einen Blick auf die Don‘ts zu werfen. Damit wir aber nicht im Dschungel versumpfen, geht dieses Kapitel auf fünf typische Fehler ein, die häufig bei der Mobile-Optimierung stattfinden. 1. Zu große Datenmenge Fehler Nummer eins bei mobilen Seiten ist und bleibt, dass eine zu große Datenmenge an den Client übertragen wird. Dies ist besonders problematisch für Nutzer, die außerhalb eines WiFi-Netzes unterwegs sind. Ein Problem hierbei ist, dass dies

WHITEPAPER

25

häufig unbeabsichtigt passiert. So kann es beispielsweise vorkommen, dass große Bilder nur herunterskaliert dargestellt werden, jedoch die volle Dateigröße in den Cache geladen wird. Abhilfe schafft hier das Plugin Optimus[26], welches die Dateigröße hochgeladener Medien ohne Qualitätsverlust verkleinert. Ebenfalls hilfreich ist das Tool Adaptive Images[27], welches verkleinerte Versionen von Bildern auf mobile Endgeräte ausliefert. Plugins sind ein weiterer wichtiger Punkt, der gerade in Bezug auf WordPress relevant ist. Viele WordPress-Plugins erweitern die CSS- und JavaScript-Dateien, die an den Client übergeben werden, und erhöhen somit auch die Datenmenge beziehungsweise Ladezeit. Wir können daher gar nicht oft genug empfehle, nicht benötigte Plugins oder nicht benötigte Module von Plugins auszuschalten. 2. Keine Pagespeed-Optimierung Eine nicht stattfindende Pagespeed-Optimierung ist ein weiterer häufig stattfindender Fehler, der meist im chronischen Zeitmangel von Webmastern begründet ist. Neben zu großer Datenmenge kann es weitere Ursachen für die hohe Ladegeschwindigkeit einer Seite geben, beispielsweise ein langsamer Server oder Fehler im Code. Allgemeingültige Tipps hierfür lassen sich kaum geben, dafür aber ein weiteres Tool für den Mobile-Werkzeugkasten nennen: Das Plugin WP Super Cache[28] erstellt aus den dynamisch erzeugten PHP-Dateien eines WordPress-Blogs statische HTMLDateien und kann die Ladezeit somit signifikant verkürzen. 3. Kein Mobile SEO Suchmaschinenoptimierung (SEO) ist ein für Blogs hoch relevantes Thema, mit dem ihr euch bestimmt bereits auseinandergesetzt habt – denn der beste Blog ist unnütz, wenn er von niemandem gefunden wird. Wichtig hierbei ist es, SEO als fortlaufenden Prozess zu betrachten, der niemals endet und sich immer wieder an neue Gegebenheiten anpassen muss. Der Mobile-Shift ist eine solche Gegebenheit und macht es erforderlich, sich im Zuge der Mobile-Optimierung auch wieder mit SEO-Kriterien

WHITEPAPER

26

auseinanderzusetzen, denn wie bereits in Kapitel 1 erwähnt, wird Mobile-Friendlyness ein Ranking-Faktor für Google. Solltet ihr euch als Lösung für eine MobileSite mit separaten URLs entschieden haben, ist zum Beispiel Duplicate Content ein typischer Punkt, da jede eurer Seiten doppelt existiert: einmal in ihrer Desktopund einmal in ihrer Mobile-Variante. Abhilfe schaffen hier Canonical Tags, die auf die Desktop-Version der Homepage verweisen. Empfehlenswert für einen solchen Schritt ist die SEO-Allzweckwaffe Yoast[29].

Mobile Geräte mit iOS-Betriebssystem, also iPhones und iPad, unterstützen kein Flash – wer bei seinem Webdesign darauf nicht achtet und etwa Filme über einen Flashplayer abspielt, wird eine beträchtliche Anzahl Mobile-User enttäuschen.

4. Medieninhalte können nicht angezeigt werden Ein Klassiker der Mobile-Optimierung sind Medieninhalte, die nicht angezeigt werden können. Häufig handelt es sich hierbei um Flash-Elemente, die auf iOS-Endgeräten nicht funktionieren. Achtet also darauf, HTML5-Elemente statt Flash einzubinden und überprüft die Embed-Codes bei Videos, die von externen Quellen wie YouTube oder Vimeo eingebunden wurden. Wenn euer Blog ältere Einträge enthält, die nach wie vor häufig besucht werden, empfiehlt es sich, eventuell auch einmal den Altbestand auf seine Mobile-Tauglichkeit abzuklopfen. 5. User zoomen lassen Zu guter Letzt sei noch der Fehler genannt, sich darauf zu verlasse, dass User zoomen. So praktisch die PinchFunktion moderner Touch-Pads auch ist: Als User sind wir alle faul. Wir wollen möglichst wenig klicken, scrollen, swipen und auch möglichst wenig zoomen. Tut euch selbst einen Gefallen: Vertraut nicht darauf, dass dem

WHITEPAPER

27

User diese Funktion zur Verfügung steht. Sie ist ein Hilfsmittel der SmartphoneHersteller, welches eine schlechte Usability auffängt. Euer ultimatives Ziel bei der Mobile-Optimierung sollte es jedoch sein, dem User eine so gute Usability zu bieten, dass er solche Hilfsmittel nicht benötigt.

6 Think mobile – neue Chancen für Corporates und Blogger Mehrwerte einer eigenen nativen App Erst native Apps hauchen dem Thema Mobile wirkliches Leben ein. Dass sie zunehmend beliebter werden, ist offensichtlich: Aufgrund der intuitiveren Bedienbarkeit und gesteigerten Interaktivität bevorzugen heute schon 86% der Smartphone-Nutzer native Apps[30]. Doch warum werden Apps bevorzugt? Welche Mehrwerte bieten Apps allgemein und welche für Blogger im Speziellen?

6.1 Vorteile von Apps 6.1.1 Allgemeine Vorteile Push-Benachrichtigungen Smartphones und Apps sorgen heutzutage dafür, dass Informationen und News auf schnellstmöglichem Weg abrufbar gemacht werden. Außerdem sind diese innerhalb der Apps zumeist sehr benutzerfreundlich aufbereitet; sie erreichen den Leser standortunabhängig. Die unmittelbare Erreichbarkeit der App-Nutzer wird durch sogenannte Push-Benachrichtigungen sichergestellt. In Echtzeit werden die Leser über Neuigkeiten informiert und unmittelbar in der „Kommandozentrale“ ihres Smartphones benachrichtigt.

WHITEPAPER

28

Usability Apps sind in der Regel leicht beziehungsweise intuitiv zu bedienen – und punkten daher in den meisten Fällen mit einer hervorragenden Usability. Auch in Sachen Schnelligkeit sind Apps den mobilen Webseiten meistens voraus, da sie sehr schnell laden und oft sogar ohne aktive Internetverbindung funktionieren. Die Navigationswege sind innerhalb von Apps sehr gut nachvollziehbar, daher ist der Content übersichtlich aufbereitet. Branding durch App-Icon im Homescreen Zu jeder App gehört auch ein entsprechendes App-Icon, welches jederzeit auf dem Display des Smartphones sichtbar ist. Die App – beziehungsweise die Marke oder der Blog – festigt sich so im Bewusstsein und Unterbewusstsein des Nutzers; wir sprechen hier vom Mere-Exposure-Effekt. Verbessertes Ranking im Suchmaschinenergebnis von Google Wie Google Ende Februar 2015 ankündigte, wird die mobile Optimierung einer Website ein neuer wichtiger Ranking-Faktor von Suchergebnissen werden. Apps werden zukünftig (ab 21. April 2015) von Google dementsprechend im Ranking der Suchergebnisse bevorzugt. Es wird außerdem direkt in indexierte Apps verlinkt, die der Nutzer bereits auf seinem Smartphone installiert hat. Ein Beispiel: „Hat der Nutzer eine Kochrezept-App installiert, wird er in Zukunft also bei der Suche nach Gerichten häufiger die Webseite der bereits installierten App vorfinden als andere Konkurrenz-Portale. Im besten Falle öffnet sich der Link dann auch gleich wieder in der bereits auf dem Smartphone installierten App.[31]“. 6.1.2 Konkrete Vorteile für Blogger Zusätzliche Reichweite Eine native App eröffnet dem Betreiber eines Blogs eine völlig neue Möglichkeit, seinen Content zu distribuieren. Sie ist als eine Erweiterung des Angebots und der

WHITEPAPER

29

Verfügbarkeit seines Contents zu sehen, mit welcher er auch komplett neue Zielgruppen erschließen und bedienen kann. Beispielsweise gibt es heutzutage viele Menschen, die gar keinen Desktop-PC oder Laptop besitzen oder zum Surfen im Internet benutzen. Das Smartphone erfüllt diese Anforderungen seit längerer Zeit bereits ideal. Gewisse Dienste sind in der heutigen Welt sogar lediglich über eine App zu erreichen und zunächst gar nicht mehr über stationäre Webseiten. „Mobile first“ nennt sich dieses Prinzip, welches sich beispielsweise beim Photo-SharingNetzwerk Instagram in beeindruckender Weise bewährt hat. Ein weiterer Vorteil von Apps: Sie sind in den gängigen AppStores von Google und Apple gelistet und mit wenigen Klicks herunterzuladen, was die Reichweite des Contents eines Blog letztendlich deutlich erhöhen kann. Loyale Leserschaft Im Gegensatz zu mobilen Webseiten, die der Leser im Browser seines Smartphones aufruft, muss er sich bei einer App zunächst zum Download derselben entscheiden. Dies mag zunächst als Hürde angesehen werden, ist aber vor allem auch eine enorme Chance zur Bindung. Jeder Blogger und jedes bloggende Unternehmen besitzt das Ziel, nachhaltig Leser zu gewinnen und zu begeistern. Entscheidet sich der Leser zum Download einer App, so qualifiziert er sich automatisch als loyaler Leser des zugehörigen Blogs – und auch sein Engagement ist größer, denn schließlich hat er sich bewusst für den Download der App entschieden. Loyale Leser sind diejenigen Leser, die regelmäßig, wiederkehrend und verlässlich die Inhalte eines Blogs lesen. Genau diese Leser wünscht sich jeder Blogger und jedes bloggende Unternehmen. Den Aufbau einer loyalen Leserschaft kann maßgeblich mit gutem Content erreicht, aber auch durch eine App gefördert werden. Denn: Ohne eine App und deren Push-Benachrichtigungen ist der Leser gezwungen, sich selbstständig auf die

WHITEPAPER

30

Suche nach neuem Content auf den Blog zu begeben – nicht wirklich kunden- beziehungsweise leserfreundlich. Mittels Push-Benachrichtigungen wird dem loyalen Leser diese Aufgabe abgenommen und er kann zusätzlich von unterwegs auf die Inhalte des Blogs zugreifen und sie lesen, wenn es ihm passt. Die Informationen der Zukunft werden eben genau dort sein, wo sich der Leser befindet und sie aufnehmen will. Die Relevanz der Inhalte nimmt zu, da Informationen schneller ans Ziel und besser zur Geltung kommen als in den Weiten des Browsers. Social Sharing in der App Damit ein Blogger seine Reichweite steigert und damit seine Relevanz bei den Lesern erhöht wird, muss sein (guter) Content über die sozialen Netzwerke geteilt werden. Apps besitzen eine intuitive und leicht zu nutzende Sharing-Funktion und sorgen dafür, dass Leser unkompliziert den Content teilen können. Es zeichnet sich der Trend ab, dass loyale Leser dazu neigen, guten Content öfter zu teilen, wenn sie ihn in der App lesen. Kommentarfunktion 2.0 Die Kommentarfunktion wird bisher hauptsächlich auf den Desktop-Websites der Blogs genutzt – und dort auch eher zurückhaltend. Oft werden die Leser durch Authentifizierungsfunktionen oder das Einloggen über Facebook gehemmt, einen Kommentar zu hinterlassen, auch wenn sie sich gerne zum Content geäußert hätten. Mobil ist ein Trend zu höherer Kommentarbereitschaft noch nicht zu erkennen, was damit zusammenhängt, dass sich die meisten Kommentarfunktionen mobil nicht nativ anfühlen. Es fehlt ein mobiles Kommentarsystem, welches vom User-Interface den gängigen Messangern (Whatsapp, Threema und Facebook) des SmartphoneZeitalters ähnelt.

WHITEPAPER

31

Zukünftige Blogger-Apps und ihre Communities können hier einen Trend auslösen: Nach bequemen und einmaligen Logins ermöglicht ein Tool innerhalb der App den Lesern einen nativen Austausch über ihre jeweilige Leidenschaft und Meinungen. Hier nochmal sämtliche relevanten Punkte in der Übersicht: Allgemeine Vorteile von Apps: ፜፜ ፜፜ ፜፜ ፜፜

Push-Benachrichtigungen Usability Branding durch App-Icon im Homescreen Verbessertes Ranking im Suchmaschinenergebnis von Google

Konkrete Vorteile für Blogger: ፜፜ ፜፜ ፜፜ ፜፜

Zusätzliche Reichweite Loyale Leserschaft Social Sharing in der App Kommentarfunktion 2.0

6.2 App-Vermarktung: Handlungsempfehlungen von Blappsta Den Vorsprung weiter ausbauen, Mitbewerbern einen Schritt voraus sein, die Reichweite der Kommunikation erhöhen? Die folgenden Tipps zur Vermarktung und Bekanntmachung von Apps zeigen, wie das am einfachsten funktioniert.

WHITEPAPER

32

Blogbeitrag Schreibt auf eurem Blog je einen Artikel zu eurer Blog-App. Inhalte wie • Warum gibt es nun eine App? • Was kann diese App? • Wo bekommt man sie? sollten darin behandelt werden. Sofern ihr Push-Benachrichtigungen zur Leseraktivierung und für Aktionen nutzen möchtet, solltet ihr bereits im Artikel darauf hinweisen, dass diese nach der Installation der App erlaubt werden sollten. Bewerbung auf der Website – Widget Rührt die Werbetrommel – bewerbt eure App auf euren Blogs und der Website. Hierfür könnt ihr zum einen das Widget des Blappsta Plugins nutzen, oder ihr gestaltet ein eigenes Widget, welches direkt auf die Stores leiten sollte. Blogger Relations nutzen Nutzt die Reichweite von befreundeten Bloggern und lasst eure Apps auf deren Blogs vorstellen. Vereinbart dazu im Vorfeld, dass der Blogger eine bestimmte Anzahl an Abbildungen verwendet und in jedem Fall die Downloadlinks für den Apple Store und den Google Play Store einbaut. Darüber hinaus solltet ihr dem Blogger bei seinem „Test“ jedoch genügend Freiraum für einen authentischen Bericht lassen. Passen die Zielgruppen von einem eurer Blogs und einem Blogger, auf den ihr aufmerksam werdet, perfekt zueinander, erwägt auch die Bewerbung eurer App auf dem „fremden“ Blog. Smart App Banner Ein Smart App Banner ist ein kleines Banner, welches jeder Leser oberhalb des Blog-Inhalts sieht, wenn er euren Blog mit seinem Smartphone aufruft.

WHITEPAPER

33

Facebook-Post/Instagram Schreibt Facebook-Posts mit den Links zu den Artikeln über die App auf dem Blog. Außerdem könnt ihr auch auf Instagram über eure neue Blog-App berichten.

6.3 Blappsta-Apps für Blogger Was macht Blappsta[32] aus? Ihr seid Blogger und benötigt Apps? Dann kennt ihr sicher folgendes Problem: Die meisten Tools erstellen entweder komplizierte und umständlich zu bedienende Apps oder die Apps sind durch nicht-native Technologie qualitativ minderwertig. Sie sehen nicht so aus wie die nativen Smartphone-Apps, deren Umgang wir täglich gewöhnt sind, und fühlen sich auch nicht so an. Wir haben gute Nachrichten: Es gibt Blappsta, ein Produkt der hannöverschen Medienagentur Nebelhorn GmbH. Blappsta ist für jeden Blog eine sinnvolle Lösung, um mit der Entwicklung zum mobilen Lesen Schritt halten zu können. Ihr könnt sowohl als private, leidenschaftliche Blogger als auch mit Eurem Corporate Blogs von der Blappsta-Technologie profitieren und eure eigene App für Euren Blog in die Stores von Apple und Google bringen. Innerhalb der App gibt es individuelle und dezente Werbemöglichkeiten, wobei ihr als Blogger die Entscheidungshoheit besitzt, diese Werbemöglichkeiten individuell gestalten oder auch abwählen könnt. Weiterhin plant Blappsta einige Beteiligungsmodelle an möglichen Werbeeinnahmen, die euch bei der Monetarisierung eures Blogs helfen können. Die Produktpalette von Blappsta versteht sich als ein „Software As A Service“Modell und ist damit für sämtliche Zielgruppen sehr erschwinglich – es gibt Modelle für kleinere Blogger in der Aufbauphase bis hin zum Modell für große Konzerne. Weiterhin sind sämtliche Updates auf neue Betriebssysteme und kontinuierliche Feature-Erweiterungen (innerhalb der App) im Preis mit einbegriffen.

WHITEPAPER

34

Wie lange dauert die App-Erstellung? Ihr werdet überrascht sein: nur ein paar Minuten. Der erste Schritt zur App ist die Installation des Blappsta WordPress-Plugins im Backend. Danach stehen bei Bedarf noch eine Reihe an Anpassungsmöglichkeiten zur Verfügung, um die App zu personalisieren – man benötigt keinerlei Programmierkenntnisse zur Entwicklung einer eigenen App. Hiernach kann die App auch schon zur Produktion freigegeben werden. Für die Erstellung und Anpassung der App für die Stores benötigt unser Team ca. fünf Werktage. Apple selbst benötigt für die Prüfung noch einmal ein bis zwei Wochen, bis die App im App Store zu finden ist. Google benötigt etwa einen Tag, bis die App im Play Store erscheint. Welche Funktionen bringt die App mit? Sobald der Blogger einen neuen Beitrag auf seinem WordPress-Blog veröffentlicht, wird dieser automatisiert in der Blappsta-App übernommen. Dabei kann natürlich angepasst werden, wie und wo der Post in der App erscheinen soll. Die Leser sind so in der Lage, Artikel ganz einfach sowohl on- als auch offline zu lesen. BlappstaApps verfügen über besondere App-interne Features. Die Posts können durch Implementierung von Social-Sharing-Features mit nur einem Klick in diverse soziale Netzwerke gestreut werden. Weiterhin können die Leser jeden Post jederzeit in der App kommentieren. Durch die direkte Verbindung mit dem Blog werden die Kommentare auch in der Desktopdarstellung des Blogs unter dem Post angezeigt. Über die Bookmarking-Funktion können Leser ihre Lieblingsartikel speichern und schnell wiederfinden oder sie später zu Ende lesen. Wenn es neue Artikel auf dem Blog gibt, werden die Leser auf Wunsch durch PushBenachrichtigungen auf den neuen Content aufmerksam gemacht. Somit werden die Leser an den Blog gebunden und aus spontanen Blog-Lesern werden loyale Leser und aktive Mitglieder.

WHITEPAPER

35

Die App verfügt über eine Menge an Individualisierungsmöglichkeiten. Von der Farbe über Icons, Beschreibungen, Logos bis hin zu kleineren CSS-Änderungen sind diverse Details modifizierbar. Sind die Blappsta-Apps wirklich „native“? Ja, sind sie. Es sind keine webbasierten Online-Apps, sondern richtige Smartphone-Apps, die sich durch ihre Darstellung, ihre Performance und ihre unkomplizierte Handhabung auszeichnen. Zudem werden sie durch regelmäßige Updates an alle Apple- und Google-Standards angepasst. Was kommt noch? Die Apps sind für Android und iOS entwickelt. Damit werden bereits jetzt 92 Prozent der weltweiten Smartphones abgedeckt. Die Unterstützung für Windows Phone und Blackberry befindet sich derzeit in der Entwicklung. Ebenso wird derzeit an weiteren CMS gearbeitet.

7 Das letzte Wort Dieses Whitepaper beendet an dieser Stelle nun den Ausflug in den Mobile-Dschungel – für euch als Leser fängt er jedoch eventuell gerade erst an. Egal, ob ihr nun „Mobile First“ zu eurer Maxime macht oder ob ihr die Desktop-Version eurer Seite weiterhin als wesentlichen Content-Hub betrachtet: Wir hoffen, ihr konntet etwas aus dieser Lektüre mitnehmen, sei es nun blankes Wissen oder aber auch das eine oder andere Tool für euren Werkzeugkasten. Abschließend bleibt also nur zu sagen: Viel Erfolg im Dschungel – und damit übergeben wir das letzte Wort an euch.

WHITEPAPER

36

Linkliste [1]

de.slideshare.net/tcrock08/the-mobile-internet-report-2746871

searchengineland.com/google-mobile-friendly-ranking-factor-runs-real-time-page page-basis-216100?utm_content=bufferd0284&utm_medium=social&utm_source= facebook.com&utm_campaign=buffer [2]

[3] [4]

[5] [6] [7] [8] [9]

Wordpress-Plugin WP Mobile Detector: wordpress.org/plugins/wp-mobile-detector/

Google Empfehlung Mobile SEO: developers.google.com/webmasters/mobile-sites/ mobile-seo/overview/select-config?hl=de Wordpress-Plugin WPTouch: www.wptouch.com

Google Test auf Optimierung für Mobilgeräte: google.com/webmasters/tools/mobile-friendly Google PageSpeed Insights: developers.google.com/speed/pagespeed/insights Google Analytics: google.com/intl/de/analytics Quirktools Screenfly: quirktools.com/screenfly Am I responsive: ami.responsivedesign.is

[10]

How to Add Google Analytics to WordPress in Under 60 Seconds: premium.wpmudev.org /blog/how-to-add-google-analytics-to-wordpress-in-under-60-seconds [11]

Web Analytics Lösungen für Wordpress: wordpress.org/plugins/tags/web-analytics

[12]

Informationen zu Mobile Wordpress: en.support.wordpress.com/themes/mobile-themes

[13]

Anleitung Updating Wordpress: codex.wordpress.org/Updating_WordPress

[14]

Jetpack: wordpress.org/plugins/jetpack

[15]

Wordpress-Theme Make: thethemefoundry.com/wordpress-themes/make

[16]

ThemeForest: themeforest.net

[17]

StudioPress: studiopress.com

[18]

TheThemeFoundry: thethemefoundry.com

[19]

t3n.de/news/typografie-mobile-gerate-darauf-459722

[20]

Wordpress-Plugin Standout Color Boxes and Buttons: wordpress.org/plugins/standout color-boxes-and-buttons [21]

Responsive Menu: wordpress.org/plugins/responsive-menu

[22]

WHITEPAPER

37

WP Responsive Menu: wordpress.org/plugins/wp-responsive-menu

[23]

[24]

developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries

Mobile Applications for Wordpress: wordpress.org/mobile

[25]

Wordpress-Plugin Optimus: wordpress.org/plugins/optimus

[26]

Adaptive Images: adaptive-images.com

[27]

Wordpress-Plugin WP Super Cache: wordpress.org/plugins/wp-super-cache

[28]

Wordpress-Plugin Yoast: wordpress.org/plugins/wordpress-seo

[29]

flurry.com/bid/109749/Apps-Solidify-Leadership-Six-Years-into-the-Mobile-Revolution

[30]

googlewatchblog.de/2015/02/mobile-websuche-apps-ranking

[31]

blappsta.com

[32]

WHITEPAPER

38

Impressum Herausgeber: gutefrage.net GmbH Erika-Mann-Str. 23, 80636 München E-Mail: [email protected] Copyright: gutefrage.net GmbH 2015 Autor: Björn Rimpel Content Campaign Manager CatbirdSeat GmbH

Mit freundlicher Unterstützung von blappsta

blappsta.com [email protected]

WHITEPAPER

39

– Die Ratgeber-Community Erika-Mann-Straße 23 • 80636 München [email protected] • www.gutefrage.net © 2015 gutefrage.net

•

Tel.: 089 515 146-100