Die Idee ist fixiert, die Entwicklung beginnt, es folgen die bekannten Aufgaben: Layout von Logik trennen, eine passende Datenbank finden und die Browser-Unabhängigkeit gewährleisten. Doch das Rad rollt bereits, warum also neu erfinden? Und die angebotenen Frameworks und Tools sind keineswegs überladene Alleskönner. Vielmehr tendieren die Hersteller zu spezialisierten Lösungen, die keine Leistungseinbußen durch zuviel Funktionalität mit sich bringen. Es gilt daher die Devise: Je spezifischer die Anforderung, desto passender das Framework. Der Vielzahl der Angebote entsprechend erhebt dieser Rundgang keinen Anspruch auf Vollständigkeit, sondern liefert auf den folgenden Seiten und in der anschließenden Tabelle einen Überblick der wichtigsten Vertreter.

CSS und HTML

Gerade bei der Browser-Unabhängigkeit gibt es viel zu tun. Da verwundert es kaum, dass gerade auf diesem Gebiet zahlreiche Bibliotheken um die Gunst der Entwickler buhlen. Etwa, um das Design zu vereinheitlichen. Darum kümmern sich CSS-Frameworks wie „960 Grid System“. Das Framework teilt eine 960 Pixel breite Seite in zwölf oder sechzehn Spalten ein. Über CSS-Klassen werden HTML-Blockelemente dann auf die Spalten verteilt, um ein stets einheitlich ausgerichtetes Gerüst zu erhalten.

Eher Geschmackssache sind CSS-Frameworks, die für ein typografisch einheitliches Bild sorgen oder Formulare „verschönern“. Um entsprechend Einfluss nehmen zu können, enthalten manche solcher Bibliotheken HTML-Templates. Sie sorgen zudem für optimierte Tabellen, W3C-konforme HTML-Mails oder bringen mit „Hacks“ technologisch humpelnde Browser wieder auf die Beine.

In eine gänzlich andere Kerbe schlagen „less“ und „Sass“: Sie erlauben den Einsatz von Funktionen, Variablen und Verschachtelungen in eigenem CSS-Code [1]. Das erleichtert etwa den Umgang mit Farbcodes oder mehrfach eingesetzten Effekten.

JavaScript

Ebenfalls der Browser-Unabhängigkeit geschuldet sind JavaScript-Frameworks. Sie verkürzen und vereinheitlichen Standard-Befehle der Skriptsprache, etwa den mühseligen Zugriff auf einzelne HTML-Elemente via „document.getElementById('id').style.display = 'none'“. Die Bibliothek „Prototype“ macht daraus ein simples „$('id').hide()“. Natürlich unabhängig vom verwendeten Browser und inklusive diverser Abfragen, ob das Element überhaupt existiert.

Neben derartiger Entwickler-Freiheit liegt die Stärke der JavaScript-Frameworks vor allem in der Usability: Tabellen sortieren, Inhalte verstecken und Formular-Eingaben auf ihre Richtigkeit prüfen funktioniert ohne Server-seitigen Code und mittels weniger Zeilen JavaScript. Auch AJAX, die portionierbare Server-Kommunikation durch die Hintertür, Drag and Drop und diverse Animationen sind mit den Bibliotheken möglich.

Rich Internet Applications (RIA)

Von einer Rich Internet Application ist die Rede, wenn der Nutzer mit der Seite interagieren kann, als befände er sich in einer Desktop-Anwendung. In die Klasse der „RIAs“ rutschen also sämtliche Frameworks, die das Erstellen solcher Applikationen unterstützen. Dass in dieser Kategorie mit „jQuery UI“ ein Namensvetter des JavaScript-Frameworks „jQuery“ auftaucht, ist also nur mitnichten Zufall: Die RIA-Version der Bibliothek enthält neben CSS- und JavaScript-Bibliothek ordnerweise Bilder und Symbole, die je nach Farbschema der eigenen Seite eingebunden werden.

Doch nicht nur mit HTML, CSS und JavaScript sind Anwendungen realisierbar, auch über Browser-Plugins wie Flash oder Silverlight ist ein beinahe natives Erlebnis möglich. Entsprechend warten Adobe und Microsoft mit Frameworks auf, um die Entwicklung solcher Applikationen zu erleichtern. Vorraussetzungen dafür sind neben einem entsprechend motivierten Benutzer vor allem ein Betriebssystem und ein Browser, die das Plugin auch zulassen. Was nach einem lächerlichen Apple-Adobe-Streit klingt, erlangt durch die stetig steigende Zahl mobiler Geräte neue Bedeutung.

Usability-Studien sind nicht selten ein Extra, das Website-Betreiber und -Gestalter hin und wieder in Auftrag geben. Das muss aber nicht unbedingt sein: Wie wäre es stattdessen mit einem festen Usability-Tag? In regelmäßigen Treffen kann man dabei die eigene Seite weiterentwickeln. Pro Teilnehmer rechnet man eine feste Zeit ein, die man nach Belieben mit Projekten füllen kann. Auf diese Weise kann man das Thema Usability als festen Teil in das eigene Portfolio aufnehmen.

Freunde rekrutieren

Als Probanden eignen sich Freunde sowie Bekannte und auch ein Zusammenschluss verschiedener Freelancer ist möglich. Allerdings sollten die Teilnehmer aus der Zielgruppe kommen, die auch die eigene Website ansprechen soll. Hält man zudem eine kleine Aufmerksamkeit, etwa in Form von Süßigkeiten und Getränken vor, steigt die Motivation der Probanden zusätzlich.

Bei qualitativen Usability-Studien kann man schon mit wenigen Nutzern wertvolle Erkenntnisse gewinnen. Usability-Experte Jakob Nielsen hat beispielsweise einmal erläutert, warum für die meisten qualitativen Tests nur fünf Nutzer notwendig sind. Selbst wenn man auf diese Weise nicht alle Schwachstellen findet, erhält man dennoch wichtige Erkenntnisse. Quantifizieren kann man später jederzeit mittels anderer Verfahren.

Gute Planung ist das A und O

Zur Vorbereitung der Studie sollte man sich Gedanken über die eigenen Nutzer machen. Es gibt unterschiedliche Nutzertypen, die mit verschiedenen Zielen an eine Website herangehen. Diese verschiedenen Absichten bildet man über das Szenario ab, das man seinen Probanden am Anfang der Studie erläutert. Möglich sind sowohl offene („Informieren Sie sich auf der Seite, ob Sie ein Thema interessiert“) als auch zielfokussierte Szenarien („Suchen Sie Informationen über den Staatstrojaner“).

Es bietet sich an, die Zeit für das Szenario einzuschränken. Dazu kann ein Satz wie „Sie haben einige Minuten Zeit, um sich über das Tagesgeschehen zu informieren“ dienen. Eine Zeitbeschränkung ist sinnvoll, wenn das Szenario selbst kein eindeutiges Ende hat und zu befürchten ist, dass Nutzer zu zeitraubenden Aktivitäten wie etwa Lesen von Artikeln übergehen.

Ganz grundsätzlich sollte man sich fragen, ob man ein Szenario explorativ aufbauen oder konkrete Aspekte vergleichen möchte. Ein exploratives Szenario wie „Schauen Sie sich auf der Webseite um“ eignet sich, wenn man noch keine Vorstellungen darüber hat, was den Nutzern bei der Website wichtig sein könnte. In einem solchen Fall erhält man allerdings sehr verschiedene Nutzungsmuster. Derartige Szenarien eignen daher gut für das Finden von Ansatzpunkten für weitere Studien.

Wenn es eher um konkrete Aspekte geht, sollte man ein klares Szenario formulieren („Informieren Sie sich über die Tagespolitik“). Teilt man die Versuchspersonen in zwei Gruppen auf, kann man später gut vergleichen, welche Gruppe das Szenario am besten gelöst hat.

Nutzern über die Schulter schauen

Die Interaktion der Versuchspersonen mit der Website ist für die Studie von zentralem Interesse und sollte daher genau erfasst werden. Im Rezeptionslabor geschieht dies meist mittels Blickaufzeichnungstechnologien, sodass später sichtbar ist, welche Elemente der Website die Versuchsperson betrachtet hat. Für eine kleinere Studie reicht es, den Bildschirm mit der Website aufzunehmen. Dazu eignet sich jedes Screen-Capturing-Programm. Sinnvoll kann auch eine Software sein, die Screen-Capturing und Audio-Aufnahme kombiniert. Auf dem Mac bietet sich dazu etwa Silverback an.

Lautes Denken als Analyseinstrument

Mit der Aufzeichnung der Nutzerinteraktion hat man bereits einen wichtigen Teil der Studie erfasst. Jedoch erklären diese Daten noch nicht, warum ein Nutzer auf eine bestimmte Art und Weise reagiert.

Eine Lösung für dieses Problem ist das so genannte „Laute Denken“. Lautes Denken bedeutet, dass ein Nutzer seine Gedanken ausformuliert („Wo finde ich jetzt den Warenkorb? Warum ist hier nicht so ein Symbol mit einem Einkaufswagen?“). Lautes Denken eignet sich für bewusste Vorgänge wie Navigation, nicht jedoch für eher Unbewusstes oder Dinge, über die man nicht gerne spricht.

Lautes Denken kann man wahlweise gleichzeitig oder nachträglich zur Rezeption durchführen. Kommt der gleichzeitige Ansatz zum Tragen, bittet man seine Probanden, während der Studie zu formulieren, was ihnen durch den Kopf geht. Fragt man die Probanden erst nach der Aufgabe, wie es ihnen ergangen ist, können sie sich vielleicht nicht mehr an alles erinnern, dafür ist jedoch die Rezeption selbst ungestört.

Die Entwicklung kann dabei auf verschiedene Arten erfolgen: Entweder entwickelt man eine Web-App programmatisch und hat die volle Kontrolle über den Quellcode. Oder man verwendet Frameworks, die durch ihre vordefinierten Templates und Funktionen die Entwicklung erheblich erleichtern (können).

Web-App in Handarbeit

Ein Vorteil der Web-App-Programmierung ist der einfache Einstieg für Web-Entwickler, da sie keine neue Programmiersprache erlernen müssen, sondern ihr bisheriges Wissen in die Entwicklung einer mobilen Website einfließen lassen können. So sieht eine einfache App, die ein Bild und eine Überschrift anzeigt, kaum anders aus als eine herkömmliche HTML-Seite. Allerdings wird diese später auch offline verfügbar sein.

Only for iPhone

Ruft man diese Website mit dem iPhone (ab iOS 3.0) auf, so wird, während die Inhalte der Startseite geladen werden, ein so genannter Splashscreen, also ein Lade-Bild, angezeigt („apple-touch-startup-image“). Das Meta-Tag „viewport“ legt die Auflösung fest, mit der die Seite vom Browser gerendert werden soll. Im Beispiel soll die Auflösung des Geräts verwendet werden. Zusätzlich wird die initiale Skalierung der Seite festgelegt und ob der Inhalt der Seite durch den User skaliert werden darf (etwa durch „Pinch to Zoom“).

<?xml version=„1.0“ encoding=„utf-8“?>
<!DOCTYPE html>
<html manifest=„config/cache.manifest“>
<head>
 <title>A simple Web-App</title>
 <meta name=„viewport“ content=„width=device-width, initial-scale=1.0, user-scalable=no“ />
 <meta name=„apple-mobile-web-app-capable“ content=„yes“ />
 <meta name=„apple-mobile-web-app-status-bar-style“ content=„black“ />
 <link rel=„apple-touch-icon“ href=„images/icon.png“ />
 <link rel=„apple-touch-startup-image“ href=„images/splashscreen.png“ />
 <link rel=„stylesheet“ href=„css/simple.css“ type=„text/css“ media=„screen,mobile“ />
 <script type=„text/javascript“ xsrc=„js/simple.js“></script>
</head>
<body>
 <header>
 <h1>Eine einfache Web-App</h1>
 </header>
 <section id=„content“>
 <img xsrc=„images/picture.jpg“ />
 </section>
</body>
</html>

Die drei Meta-Tags in Listing 1 werden derzeit nur von iOS interpretiert. Alle anderen mobilen Betriebssysteme ignorieren diese Tags, sodass sich keine Komplikationen dadurch ergeben.

Setzt man das Attribut „content“ beim Meta-Tag „apple-mobile-web-app-capable“ auf „yes“, so wird die Web-App nach dem Aufruf über den Homescreen im Vollbild-Modus ohne Browser-Leiste angezeigt. „apple-mobile-web-app-status-bar-style“ definiert das Aussehen der Status-Leiste und kann einen der folgenden Werte annehmen:

• default (grau)
• black (schwarz)
• black-translucent (schwarz, transparent)

App-Icon

Um die Web-App mit dem Homescreen des iPhones zu verknüpfen, wird ein Icon in der Größe 114x114 Pixel im Format PNG benötigt. An dieser Stelle besteht die Möglichkeit, mehrere „apple-touch-icons“ mit unterschiedlichen Größen anzugeben. Für das Beispiel wird die Icon-Größe des iPhone 4 verwendet, da die älteren iPhones dieses Icon in einer akzeptablen Qualität herunterrechnen können.

Android unterstützt App-Icons ab Version 2.1, das passende Tag heißt „apple-touch-icon-precomposed“. Wird ausschließlich dieses Tag verwendet, stellt das iPhone das App-Icon allerdings ohne die Standard-Effekte wie abgerundete Ecken, Schattierungen und Reflexionen dar; das Icon gilt dann als „precomposed“.

<link rel=„apple-touch-icon-precomposed“ href=„icon_android.png“ />

Offline arbeiten

Eine wichtige Eigenschaft von Web-Apps ist es, Inhalte auch offline verfügbar machen zu können. HTML5 stellt Webseiten dafür einen sogenannten Application Cache zur Verfügung, mit dessen Hilfe Inhalte auch ohne Netzverbindung verwendet werden können. Die Einbindung dieses Caches ist recht einfach, da es sich hierbei um ein Manifest handelt, das in Form einer Textdatei vorliegen muss.

CACHE MANIFEST
# 2011-10-26 Version 1.0

CACHE:
index.html
css/simple.css
js/simple.js
images/splashscreen.png
images/picture.jpg

NETWORK:

FALLBACK:
*.html /offline.html

Im CACHE-Bereich des Manifests werden alle Ressourcen angegeben, die vom Browser zwischengespeichert werden sollen. Unter NETWORK werden alle Ressourcen aufgelistet, die nicht speicherbar sind. Dazu zählen etwa Schnittstellen wie jene der Twitter-API. Sollten bestimmte Resourcen nicht verfügbar sein, so können im FALLBACK-Bereich Alternativen festgelegt werden. Im Beispiel wird festgelegt, dass für jede nicht vorhandene HTML-Seite die Datei „offline.html“ angezeigt werden soll.

Der Application Cache wird durch das Attribut „manifest“, das den Pfad zum Manifest enthält, im HTML-Tag aktiviert. Damit der Browser das Cache-Manifest interpretieren kann, muss dieses mit dem MIME-Type „text/cache-manifest“ vom Server ausgeliefert werden.

Cache aktualisieren

Um den Cache einer Web-App zu aktualisieren, leert der Benutzer entweder den Browser-Cache oder der Inhalt des Cache-Manifests ändert sich. Es reicht also nicht aus, dass sich der Inhalt einer Datei ändert. Im Beispiel-Manifest wird deshalb ein Datum und eine Versionsnummer in Form eines Kommentars verwendet. Ändert sich eine Datei, reicht es, im Manifest das Datum und die Version anzupassen, um der Web-App Änderungen mitzuteilen.

Design, Layout und UX

Um der Web-App einen nativen App-Look zu verpassen, kommen diverse CSS3-Eigenschaften zum Einsatz. CSS3 erfährt eine breite Unterstützung unter den mobilen Browsern, daher stellt es für Web-App-Entwickler ein äußerst nützliches Werkzeug dar. Einige der Eigenschaften im Überblick:

• Eigene Schriftarten in eine Webseite zu integrieren ist eigentlich kein neues Feature von CSS3, denn „@font-face“ wurde bereits mit CSS2 eingeführt. In der neuen Version unterstützt „@font-face“ jedoch beliebige TrueType- oder OpenType-Schriftarten.

@font-face {
 font-family: Monospace;
 src: url('fonts/own_monospace.otf');
}

• Dank CSS3 können Texte und Boxen mit einem Schatten versehen werden, ohne dafür spezielle Grafiken laden zu müssen. Das Rendering der Schatten ist allerdings sehr rechenintensiv, daher sollte sparsam mit diesen optischen Elementen umgegangen werden.

/* Die erzeugten Schatten sind nach oben und rechts je zwei Pixel breit. Der dritte
* Parameter bestimmt den Blur-Effekt, der letzte die Farbe des Schattens. */
box-shadow: 2px 2px 2px #000;
text-shadow: 2px 2px 2px #000;

• Auch abgerundete Kanten und Verläufe können mit CSS3-Bordmitteln realisiert werden. Aufgrund der neuen Tags sind auch hier die Grafiken überflüssig, was die Performance verbessert und damit die Ladezeit verkürzt.

/* Vier Angaben im Uhrzeigersinn für jede Ecke */
border-radius: 5px 5px 5px 5px;

/* Zwei Angaben, wodurch die untere linke Ecke den Wert der oberen linken und die
* rechte untere Ecke den Wert der rechten oberen Ecke übernimmt */
border-radius: 5px 5px;

/* Eine Angabe für alle vier Ecken */
border-radius: 5px;

/* Parameter eins legt fest, ob der Verlauf linear oder radial verläuft.
* X- und Y-Koordinaten legen den Start- und Endpunkt (2. und 3. Parameter) fest.
* Die beiden letzten Parameter schließlich definieren die beteiligten Farben. */
-webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#0000FF);

Aus Händlersicht bedeutet der Versand primär Kosten, die sich durch das Zusammenstellen der Bestellung (Kommissionierung), das Verpacken, das Frankieren und die eigentliche Versendung sowie die Kosten, die durch Retouren entstehen können, ergeben. Diese Kosten gilt es, möglichst gering zu halten.

Aus der Sicht des Kunden sollte der Versand dagegen kostengünstig – am besten kostenlos – sein. Darüber hinaus erwarten Kunden eine schnelle und sichere Lieferung der Ware sowie die Möglichkeit, diese bei Nichtgefallen problemlos und mit wenig Aufwand zurückschicken zu können. Die Forderung nach einer möglichst schnellen, kostengünstigen und zugleich zuverlässigen und kundenfreundlichen Abwicklung zeigt bereits, dass unter den Begriff Versand nicht nur die Übergabe von Briefen, Päckchen oder Paketen an einen Versanddienstleister fällt, sondern Shopbetreiber eine Vielzahl an Prozessschritten bedenken und wichtige Entscheidungen treffen müssen.

Beispielsweise die Versandart: Die aktuelle Studie des E-Commerce-Leitfaden-Projekts [1] „Shop-Systeme, Warenwirtschaft und Versand – So verkaufen Online-Händler“ zeigt, dass deutsche Shopbetreiber das Paket mit 94 Prozent am häufigsten als Versandart nutzen [2]. Das Päckchen (39 Prozent) und der Brief (31 Prozent) folgen auf den Plätzen. Ein Viertel der befragten Online-Händler versendet Bestellungen mit einem durchschnittlichen Warenwert über 100 Euro und gut ein Drittel nimmt über 250 Bestellungen je Monat entgegen. Wen man mit der Auslieferung der Pakete beauftragt, ist jedoch häufig eine schwierige Frage für viele Online-Händler.

VERSANDDIENSTLEISTER FINDEN

Versanddienstleister ist nicht gleich Versanddienstleister. So existieren neben den bekannten Paketdiensten wie DHL, Hermes, DPD, GLS oder UPS zum Beispiel auch Kurier- und Expressdienste, wie TNT oder FedEx. Zwar wickeln Shops die meisten Bestellungen über Paketdienstleister ab, aber für manche Lieferungen eignet sich womöglich auch der Einsatz von Kurieren oder Boten. Möglicherweise kommt auch eine Spedition in Frage. Im Vergleich zu einem Paketdienst, der mit hoch standardisierten Prozessen arbeitet, befördern Kuriere in der Regel die Sendungen persönlich und direkt vom Absender zum Empfänger. Häufig ist diese Dienstleistung jedoch auch deutlich teurer als der Versand durch einen Paketdienstleister.

Für welche Dienstleister ein Händler sich letztendlich entscheidet, sollte er gut überlegen. Dies zeigt sich auch darin, dass 43 Prozent der Online-Händler mehrere Paketdienstleister nutzen, um ihre Lieferungen zum Kunden zu bringen. Ein wichtiger Grund hierfür besteht in der Optimierung der Versandkosten. Dies hängt im Wesentlichen mit den unterschiedlichen Preisen der Dienstleister für die verschiedenen Paketgrößen, Gewichtsklassen und Bestimmungsländer zusammen. Außerdem liefern nicht alle Paketdienstleister auch in alle Länder. Zusätzlich können auch angebotene Zusatzdienstleistungen wie der Haftungsbetrag pro Paket oder die notwendige personalisierte Zustellung beim Kunden eine wichtige Rolle spielen.

Verfolgt man die Diskussionen zum Thema Social Media Monitoring in der letzten Zeit, bekommt man leicht den Eindruck, Social Media Monitoring sei hauptsächlich Kampagnenmonitoring oder das Controlling der eigenen Social-Media-Kanäle bei Facebook, Twitter, YouTube oder Google+. Angesichts der Tatsache, dass heutzutage zahlreiche Unternehmen selbst im Social Web aktiv sind und eigenen Content erstellen, der ebenfalls der Auswertung bedarf, entstehen allerdings viele weitere Anforderungen an das Social Media Monitoring. Dies stellt zahlreiche klassische Anbieter vor neue Herausforderungen.

Auf der anderen Seite tauchen ständig neue Anbieter auf, die sich auf die neu hinzugekommenen Themenfelder spezialisieren. Wir stellen die verschiedenen Social-Media-Analyse-Tools vor und bringen Ordnung in den unübersichtlichen Markt, in dem wir die unterschiedlichen Anbieter kategorisieren. Dabei geht es auch um die Frage, was Unternehmen bei der Auswahl eines Anbieters beachten und bei welchen Aussagen sie stutzig werden sollten.

Was ist Social Media Monitoring?

Beim Social Media Monitoring [1] werden mit Hilfe von Crawlern verschiedene Quellen durchsucht und die Ergebnisse über ein Online-Dashboard ausgeliefert oder in Form einer Analyse manuell bearbeitet und als Präsentation aufbereitet. Dabei unterscheidet man das sogenannte „Screening“ vom „Monitoring“: Während bei ersterem das gesamte öffentliche Netz durchsucht wird, werden beim „Monitoring“ mit Hilfe von Crawlern, Parsern und dem Zugriff auf APIs nur bestimmte Quellen wie zum Beispiel Foren, Twitter oder Facebook durchforstet. Teilweise werden dabei auch – durch Kooperation mit Datenlieferanten – Beiträge zugekauft.

Die Ergebnisse lassen sich anschließend in Form von Statistiken grafisch darstellen. Solch eine Grafik kann zum Beispiel aufzeigen, wie oft das eigene Unternehmen im Gegensatz zum Wettbewerb auf den verschiedenen Social Media Kanälen erwähnt wird. Darüber hinaus kann eine inhaltliche Bewertung stattfinden. So zeigt das Monitoring beispielsweise auf, ob das Unternehmen eher positiv oder negativ diskutiert und mit welchen Themenbereichen es in Verbindung gebracht wird.

Erste Schritte

Nehmen wir an, Unternehmen X ist noch nicht auf den Social Media Kanälen aktiv und will dort aus verschiedenen Gründen auch nicht unbedingt aktiv werden. Trotzdem möchte und sollte die Firma wissen, was Kunden und Konsumenten über das eigene Unternehmen denken und online diskutieren.

Im ersten Schritt sollte die Firma kostenfreie Tools nutzen, um ein Gefühl für die Anzahl und Stimmung im Social Web zu erhalten. Die meisten kostenfreien Tools beschränken sich auf das Monitoring einer Plattform (Twitter, Facebook, Foren etc.).

Für Foren sind Boardreader und die Google Suche nach Diskussionen empfehlenswert. Blogs durchsucht man immer noch am besten mit der Google Blogsuche oder beispielsweise Twingly. Wer die verschiedenen Werkzeuge kumulieren möchte, kann dies mit den Tools Yahoo Pipes oder Netvibes tun. Netvibes bietet zwischenzeitlich auch kostenpflichtiges Monitoring an. Dieser Anbieter hat den Vorteil, dass beim kostenfreien Account die Daten von Boardreader bereits enthalten sind.

Bevor Unternehmen im Social Web aktiv werden, ist es auf jeden Fall sinnvoll, die Kommunikation zum Unternehmen und der Marke im Rahmen einer Analyse manuell auszuwerten. Kennt man die Bedürfnisse und Interessen der Kunden, können durch die Erkenntnisse des Monitoring Strategien für die Social-Media-Maßnahmen abgeleitet werden. Wo sehen Konsumenten Probleme? Was wird als Stärke und was als Schwäche gewertet? Was beschäftigt die Verbraucher im Kontext der Produkte und Dienstleistungen und wie sind die Wettbewerber positioniert?

Die Welt steht vor einem profunden digitalen Umbruch. Dabei geht es nicht um analog gegen digital, Papier gegen Bildschirm oder Fernsehen gegen Internet. Viele verstehen die Veränderungen als Kampf der Systeme, doch den gibt es gar nicht. Die Spielregeln verändern sich allerdings. Wie bei den klassischen Medien wird auch im Internet das Bewegtbild die wichtigste Rolle spielen. Das wissen Verlage, Fernsehsender und Produzenten. Aber wie sie dort erfolgreich werden sollen, ist ihnen zum großen Teil noch vollkommen schleierhaft.

Formate schlagen Sender

Wer sich in seinem „sozialen Umfeld“ nach den beliebtesten Sendungen umhört, bekommt heute andere Antworten als noch vor zehn Jahren. Kaum noch jemand sagt, sein Lieblingsprogramm sei ZDF, RTL oder Pro7. Vielmehr heißt es heute: „Two and a half men“ oder „CSI Miami“. Die Sender treten als Dachmarke immer mehr in den Hintergrund. Stattdessen werden Formate zur Marke. Ob die Sendungen dann auf SAT.1 oder in der ARD laufen, spielt nur noch eine untergeordnete Rolle.

Auf YouTube findet dieser Paradigmenwechsel ohnehin statt. Kaum jemanden interessieren noch die Sender hinter den Formaten. Egal ob in den USA „Next New Networks“ [1], „The Station“ [2] oder „Machinima“ [3] oder in Deutschland das „Mediakraft Netzwerk“ [4] – sie alle sind mehr Supporter als Gatekeeper, also eine Art Serviceunternehmen, das die Produzenten unterstützt. Die Macher haben damit viel bessere Chancen, an ihrem Erfolg auch finanziell teilzuhaben. TV-Sender hingegen streben den „Total Buy Out“ an: Sie wollen für eine Pauschale alle Rechte für eine unbegrenzte Zeit erwerben und verfolgen so ein Geschäftsmodell aus der Vergangenheit.

Barrierefreiheit und Flexibilität

Im Internet gibt es die Beschränkung von Sendekapazitäten auf 24 Stunden am Tag und neun direkt anwählbare Sender per Fernbedienung nicht mehr. Social Media revolutioniert die Fernbedienung und bringt die jeweils passenden Inhalte direkt zum Zuschauer. Wer sich für Geranienzüchtung interessiert, stößt schnell auf entsprechende Inhalte. Für Medienmacher ergeben sich daraus vollkommen neue Möglichkeiten. Unterstützung erhalten sie dabei vom Netzwerk, und das Publikum (nicht die Presse oder andere programmbegleitende Medien) entscheidet über den Erfolg oder Misserfolg.

Auf YouTube tummeln sich inzwischen unglaublich kreative und innovative Medienmacher, die Webvideos produzieren, die nicht nur qualitativ Maßstäbe setzen, sondern auch ein Massenpublikum erreichen. Denn die Veränderung der Medienwelt hat einige Zielgruppen schon längst erreicht: Kinder ab 5 Jahren, Jugendliche und junge Erwachsene bis 30 konsumieren heute bevorzugt Webvideos. Fernsehen ist für sie höchstens noch ein Begleitmedium.

Authentizität gewinnt

Im Zentrum der Aufmerksamkeit stehen YouTube-Videos wie die der Aussenseiter [5], von Coldmirror [6] oder von Y-Titty [7]. Für Gesprächsstoff auf den Schulhöfen sorgt nicht die aktuelle Bravo, sondern das neueste Interview der Online-Talkshow Clixoom [8] mit dem Rapper Haftbefehl. Aber was haben die Webvideos, was das Fernsehen nicht hat? Authentizität! Ein vielfach strapazierter und oft falsch verstandener Begriff. Er meint nämlich genau das Gegenteil von dem, was ein Fernsehsender meint, der eine eigene Abteilung „Reality“ hat. Wenn ein TV-Sender von „Reality“ spricht, meint er inszenierte Geschichten, die vorgeben, die Realität zu sein. YouTube ist das Gegenteil: Die erfolgreichen Videos dort sind durch und durch real und authentisch.

Das hat mit der Geschichte und Entwicklung der beiden Medien Fernsehen und Internet zu tun. Das Fernsehen in den 50er Jahren stand für Unterhaltung. Musiksendungen, Krimis und Familienserien wie die „Hesselbachs“ füllten das Programm aus. Das hat sich bis heute nur wenig geändert. Die Konsequenz: Informationen müssen unterhalten, also wird selbst hier kräftig inszeniert. Der neueste Auswuchs dieses Phänomens sind inszenierte Reportagen. Da kann man schon von der Pervertierung eines journalistischen Formates sprechen.

Information contra Unterhaltung

Im Internet ist es genau umgekehrt. Nutzer suchen hier vor allem Informationen. Das hat zur Konsequenz, dass Unterhaltung informativ sein muss. Relevanz und eben Authentizität spielen eine erhebliche Rolle. Auch Comedyformate sind deshalb beispielsweise auf YouTube authentisch. Neben vielen Hintergrundberichten über die Produktion ist die Spielart immer so authentisch, dass der Darsteller bewusst „durchschaubar“ spielt und seine Person in der Rolle zu erkennen bleibt. Es ist ein bisschen so wie bei Hape Kerkeling oder Bastian Pastewka, die auch nie komplett in ihre Rollen schlüpfen, sondern weiterhin als Persönlichkeiten erkennbar sind. Bei Webvideos kommt aber noch etwas Entscheidendes hinzu: Die Protagonisten sind immer auch die Macher und sie gehen über Social Media eine direkte Beziehung mit ihrem Publikum ein (siehe auch Artikel „Influencer Economy“ in t3n 24). Hier wird nicht mehr gesendet, sondern es entsteht ein Dialog mit den Zuschauern. Durch die so entstandene Nähe sind dann Echtheit und Authentizität zwingend und werden vom Publikum auch erwartet.

Bestes Beispiel dafür ist die YouTube-Comedy-Truppe Y-Titty. Phil, TC und OG haben inzwischen ein Produktionsniveau erreicht, das deutlich über dem eines Großteils aktueller Fernsehproduktionen liegt. HD, Dolly (Kamerawagen) oder Farbkorrektur sind für sie keine Fremdwörter, sie arbeiten damit. Auch wenn ihr Humor zum Teil sehr pubertär ist (und damit zielgruppengerecht), der Erfolg der Produktionen übertrumpft schon heute so manches TV-Comedy-Format.

Wer an einen Online-Schmuckshop aus Berlin wie melovely.de denkt, hat sehr wahrscheinlich sofort diverse Vorurteile im Kopf: Das Büro beispielsweise ist doch sicherlich in Prenzlauer Berg oder irgendeinem der anderen „In-Stadtteile“ der Bundeshauptstadt. Ausgestattet sind die Räume selbstverständlich mit Macs. Und die Gründer sind Frauen – logisch.

Stimmt das bei melovely.de alles? Im Prinzip ja. Nur ist das Büro nicht in Prenzlauer Berg, sondern in Weißensee, einem bürgerlichen Stadtteil im Osten Berlins, den kaum ein Tourist auf der Karte hat. Auf den Tischen stehen tatsächlich Designer-PCs, aber nicht von Apple, sondern von Lenovo. Und die drei Gründerinnen sind in zwei Fällen Männer. Mit Vorurteilen ist das eben so eine Sache.

Manchmal aber stimmen sie dann doch. So heißt es beispielsweise, dass Gründer oft Feuer und Flamme für ihr Thema und ihre Ideen sind. Und wer die melovely-Macher Sina Erkenbrecher, Jochen Giljohann und Sascha Wohlgemuth trifft, der merkt schnell: Bei den dreien ist das tatsächlich so. Sie haben ihren Onlineshop nicht gestartet, weil sie auf das schnelle Geld aus sind. Stattdessen sind sie begeistert von den Designern und ihren Stücken und haben einfach unheimlich viel Spaß daran, ihr eigenes Geschäft aufzuziehen und ihre eigenen Entscheidungen zu treffen.

Als es im Gespräch mit t3n darum geht, was sie bisher alles gelernt haben aus ihrer Gründung, antwortet Sina Erkenbrecher spontan: „Natürlich ist der Arbeitsaufwand groß, aber unterm Strich hat sich der Schritt in die Selbstständigkeit mehr als gelohnt. Ich kann nur jedem raten, dem der Gedanke daran im Kopf herumschwirrt, den nötigen Mut aufzubringen und den Sprung in die Selbstständigkeit zu wagen.“

Wenn Idee, Know-how und Gelegenheit zusammenkommen

Aber natürlich „fliegen nicht die ganze Zeit nur Smarties durch die Luft“, wie es Jochen Giljohann ausdrückt. Wohl keine Gründung läuft ohne Anfangsschwierigkeiten und Überraschungen ab. So ging es auch den melovely-Machern. „Wichtig ist es dabei, einen langen Atem zu haben“, sagt Jochen Giljohann und da sind sich alle drei einig. „Man darf sich von seinem Weg nicht abbringen lassen“, ergänzt Sina Erkenbrecher.

Die Idee zum Shop reifte auch erst mit der Zeit. Das grundlegende Know-how aber war schon vorhanden. Sina Erkenbrecher arbeitete unter anderem als freie Online-Marketing-Beraterin und als Projektmanagerin für E-Commerce bei Bertelsmann in Berlin. Jochen Giljohann war lange Jahre Projektmanager – ebenfalls bei Bertelsmann. Sascha Wohlgemuth wiederum arbeitete bei der Webagentur novomind als Technical Architect – Bertelsmann war einer der Kunden. So ist dann auch klar, wie die drei zueinandergefunden haben.

Mit fünf Designern und 250 Stücken fing vor einem Jahr alles an

Durch Designer in ihrem Bekanntenkreis kamen sie schließlich darauf, dass diese zwar gern ihre Stücke übers Netz anbieten würden, aber nicht so recht wussten, wie sie das anstellen sollen. Das war der Beginn der Idee, wie Sina Erkenbrecher erklärt: „Wir kommen aus dem E-Commerce. Die haben ihre Stücke. Warum bringt man das nicht zusammen?“

Und so entwickelte sich aus dieser ersten Idee zunächst ein Businessplan. Und aus dem Businessplan wurde schließlich melovely.de. Was so leicht klingt, war in der Praxis aber durchaus an mancher Stelle schwierig.

Allein schon die Frage der Gesellschaftsform: Der Steuerberater sagte das eine, der Rechtsanwalt das andere. Und Gründerberater gebe es sowieso in rauhen Mengen, haben die drei Onlineshop-Macher festgestellt – nur empfehlen die auch immer wieder etwas anderes. Hinzu kamen in der Gründungsphase kleinere und größere Stresssituationen rund ums Thema Behörden und Verwaltung. So sollte es den Handelsregistereintrag nur mit einem Bankkonto geben. Das Konto aber gab es wiederum nur mit einem Handelsregistereintrag. „Manchmal hat man das Gefühl, man sei der erste Mensch, der gründet“, so Jochen Giljohann.

Mit fünf Designern und 250 Produkten ging es Ende 2010 an den Start. Jeder Ring, jede Kette, jedes Armband wurde dazu fotografiert – natürlich aus verschiedenen Blickwinkeln und am Model. Damit nicht genug, gehört zu jedem Produkt ein Beschreibungstext, der weit über ein paar Sätze hinausgeht. Die Interessenten sollen eben sehr genau erfahren, was ihnen hier angeboten wird und auch von wem. „Anfangs habe ich die Texte noch selbst gemacht. Inzwischen habe ich das abgegeben“, sagt Jochen Giljohann. Und was man noch selbst machen kann und was man lieber in andere Hände gibt, gehört zu den wichtigen Entscheidungen bei einer solchen Gründung.

Vor allem eine Sache stellte sich dabei als noch aufwändiger heraus als die Fotoshootings: die Anpassung des Shopsystems Magento. Zudem ist es offenbar gar nicht so einfach, bezahlbare und fähige Magento-Entwickler zu finden. „Magento ist ein Star am Markt. Da gibt es eine Art Goldgräberstimmung“, sagt Sascha Wohlgemuth. Im Moment sucht das Team gerade wieder einen Freelancer, der sie bei der Weiterentwicklung des Shops in der nächsten Zeit unterstützt.

Die Magento-Lernkurve jedenfalls sei schmerzhaft, erklärt Sascha Wohlgemuth. Vor allem: „Das vermeintlich einfache Leben mit Modulen ist in der Praxis doch ganz anders.“ Bei jedem Modul müsse man sehr genau hinschauen, ob es den einwandfreien Betrieb des Shops nicht gefährdet und ob es überhaupt die gewünschte Funktionalität bereitstellt. Inzwischen ist Sascha Wohlgemuth vielfach dazu übergegangen, die Features lieber selbst zu bauen: „Man kennt so jede Zeile genau und überfrachtet den Shop nicht mit unnötigem Ballast.“ Zwar sind sie noch immer von Magento überzeugt und wollen auch nicht wechseln – aber, so Sina Erkenbrecher: „Die Anpassung haben wir uns einfacher vorgestellt. Zum Livegang des Shops mussten wir erst einmal so einige Feature-Ideen weglassen.“ Inzwischen haben die melovely-Macher immerhin nicht mehr das Gefühl, gegen Magento kämpfen zu müssen. Jetzt können sie nach und nach all die Ideen realisieren, die noch auf der Wunschliste stehen.

Das Anforderungsprofil einer Webseite kann man schnell auf einen Nenner bringen: Der Anwender sollte eine Seite jederzeit erreichen und benutzen können – egal ob am großen Bildschirm daheim, am Laptop im Café oder auf dem Smartphone in der U-Bahn. Es geht darum, Inhalte bereitzustellen, die der User ohne Mühe immer und überall konsumieren kann.

