Mobil und responsiv
Kommentare

Mit dem Launch seiner neuen digitalen Plattform konnte Springer zügig seine damit verbundenen Geschäftspläne umsetzen. Eines der wichtigen Ziele war es, mobilen Nutzern die Verlagsinhalte möglichst einfach zugänglich zu machen.

Die Springer Fachmedien GmbH ist ein international führender Wissenschaftsverlag. Der Verlag entwickelt und managt Wissen und trägt es in die Welt – über das Buch, die Zeitschrift, das Internet. Die Entwicklung einer mobilen Bereitstellung von Inhalten ist daher auch bei Springer ein großes Thema. Mit der Entwicklung und Umsetzung einer digitalen Plattform wurde das IT-Beratungsunternehmen ThoughtWorks beauftragt. ThoughtWorks ist bekannt für eine innovative Herangehensweise an Aufgabenstellungen. So auch im Fall dieses Projekts. Die Idee war, ein technisches Konzept zu entwickeln, das mit dem Mobile-First-Ansatz und einem Responsive Webdesign viele Anforderungen erfüllt. Die Inhalte wurden qualitativ hochwertig und nutzerfreundlich auf unterschiedlichsten Endgeräten in den internationalen Märkten zugänglich gemacht.

 Abb. 1: Das ThoughtWorks-Team bei der Arbeit

Flexible und nutzerfreundliche Experience

Der Nutzerkreis von Springers mobilen Angeboten ist heterogen, da das Unternehmen sehr international aufgestellt ist. Die Größe und Auflösung der Displays bei verschiedensten Endgeräten der Nutzer können erheblich variieren. Das Erscheinungsbild und die Bedienung der Website eines Wissenschaftsverlags sollten jedoch den gleichen Qualitätsansprüchen genügen, wie dessen Inhalte. Statt native Apps für alle relevanten Plattformen zu entwickeln, wurde die Website mit Responsive Design umgesetzt, um sie so auf allen mobilen Endgeräten optimal darzustellen. Dieser webbasierte Ansatz bietet somit viele Vorteile. Das Responsive Design wurde fast ausschließlich von Experience-Designern statt Entwicklern umgesetzt. Die Entwickler konnten sich somit auf andere Projekte im Rahmen des Launches fokussieren. Möglich war dies durch Springers Codebasis, die mit einer Frontend-Infrastruktur entwickelt wurde, in der Layout und Inhalt klar getrennt und modular sind.

Der Ansatz „Mobile First“

Die Umsetzung des Projekts basierte auf dem Mobile-First-Ansatz. Das bedeutet, dass eine Website zuerst für die mobile Nutzung konzipiert wird. Es wurden nur Inhalte und Funktionalitäten implementiert, die für den mobilen Nutzer elementar sind, also seine Kernaktivitäten unterstützen. Dies führt zu einer Priorisierung des gesamten Inhalts sowie der Ausrichtung des digitalen Angebots – eine Prämisse, von der Nutzer auf jedem Gerät profitieren. Weiterhin werden gerätespezifische Features hinzugefügt, sofern sie durch mobile Browser unterstützt werden und für die mobile Nutzung des Angebots relevant sind. Steht das mobile Konzept, dann können mit steigender Bildschirmgröße und Geräteleistung zusätzliche Inhalte angeboten werden.

Abb. 2: Übersicht des digitalen Angebots von Springer

Bei der Konzeption wurde nicht nur an die mobile Nutzung gedacht, sondern die gesamte mobile Experience in die Betrachtung einbezogen. Ein Unterschied, der entscheidend ist. Das Team überlegte, in welchem Kontext und zu welchem Zweck Nutzer die Website von Springer mobil nutzen würden. Die Hypothesen wurden in einem so genannten Guerilla-Test – einer schnellen und einfachen Art des Usability-Tests – mit tatsächlichen Nutzern untersucht und validiert.

Optimal für jede Bildschirmgröße: Responsive Design

Die Experience Designer analysierten Nutzerstatistiken und entschieden, sich auf iPhone und iPad zu fokussieren. Statt jedoch die Website für spezifische Hardware zu entwickeln, setzte das Team auf Responsive Design. Darunter versteht man den Ansatz, Webseiten so zu erstellen, dass sie sich in Funktion und Darstellung den Fähigkeiten des Ausgabegeräts anpassen.

Schnelle Ladezeiten durch „Lazy Loading“

Die mobile Nutzung von qualitativ hochwertigen Inhalten ist für die Zielgruppe des Verlags heute wichtig geworden und wird gerne in Anspruch genommen. Als ärgerlich empfinden Kunden jedoch lange Ladezeiten des Contents, besonders bei hochauflösenden Bildern. Das Performanceproblem bei der mobilen Nutzung wurde mittels des „Lazy Loading“-Skripts adressiert, also einem Nachladen der Daten bei Bedarf. Hochauflösende Bilder werden nur dann angefragt und geladen, wenn sie im Browser sichtbar sind – Datennutzung sowie Ladezeiten konnten dadurch reduziert werden. Alle Frontend Elemente werden kombiniert und komprimiert, wenn sie an ein Ausgabegerät gesandt werden.

Die Nutzung des CSS Pre-Processor SASS war für das Team zentral: CSS Media Queries konnten in den vorhandenen Style Sheets schnell geschrieben, Variablen konnten genutzt werden und wiederverwendbare Codeteile beschleunigten den Prozess. Zusätzlich investierten die Designer Zeit darin, die Produktionsumgebung modular entsprechend den Geschäftsanforderungen zu gestalten. So konnte eine größere Flexibilität und eine Wiederverwendbarkeit in anderen Bereichen der Organisation erreicht werden. Durch die Modularisierung der Styles und deren Verbindung durch SASS konnten die Designer selbsterklärenden und dadurch einfacher zu pflegenden Code erstellen.

In der Praxis: Mobile Experience überzeugt Kunden

Ziel war, die Fertigstellung des Webangebots so schnell als möglich voranzutreiben. Das Designteam erstellte das mobil optimierte Frontend weitgehend ohne Hilfe von Entwicklern. Dadurch konnten andere Projekte unbeeinflusst parallel weiter vorangetrieben werden. Bereits nach wenigen Wochen wurde das mobile Projekt erfolgreich beendet. Im Gespräch mit potenziellen Kunden stellen Vertriebsmitarbeiter sowie auch Produktmanager häufig das neue Responsive Design vor: Das Verändern der Browsergröße, durch welches die Breakpoints ausgelöst werden und sich das Design für Tablets oder Smartphones anpasst, ist immer wieder ein Highlight.

Für Kunden ist es angenehm, nicht noch eine weitere App herunterladen zu müssen und trotzdem eine App-ähnliche Experience zu erhalten. So sind die Kunden glücklich, genau wie auch das Unternehmen, das dadurch Kosten für die Entwicklung und den Betrieb nativer Apps für die unterschiedlichen Betriebssysteme spart.

Durch die erfolgreiche mobile Umsetzung des Onlineangebots wurde der Mobile-First-Ansatz bei Springer als „Business as usual“ integriert. Für „Mobile“ gibt es kein dediziertes Team. Jede neue Funktionalität wird mithilfe des Mobile-First-Ansatzes entworfen und implementiert. Eine qualitative hochwertige mobile Experience ist nun integraler Bestandteil der Springer-Plattform – entwickelt sich die Plattform weiter, so wird dadurch automatisch auch die mobile Experience beeinflusst.

Abb. 3: Determing a mobile Strategy


Aufmacherbild: woman is reading the e-book lying on the hammock von Shutterstock / Urheberrecht: Izabela Magier

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -