Neue Apps:Blicken Sie in unsere Handy-Werkstatt

Die neuen Apps von Süddeutsche.de für iPhone und Android sind schlicht und funktional, basieren auf unserer bewährten Mobil-Webseite - aber wie entwickelt man ein solches Angebot? Wir wollen Ihnen einen Einblick geben: So funktioniert unsere Entwicklung für Ihre Handys.

Von Stefan Plöchinger

Liebe Leserinnen und Leser,

das Internet durchsetzt unseren Alltag - dank Smartphones, die ständig online sind. Information ist fast überall, fast jederzeit mit ein paar Fingerbewegungen verfügbar. Für eine Nachrichtenseite hat der Durchbruch des Immer-Internets Folgen, die kaum abzusehen sind. Eine Folge aber ist logisch: Wir müssen unser Angebot auf viel mehr Geräte bringen, als es noch vor wenigen Jahren nötig schien. Mit unseren neuen Apps für Android und iPhone sind wir hier einen großen Schritt weitergekommen.

Die technischen Herausforderungen an uns sind mit der Vielfalt der Geräte gewachsen, und wie wir in unseren neuen Apps für iPhone und Android darauf eingegangen sind, wollen wir gern erklären. Universalität war unser Anspruch: Alle Inhalte unserer Seite wollen wir auf allen Plattformen optimal präsentieren, ohne dass Sie viel von der Technik im Hintergrund mitbekommen und ohne dass mit jeder Plattform der Aufwand für uns wächst.

Mobile first. Vor anderthalb Jahren haben wir die Arbeit an unseren neuen Mobilangeboten begonnen und Smartphones seither als so wichtigen Bestandteil unseres Angebots wahrgenommen, dass wir jede Entwicklung für klassische Geräte immer auch in die mobile Welt übersetzen. Jeder Text, jedes Video, jede Grafik soll sowohl für das normale Netz als auch die Smartphones optimiert sein. Das gelingt uns inzwischen in 90 Prozent der Fälle, und auch wenn es aufwändig ist, sind wir uns sicher: Das mobile Internet ist inzwischen so allgegenwärtig, dass wir unser Angebot künftig wohl immer zuerst für Smartphones konzipieren und entwickeln müssen - erst dann für das gewöhnliche www. Bei der Überarbeitung unseres Artikellayouts vor wenigen Tagen war das schon ein tragender Gedanke. Wir haben jetzt auch auf der normalen Webseite ein einspaltiges Layout, inspiriert von den Mobilgeräten: weil wir zum einen glauben, dass das Ihren Lesegewohnheiten entgegenkommt, aber zum anderen auch, weil es die Konzepte der www-Seite und der mobilen Version annähert.

HTML first. Der Siegeszug der Smartphones ist eng mit Apples iPhone verbunden, und dadurch mit der App-Ökonomie des wohl wichtigsten Computerkonzerns der Welt. Wer seinen Nutzern keine ordentliche Internetseite fürs Handy bietet, kann in dieser Welt kaum bestehen; viele Leser wollen für jedes Angebot eine eigene App - und das inzwischen nicht mehr nur auf iPhones, sondern auch auf Android-Systemen und überhaupt jedem verfügbaren Smartphone. Als wir vor einem Jahr begonnen haben, eine Generalüberarbeitung unserer Süddeutsche.de-Apps zu planen, war das eine unserer größten Herausforderungen: Wie schaffen wir es, Apps für möglichst viele Smartphones zu konzipieren, ohne dass unser Aufwand multipliziert wird? Und was bieten wir Nutzern, für deren Handys wir keine Apps entwickeln können, weil sich die Investition auf absehbare Zeit nicht rechnen wird? Die Lösung für das Problem heißt aus unserer Sicht HTML5. Der neueste Standard der Internet-Programmiersprache ist so ausgefeilt, dass man viele Funktionen von Apps darin abbilden kann, vom Wischen auf einer Seite bis zum Speichern von Informationen. Wir haben damals beschlossen, zuerst eine moderne, möglichst alle Inhalte umfassende mobile Version unserer Seite zu bauen und dann neue Apps darum herumzustricken. Wir haben diese mobile Version im vergangenen Jahr weiter optimiert, so dass sie auch bei schlechter Verbindung schnell lädt - mit innovativen Techniken wie Lazy Loading, bei denen unter anderem Bilder erst nach den Texten geladen werden.

App Werkstattbericht

Entwürfe für das neue App-Logo: Apples Vorgaben sind streng, das Bild muss quadratisch sein, darunter passt nicht viel Text. Nun hat die Süddeutsche eine Bezahl-App für die digitale Ausgabe der täglichen Zeitung auf dem Markt (grün-weißes-Logo unten) - wie kann da ein App-Logo für die kostenlose Nachrichtenseite Süddeutsche.de aussehen? Weil der Text "Süddeutsche.de" unmöglich auf den knappen Platz passt, entschieden wir uns für SZ.de, schwarz auf weiß (links, zweites Logo von oben), im Kontrast zum grün-weißen "SZ Digital"-Logo - auch solche Aspekte bestimmen die App-Entwicklung.

(Foto: SZ.de)