Das ist auch im Sinne eines jeden Webseitenbetreibers, denn schließlich möchte man keinen Besucher ausschließen, nur weil dieser zufällig gerade per Smartphone im Web unterwegs ist. Betrachtet man die Desktop-Version für große Monitore als gesetzt, hat ein Webentwickler drei Möglichkeiten, eine mobile Variante bereitzustellen:

• Er liefert die Webseite eins zu eins mit der vollen Gesamtbreite (gewöhnlich ab 900 oder gar 1100 Pixel) auch an Smartphones aus. Der Benutzer muss bei dieser Variante oft zoomen, um Texte lesen zu können, Bilder anzuschauen oder um einen Überblick zu erhalten, welche Bereiche der Webseite er sich näher ansehen möchte.
• Der Webentwickler liefert zusätzlich zur Desktop-Version eine mobile Variante einer Webseite aus – mit eigenem Design und möglicherweise sogar eigenen Inhalten. Der Benutzer erhält eine grafisch reduzierte Variante, kann schnell durch die Inhalte surfen, hat aber auch keinen Zugriff auf die Inhalte der Desktop-Version.
• Die Webseite passt sich automatisch der Darstellungsgröße des Browsers an. Bei großen Bildschirmen geizt man nicht mit Platz und die Inhaltselemente zeigen eine große Typographie und viel Whitespace. Bei kleinen Bildschirmen arrangieren sich die Elemente der Webseite hingegen so, dass die Darstellung auch bei Platzmangel überzeugen kann – ohne dass der Benutzer zoomen muss.

Letzteres klingt doch mal richtig gut, oder? Responsive Web Design macht es möglich. Mit den neuen Möglichkeiten von HTML5, CSS3 und JavaScript können Webentwickler vorgeben, wie sich die Webseite der Darstellungsgröße anpasst und nicht, wie sich der Benutzer an die Webseite anpassen muss, um die Inhalte zu konsumieren. Das funktioniert unter anderen dank CSS3-Mediaqueries.

CSS3-Mediaqueries

Mit den CSS3-Mediaqueries kann man ein HTML-Element je nach Eigenschaft des darzustellenden Browsers ein anderes Aussehen verpassen. So könnte man die Seite auf einem Desktop-Rechner mit großem Bildschirm mehrspaltig nebeneinander zeigen. Neben der breiten Inhaltsspalte hätten dann noch zwei oder sogar drei Randspalten mit Zusatzinformationen Platz. Auf Smartphones hingegen müsste man den Inhalt linear, also unter- und nacheinander aufreihen, damit der Anwender den Inhalt einfacher lesen kann. Bei identischem HTML können Webentwickler so ein wenig mit CSS nachhelfen. Ein Konstrukt mit Mediaqueries könnte so aussehen:

Mediaqueries innerhalb einer CSS-Datei

@media screen and (max-width: 768px) and (orientation: portrait) {
	.meinElement {
		background-color: #c22;
	}
}

Zur Erklärung: Man gibt dem Element mit der CSS-Klasse „meinElement“ eine rote Hintergrundfarbe, wenn der Bildschirm eine Breite von 768 Pixeln nicht überschreitet und im Falle eines mobilen Gerätes im Hochformat gehalten wird.

Ein knappes Dutzend Eigenschaften [1] wie width/height, device-width/device-height oder sogar device-aspect-ratio kann man mit den Mediaqueries zwar nicht ausgeben, aber sich je nach Unterstützung durch den jeweiligen Browser zur Nutze machen.

So kann man also zuvor definierte Eigenschaften eines HTML-Elements in CSS für Auflösungen unter einer bestimmten Breite (max-width für den Browser und max-device-width für das Gerät insgesamt) oder über einer bestimmten Breite (min-width/min-device-width) überschreiben.

Die Mediaqueries kann man auf unterschiedliche Art und Weise einbinden, um sie zu nutzen. Als gesonderte Stylesheet im HTML:

<link rel="stylesheet" href="bigscreen.css" media="screen and (min-width: 1024px)">

als @import-Regel innerhalb eines Stylesheets:

@import url("bigscreen.css") screen and (min-width: 1024px);

oder eben auch als Block um CSS-Definition, wie im oberen Beispiel zu „.meinElement“.

Damit die Mediaqueries überhaupt greifen, und da das ständige rein- und rauszoomen den Lesefluss schnell trüben kann, gilt es, die Verkleinerung zu unterbinden. Vom iPhone kennt man dieses Verhalten: Der Browser zeigt eine große Webseite verkleinert auf dem Display an, mit einem Doppeltip auf das Display oder einer Wischgeste kann man einen Bereich vergrößern. Dazu hat Apple ein HTML-Meta-Element für den <head> einer Seite eingeführt, das sich mittlerweile zum de-facto-Standard gemausert hat:

<meta name="viewport" content="initial-scale=1.0, width=device-width">

Mit ihm setzt man den Zoom-Level auf 1.0 (100%) und gibt an, dass der Darstellungsbereich des Browsers genau so breit sein soll wie die Bildschirmbreite. Dass ist wichtig, denn auch ein iPhone mit der Bildschirmbreite von 768 Pixeln soll genau 768 Pixel darstellen. Das verhindert – Unterstütztung des Browsers vorausgesetzt – das Rein- und Rauszoomen und damit die lästige Arbeit beim Surfen.

Eine Chefposition bei Spiegel Online (kurz SPON) bedeutet Schnittstelle sein. Zur Chefredaktion, zum Anzeigenverkauf, zur IT, zum Projektmanagement. Und die strategische Planung verantworten. Manch ein Zeitgenosse wünscht sich insgeheim, Katharina Borchert wäre einfach eine freie Journalistin geblieben, die hier und da über Social Media referiert. Dann hätte sie noch immer Zeit, über die aberwitzigen Alltagsdinge zu bloggen, die sie täglich erlebt und die ihrem Gehirn interessante Schlussfolgerungen entlocken.

Schon vor zehn Jahren, als Internet noch etwas für verrückte Geeks war, hackte die 38-Jährige alias „Lyssa“ ihre Geschichten in das Blog „Lyssas Lounge“ [1] ein. Die Idee kam ihr, als sie nach der 9/11-Zeitenwende auf persönliche Augenzeugenberichte im Internet stieß und sich nächtelang durch diese neue Art der Berichterstattung wühlte. Ihre eigenen Geschichten handelten jedoch nicht von Terror und Zerstörung, sondern von schwarzen Tüten als Verpackung für Sexspielzeug, Schuhkaufproblemen, Hunden als Kommunikationsberater und später von ihren Geschäftsreisen.

Wäre Borchert Politikerin, sie wäre längst zum Rücktritt gedrängt worden: Wer so offenherzig über vermeintliche Tabuthemen schreibt – ob aktuell oder früher – hätte definitiv ein Problem. Heute schmunzelt sie darüber: „Ich habe nie damit gerechnet, mit meinen kleinen Geschichten jemals mehr als 30 Leute zu erreichen. Vor allem habe ich nicht damit gerechnet, dass man Lyssa eines Tages mit Katharina Borchert in Verbindung bringen würde.“

Auch wenn die Hamburgerin mit ihrem heutigen Wissen manches ein bisschen anders formuliert hätte: Peinlich sind ihr die literarischen Ergüsse nicht. Der Beweis: „Ich hätte die Sachen doch nachträglich löschen können. Peinlich wäre es mir nur, wenn sie schlecht geschrieben wären.“ Heute bloggt Lyssa zwar nicht mehr, zwitschert aber. Ohne Twitter geht bei Borchert gar nichts. Leider habe es der Kurznachrichten-Dienst in Deutschland schwerer als in vielen anderen Ländern, wo selbst Politiker muntere Tweets unters Volk brächten. Ob als Lyssa oder Spiegel-Online-Chefin: Die Sozialen Medien sind und bleiben ihr Herzensthema.

Borcherts Aufstieg in den gesitteten Redaktionsdienst beginnt mit einem Anruf von Bodo Hombach, dem Geschäftsführer der WAZ-Gruppe. Er will die bekannte Bloggerin ins Boot holen, um den Online-Auftritt auf Vordermann zu bringen. Bis dato scheint das Web-Portal eher ein Alibi-Projekt zu sein, andere Nachrichtendienste sind 2006 schon deutlich weiter. Borchert findet die Anfrage mutig, sie selbst hätte sich damals für diesen Job nicht angestellt. Das finden andere auch. Mit Kritik habe sie gerechnet, erinnert sich Borchert, schließlich sei diese Personalie für alle überraschend gewesen. „Was dann kam, war aber schwer zu verdauen.“

Die heftigsten und persönlichsten Anfeindungen seien ausgerechnet aus den eigenen Reihen, aus der „Blogosphäre“, gekommen. Da wurde sie plötzlich mit Schmeicheleien wie „Peitschen-Borchert“ überschüttet, ein Anklang auf ihr manchmal etwas strenges Aussehen mit straffem Pferdeschwanz und dunkler Brille. Der Jubel darüber, dass man auch mit Bloggen etwas werden kann, blieb aus. Als „Lyssa“ wäre es leicht gewesen, damit umzugehen, ihr Hang zum Sarkasmus hätte phantastische Reaktionen hervorgebracht. Aber als frischgebackene Chefin von DerWesten musste der Lyssa-Hut auf der Hutablage bleiben. „Die Zähne zusammenzubeißen und die Klappe zu halten war extrem schwer“, gibt sie zu.

Unter den kritischen Augen von Journalisten, WAZ-Mitarbeitern und Bloggern verändert Borchert nach und nach den Onlineauftritt der Ruhrpott-Mediengruppe. Vieles davon ist nach außen hin nicht gleich sichtbar, es geht ihr zunächst um einen kulturellen Wandel. Eine ihrer ersten Maßnahmen ist, die für den Web-Auftritt zuständigen Redakteure ins WAZ-Gebäude zu holen. Bis zu diesem Zeitpunkt sitzen die Online-Schreiber in einem Gebäude zehn Minuten von der Printredaktion entfernt: „Frustriert, unterbesetzt, unterfinanziert, ohne Konzept und Strategie, nicht ernst genommen: ein echt tragischer Zustand“.

Offene Tür und dreckiges Lachen

Unter Bocherts Leitung wird DerWesten ein viel gelesenes Nachrichtenportal, hinter dem ein Team mit Umsatzverantwortung, eigenem Budget, eigener Online-Redaktion und „echtem Selbstbewusstsein“ steht: „Ich habe mühsam gegen die Auffassung angearbeitet, dass Onlineredakteure Content-Schubser sind, die einfach nur Inhalte von A nach B heben.“ Statt dessen sollen sie sich als echte Redakteure begreifen, die Multimedia können, eigene Geschichten bringen, Social Media vorantreiben und sich in Sprache und Inhalt auf die spezielle Leserschaft einstellen. Nichts habe sie beruflich bisher so sehr befriedigt wie die Tatsache, an dieser kulturellen Veränderung wesentlich mitgewirkt zu haben.

Was Borchert aus dieser Zeit ebenfalls mitnimmt, ist eine bahnbrechende Selbsterkenntnis: „Ich bin wahnsinnig gerne Chefin. Nicht wegen des größeren Büros, sondern weil mich die Verantwortung für Menschen glücklich macht.“ Als sie zehn ist, nimmt sie auf dem heimischen Bauernhof in Wattenscheid Tiere auf, die keiner haben will. In ihrer jetzigen Position hat sie es zwar mit Menschen zu tun, aber die grundsätzlich offenen Türen sind geblieben. Dies jedenfalls behaupten ihre Ex-Mitarbeiter von DerWesten in einem bewegenden Abschieds-Video [2]. Auf kleine Schiefertafeln haben sie Dinge geschrieben, die man im Ruhrpott ohne Borchert vermissen wird: „offene Tür und offenes Ohr“, „das fröhlich-dreckige Lachen“, „deinen Rückhalt“, „Pizza und Wodka nach 22 Uhr“ – und natürlich ihren berühmt-berüchtigter Hund Carla, der täglich mit in die Redaktion kommt und mit seinem Spielzeug quietscht, wenn er sich vernachlässigt fühlt.

Nun ist die einstige Bloggerin also bei SPON – kein schlechter Aufstieg, wenn man bedenkt, dass sie in ihrem Leben „Null Karriereplanung“ gemacht hat. Stattdessen habe bis Anfang 30 die völlige Planlosigkeit geherrscht und Überforderung angesichts der unzähligen Berufsmöglichkeiten. Vermutlich hat die Blog-Erfahrung nach 9/11 ihrem Leben die entscheidende Wendung gegeben. Seitdem ist ihre Existenz stark mit dem Internet und den Sozialen Medien verbunden. Aber es hätte auch anders kommen können, nach dem Abitur war Borchert zunächst für ein Entwicklungshilfeprojekt in Namibia und für die UNO tätig – Bereiche, die sie bis heute reizen. Es folgte ein Jurastudium und die Erkenntnis, dass der normale juristische Weg ihrer Kommilitonen nichts für sie sei.

Paid Content? Nicht bei Spiegel Online

Wer Angst hat, dass Spiegel Online mit der neuen Chefin vielleicht auch bald auf Bezahlinhalte setzt, kann sich entspannen. Paid Content wird es unter ihrer Führung nicht geben. Dies sei aber keine ideologische Überzeugung, sondern beziehe sich auf Spiegel Online, es gebe in diesem Bereiche keine „One-Size-Fits-All“-Lösungen. Spiegel Online befinde sich in der priviliegierten Position, mit seinem reichweitenbasierten Modell seit sieben Jahren profitabel zu sein – da gebe es doch keinen Grund, etwas zu ändern.Mit Printinhalten geht ihr Team hingegen äußerst restriktiv um: Maximal drei Printartikel pro Woche schaffen es auf die Online-Seite, da wird sauber getrennt. Borchert glaubt trotzdem daran, dass es eines Tages funktionierende Paid-Content-Systeme geben wird, erste Beispiele seien die New York Times oder die Financial Times. „Verlage dürfen nur nicht den Fehler machen und so rigide auf Paid Content setzen, dass sie sich gegenüber Verlinkungen in den Sozialen Netzwerken verschließen – dann verlieren sie ihre Relevanz.“

Ideologisch wird Borchert nur, wo es um die Frage nach gutem Journalismus geht: Kritisch und unabhängig müsse er sein, Meinungsfreiheit gehe über alles. „Nach dem Tod von Steve Jobs bekamen wir heftigste Protestbriefe. Manche kündigten uns die Leserschaft, weil wir angeblich zu positiv über Jobs schrieben, andere verwünschten uns, weil wir angeblich zu kritisch berichteten – das zeigt doch, dass wir alles richtig machen.“

Eine Studie von ABI Research zeigte erst kürzlich, dass Tablet-PCs die Netbooks bei den Verkaufszahlen überholt haben. Den fortschreitenden Wandel kann man auf jeder Messe, bei der Blogger anwesend sind, gut beobachten. Viele haben jetzt ein Tablet in der Hand. Trotzdem scheint der Wechsel nicht alle Notwendigkeiten zu befriedigen, sieht man doch bloggenden Tabletbesitzer oft ein paar Minuten später wieder mit einem Notebook oder Netbook auf dem Schoß. Warum das?

Offenbar nutzen viele ihr iPad oder ihr Honeycomb-Tablet ausschließlich zum Konsumieren von Content. Also zum Beispiel für einen schnellen Blick in den Reader oder auf themenrelevante Blogs. An der Produktion scheint es zu hapern.

In diesem Artikel geht es daher um das Bloggen mit Tablets. Speziell um die Kombination von WordPress mit den mobilen Betriebssystemen Android und iOS. Dabei geht es sowohl um die Verwendung des WordPress-Backends im Browser, als auch um die Nutzung der kostenlosen WordPress-App sowie der kostenpflichtigen App „Blogsy“. Während Netbooks dem Nutzer eine klassische PC-Oberfläche und eine vollwertige Tastatur bieten, sind mobile Betriebssysteme wie iOS und Android Honeycomb im Vergleich dazu sehr eingeschränkt. Dies beginnt beim Funktionsumfang von Apps, die man beispielsweise zur rudimentären Bearbeitung von Fotos benötigt, und endet natürlich bei der Eingabe von Texten über einen Touchscreen.

Die Wahl der Eingabemethode

Thema Tastatur: Natürlich kann man sich zu einem Tablet eine zusätzliche Hardware-Tastatur anschaffen, verliert damit aber umgehend den Gewichtsvorteil gegenüber einem Sub-Notebook oder Netbook. Bedient man sich einer Bluetooth-Tastatur, hat man zudem einen weiteren Akku, um dessen Ladestand man sich kümmern muss. Die einzige Ausnahme bildet hier das Eee Pad Transformer, das im Tastatur-Dock sogar noch einen zusätzlichen Akku unterbringt, um das Tablet länger am Leben zu erhalten. Ob man nun Touschscreen oder Tastatur bevorzugt ist zum Teil Geschmackssache – die notwendigen Arbeitsschritte beim Erstellen eines vollwertigen Blogpost ändern sich dadurch nicht.

Alles rund um Fotos

Unabdingbar für einen Blogpost ist die Integration von Fotos. Entweder man erstellt selbst welche mit einer digitalen Kamera oder man verwendet Material von Dritten. Typischerweise macht man jedoch eigene Fotos und fügt diese in einen Blogpost ein. Dafür muss man zunächst die Bilder auf den Tablet-PC übertragen.

Für Apples iPad gibt es für wenige Euro einen Adapter, mit dem man Inhalte direkt von der Speicherkarte der Kamera auf den internen Speicher des iPad übertragen kann. Diese befinden sich dann in der standardmäßig installierten Foto-App von Apple.

Honeycomb-Tablets dagegen unterstützen in der Regel ab Version 3.1 den USB-Host-Modus. Das heißt, dass man einfach ein externes Gerät zum Auslesen von Speicherkarten an das Tablet anschließen kann. Apples Speicherkarten-Adapter liegt übrigens auch ein USB-Adapter bei. So kann man an beide Tablet-Sorten eine normale USB-Tastatur anschließen.

Mit einer weiteren App, zum Beispiel Photoshop-Express, kann man dann grundlegende Bearbeitungsschritte vornehmen, etwa Verkleinern oder Zurechtschneiden. Das ist sinnvoll und oft nötig, denn das Hochladen von einem oder gar mehreren 10-Megapixel-Bildern mit einer 3G-Verbindung ist doch ein ziemlich mühseliger Vorgang.

Nachdem die Fotos im abgespeckten Format im internen Speicher des Tablets vorliegen, kann man diese entweder zu Foto-Hostern oder direkt in das eigene Blog hochladen. Vorteil bei Hostern wie Flickr oder Picasa: Sie stellen in der Regel Apps zur Verfügung, mit denen man den Upload abwickeln kann.

Möchte man seine Fotos in das eigene Blog hochladen, wäre es das Naheliegendste, das WordPress-Backend im Browser zu öffnen, um dort den Upload wie üblich zu starten. Apple macht einem hier leider einen Strich durch die Rechnung, weil man über die browserbasierte Uploadfunktion nicht auf das interne Dateisystem zugreifen kann. Unter Android ist dies zwar grundsätzlich möglich – auch mit dem Flash-Uploader – allerdings ist die Performance des WordPress-Editors unter Android mehr als bescheiden. Somit wird der Upload zu einem fummeligen Geduldsspiel. Die letztlich empfehlenswerte Alternative besteht in der Nutzung der kostenlosen WordPress-App. Mit dieser kann der Nutzer auch unter iOS direkt auf die Fotos zugreifen und den Upload starten.

Videos einbetten: Problem mit dem Code

Fotos sind nicht alles. Blogs können und sollen mehr bieten. Das Einbinden von YouTube- oder Vimeo-Videos gehört daher zum Tagesgeschäft. Allerdings steht man hier vor der nächsten Herausforderung. Besucht man mit einen Tablet-Browser beispielsweise YouTube, landet man auf der mobilen Version, auf der kein Embedding-Code zum Rauskopieren zur Verfügung steht. Abhilfe schafft ein Browser, bei dem man die Browser-Agent-Kennung auf eine Desktop-Version ändern kann. Schon kommt man, wie gewohnt, an den Code zum Einbetten. Unter iOS kann das beispielsweise der Atomic-Browser und unter Android der Dolphin-Browser.

Schreiben, formatieren, publizieren

Wie man auf einem Tablet textet, ob direkt auf dem Touchscreen oder unter Zuhilfenahme einer externen Tastatur, hängt neben den persönlichen Vorlieben des Nutzers sicherlich auch von der Textmenge ab. Mal eine kürzere Nachricht auf dem Tablet verfassen, ist sicher unproblematisch. Bei längeren Texten ist der Touchscreen aber gewöhnungsbedürftig.

Auch die Wahl des Tools für das Verfassen von Texten bleibt jedem selbst überlassen. Wenn man schon für den Foto-Upload die WordPress-App öffnet, kann man in dieser auch gleich den Text verfassen. Man muss dabei keine Angst vor Textverlust haben, wenn im ICE mal wieder die Verbindung ins Internet abreißt. Die App speichert Texte zunächst lokal auf dem Tablet selbst.

Hat der Blogger den Text verfasst, geht es an die Formatierung. Bei dieser beschränkt sich die WordPress-App auf beiden Systemen allerdings auf die absoluten Basics: fett, kursiv, unterstrichen, durchgestrichen und <blockquote>. Weitere Feinheiten, wie die Ausrichtung des Textes, Überschriftenformatierungen, Aufzählungen oder die Textfarbe, fehlen komplett. Selbst das Tag für den Zeilenumbruch (<!--more-->) muss man von Hand einfügen.

Wer fit in HTML ist, dem wird das alles nichts ausmachen, denn im Editor kann man Code für Formatierungen verwenden. Natürlich könnte man sich nun, um mit seinem Tablet zu bloggen, diese Skills aneignen oder einfach die wichtigsten Befehle auswendig lernen. Mit den Touchtastaturen von Android und iOS wird die Eingabe der hierfür benötigten HTML-Zeichen allerdings schnell zu einer fummeligen Angelegenheit, da diese nicht auf der ersten Ebene der virtuellen Tastatur liegen.

Besitzer eines iPads können an dieser Stelle relativ komfortabel auf das WordPress-Backend zurückgreifen. Dieses funktioniert in der mobilen Version des Safari-Browsers ganz passabel. Auch das Einfügen von Fotos an der gewünschten Stelle sollte dann über die Galerie im WordPress-Admin erfolgen. Die App bietet einem hier leider nur die Möglichkeit, das Foto über oder unter dem Text einzufügen. Somit stellt sich der Bloggingprozess mit dem iPad etwa so dar:

1. WordPress-App öffnen
2. Fotos hochladen
3. Text schreiben
4. Artikel als Entwurf ins Blog übertragen
5. Finale Formatierung im Blog-Backend mit dem Browser vornehmen

Bis auf den letzten Schritt ist die Vorgehensweise unter Android die gleiche. Allerdings folgt dann eine Geduldsprobe, wenn es an die Formatierung geht. Denn leider gehen zum Beispiel beim Einfügen eines Bildes sowohl der Android-Webkit-Browser, als auch Opera und der Dolphin-Browser bei der Performance in die Knie. Dazu kommt es häufig zu Darstellungsfehlern, wenn man zum Beispiel auf der Upload-Seite nach unten scrollen oder einfach nur Text markieren und dann formatieren möchte.