Prinzip Nussschale. Außen eine Hülle, innen der wesentliche Kern - nach diesem Prinzip haben wir unsere neuen Apps gebaut. Sie basieren auf der HTML5-Seite, die im vergangenen Jahr immer weiter verbessert wurde, und strickt darum herum nur noch Funktionen wie Push-Meldungen oder die Navigation, die für das jeweilige Handy-Betriebssystem zwingend anzupassen sind. Das hält den Aufwand gering und garantiert trotzdem, dass Sie im Kern immer dasselbe Angebot sehen, ob Sie uns nun in Ihrem Handy-Browser, in der iPhone- oder der Android-App nutzen. Das Navigationskonzept unserer neuen Apps repräsentiert diese Lösung. Im Hauptbereich sehen Sie die HTML-Seite mit unseren Inhalten, als würden Sie sich im Browser Ihres Smartphones befinden - im Kopfbereich dagegen sind die App-Eigenheiten: die Tickerübersicht neuer Top-Meldungen und der Schalter zum Ausklappen des Menüs links. Wenn Sie das Menü links geöffnet haben und dort dann auf eine andere Rubrik klicken, wird im Hauptbereich einfach eine neue HTML-Seite geladen.

App Werkstattbericht

Entwürfe zur Navigation in der App: Erst war die Idee, mehrere HTML-Seiten wischbar nebeneinander darzustellen - als die App dann umfangreicher wurde, entschieden wir uns für ein inzwischen weit verbreitetes Navigationskonzept mit einem links ausfahrbaren Menü, das der ersten Facebook-App entlehnt ist. Im Hauptbereich wird einfach eine HTML-Seite angezeigt.

(Foto: SZ.de)

Dashboard-Logik. Das Nussschalenprinzip ist so simpel wie flexibel und ermöglicht uns, schnell neue Angebote in der App nachzulegen. Wir werden die linke Menüspalte in künftigen Versionen noch erweitern. Schon jetzt finden Sie im Dashboard Funktionen, die Ihnen die Orientierung erleichtern: eine Übersicht Ihrer zuletzt gelesenen oder gemerkten Texte, die Empfehlungen anderer Leser, am Ende des Menüs außerdem viele Einstellungen. Und keine dieser Funktionen ist weiter als einen Klick von der Hauptseite entfernt - das Bedienen der App sollte so einfach wie möglich sein, das war das Ziel.

Usability, also simple Nutzbarkeit, ist generell das Gestaltungsprinzip. Wie bei der Überarbeitung des Artikellayouts haben wir uns bei der Entwicklung der neuen Apps immer gefragt: Welche Funktionen sind wirklich praktisch, welche überflüssig? So schlicht wie möglich sollte das Layout sein, ohne Schnickschnack, schwarz-weiß mit ein paar Farbakzenten und der Maxime folgend: Ihnen, den Lesern, geht es unterwegs vor allem ums Informiertwerden und die Inhalte - und darum, dass unsere Seite schnell lädt, nicht um Brimborium außenrum. Die Optik und die Bedienlogik müssen dem Rechnung tragen. Wir haben die App darum erst wochenlang intern getestet, schließlich in Tests von Lesern beurteilen lassen und die Apps immer weiter korrigiert.

App Werkstatt

Entwürfe für die App-Optik: Dunkel oder hell? Schwarz-weiß oder farbig? Wir haben Dutzende Varianten durchprobiert und uns schließlich für ein schlichtes Layout entschieden - weil wir glauben, dass es Lesern unterwegs vor allem um die Inhalte geht und die optische Verpackung ihnen die Bühne lassen muss.

(Foto: SZ.de)

Liquid URL. Dieses technische Konzept ist nur ein Detail, illustriert aber auf besondere Weise, was wir mit guter Usability meinen. Wenn Sie aus einer unserer Apps einen Link auf einen Text an einen Bekannten verschicken, soll es egal sein, wo er ihn öffnet: Der Link soll einfach funktionieren und der Artikel optimal aussehen. Das ist bei vielen Seiten nicht immer der Fall. Sie kennen das vielleicht: Wenn Sie eine www-Adresse auf dem Handy aufrufen, bekommen Sie entweder eine nicht für Smartphones optimierte Seite zu sehen oder eine komplizierte Weiterleitung, bevor endlich die Mobil-Version des Textes erscheint. Und wenn Sie im normalen Web einen Link aufrufen, der Ihnen von einer Mobil-App geschickt wurde, bekommen Sie oft nicht die normale Seite auf Ihrem großen Schirm zu sehen, sondern eine für Smartphones verkleinerte. Das stört, und wir gehen deshalb einen anderen Weg, den wir für praktischer für Sie halten. Die URL, die Adresse, ändert sich bei uns nie - wohl aber das Layout. Es ist liquide. Wenn Sie uns im Web lesen, wird Ihnen unter der jeweiligen URL eine großformatige Seite geliefert; auf Handys bekommen Sie unter derselben Adresse die mobiloptimierte. Das hört sich wie eine Kleinigkeit an, ist aber ein wichtiges Konzept: Wir wollen, dass Sie sich nicht um URLs oder irgendwelche anderen technischen Probleme kümmern müssen - dass Sie nicht einmal etwas davon bemerken.

In diesem Sinne wollen wir die Apps jetzt weiterentwickeln. Wir haben aus den ersten Tests schon jetzt einige Verbesserungswünsche mitgenommen, die wir in den kommenden Wochen angehen wollen. So wie wir in den vergangenen Monaten unsere Mobilseite verbessert haben, werden wir auch die Mobil-Apps ab sofort laufend optimieren - und bitten deshalb jetzt um Ihre Rückmeldung. Funktioniert bei Ihnen etwas nicht, weil wir in der Vielfalt der Betriebssysteme etwas übersehen haben? Vermissen Sie ein Feature besonders dringend? Was würden Sie sich an Weiterentwicklungen wünschen?

Schreiben Sie gerne an hallo@sz.de, twittern Sie an @SZ. Wir freuen uns auf Ihre Kritik. Und hoffen, dass Sie ansonsten viel Spaß mit den neuen Apps haben.

Ihr

Stefan Plöchinger, Chefredakteur Süddeutsche.de

Zur SZ-Startseite

Lesen Sie mehr zum Thema

Jetzt entdecken

Gutscheine: