Radio.net auf dem iPad

radio.de gehört seit dem Launch des Portals in 2008 zu den beliebtesten deutschen Websites. Auch die mobilen Apps des Aggregators werden in den Stores der jeweiligen Plattformen unter den Top Apps gelistet. Weltweit war radio.de bisher als rad.io erreichbar. Mit dem Relaunch geht das Portal nun unter der neuen Dachmarke radio.net in 9 Ländern und in 9 Sprachen live. Bereits beim initialen Launch 2009 waren wir für die Umsetzung des Frontends verantwortlich.

Seitdem sind die technischen Möglichkeiten – ebenso wie die Herausforderungen – enorm gewachsen. Deshalb haben wir ein zeitgemäßes Design und aktuelle Technik für heutige und kommende Browser-Generationen umgesetzt. Mit dem umfassenden Relaunch liefern wir die technische Basis, um das Selbstverständnis der Online-Plattform konsequent erlebbar zu machen: So wird Radio hören einfacher und radio.de zum ständigen Begleiter im Alltag.

Das Design

Das Konzept der neuen Informationsarchitektur und User Experience wurde bereits im Vorfeld entwickelt, durch uns ergänzt und feinjustiert. Zentrale Idee ist der Aufbau der Seite in Modulen anstatt in einzelnen Seiten. Sie ist somit die Grundlage für ein extrem modulares und maximal responsives Design und Ausgangspunkt für unsere Arbeit am Interaktionsdesign und der UX.

Die unterschiedlichen Seitenfunktionen von radio.de werden als unabhängige Module betrachtet. Diese werden im jeweiligen Seitenkontext und auf das benutzte Gerät optimiert angezeigt (Cross-Device). So lassen sich beispielsweise Slider-Elemente auf dem Desktop durch Klicken auf Navigationselemente bewegen, auf iPad und iPhone werden für das selbe Element keine Pfeile angezeigt, so dass der Nutzer mit Wischgesten blättert.

Responsive und performant: Frontend-Client auf Basis von AngularJS

Das Web ist längst nicht mehr nur statisch und unveränderlich. Interaktive Funktionen und das dynamische Austauschen von Inhalten gehören heute zum Standard. Webseiten und zugehörige Unterseiten werden aber dennoch häufig als in sich geschlossene Seiten betrachtet.

Die Anforderung an die Umsetzung des radio.de-Frontends war von Beginn an, dass ein unterbrechungsfreies Abspielen von Musik seitenübergreifend möglich ist. Diese Funktionalität erreicht man mit einer Single-page-Webanwendung, bestehend aus nur einer Seite mit dynamisch nachgeladenen Inhalten. Weitere Funktionen sollten als Module umgesetzt werden. Aus diesen sollten sich wiederum ganze Seiten aufbauen lassen.

Wir entschieden uns bei der Umsetzung mit AngularJS für ein modernes JavaScript-Framework: Es gab uns mit seinem modularisiertem Ansatz, der performanten Datenbindung und der Testbarkeit die nötigen Mittel an die Hand, um die komplexen UI-Elemente und deren Anbindung an die radio.de-API voneinander entkoppelt umzusetzen.

Das radio.de-Frontend war aber aus verschiedenen Gründen keine klassische Single-page-Webanwendung.

Dies stellte sich als größte Herausforderung dar: Einen vollwertigen AngularJS Web-Client umzusetzen, der zugleich alle Anforderungen an Caching erfüllt und so die Performance der radio.de-Webseite sicherstellt.

An die vorgegebene Infrastruktur von radio.de gebunden, setzten wir suchmaschinenoptimierte Templates mittels JavaServer Pages (JSP) um. Diese auf dem Server generierten Templates dienen der schnellen Rückgabe der initialen statischen Daten. Außerdem bot uns AngularJS alle Möglichkeiten für eine dynamische Anzeige der Daten und das Austauschen von Inhalten, ohne dass ganze Seiten neu geladen werden müssen.

Mittels einer stark angepassten Version des CSS-Frameworks Twitter Bootstrap und weiteren Optimierungen bei der Code-Auslieferung konnten wir zudem eine korrekte Anzeige und Funktion in älteren Browsern wie dem Internet Explorer 8 erreichen.

Das Ergebnis ist ein technologisch einzigartiges und richtungsweisendes Produkt. In der Konsequenz seiner Umsetzung mittels AngularJS und in dieser Größenordnung stellt das Frontend von radio.de ein absolutes Novum für europäische Portale dar.

Im Fokus: Landing Pages für mobile Apps

Um das breite Angebot an Apps für unterschiedliche Plattformen zu kommunizieren, setzt radio.de auf Landing Pages. Auch hierfür haben wir eine maßgeschneiderte und technisch anspruchsvolle Lösung entwickelt. Sie vereint beispielhaft die Umsetzung aller Anforderungen an ein modernes Frontend im responsiven Design.

Die Landing Pages sind in vollem Umfang responsiv und zeigen je nach Gerät entsprechende Grafiken und Inhalte an (“adaptive”). Surft ein Besucher z.B. mit einem iPhone auf die Seite radio.de/app, so wird dies erkannt. Demzufolge werden die Grafiken der Seite mitsamt abgebildetem Gerät und entsprechender Ansicht der App und der korrekten Verlinkung zum jeweiligen App Store automatisch angezeigt.

radio.de Magazin und Editorial CMS: neues Angebot und maßgeschneiderte Technik

Erstmals bietet das Portal auch redaktionelle Inhalte, die das Angebot von radio.de ergänzen. Neben Reports über angesagte Musikstile und interessante Sender aus dem Portfolio werden jetzt auch Interviews mit bekannten Künstlern und Radiomachern veröffentlicht.

Das dahinter liegende System zur Pflege der Artikel wurde von uns eigens für radio.de konzipiert und entwickelt. Dazu haben wir mit dem PHP-Framework Symfony auf eine sichere und zukunftsorientierte Basis gesetzt.

Ein schlanker redaktioneller Workflow sowie ein effektives Rollensystem für Redakteure, Autoren und Administratoren erleichtert die Arbeit der Verantwortlichen enorm. Die maßgeschneiderte Lösung ermöglicht leichtes

Anlegen, Pflegen, Redigieren und Veröffentlichen von Artikeln. Außerdem ist das Editorial CMS technisch entkoppelt vom eigentlichen System der radio.de Webseite und wurde von uns eigens für die Infrastruktur vorbereitet und harmonisch integriert.

Ein weiterer Pluspunkt: Mittels eines an die Bedürfnisse von radio.de angepassten API können die Magazin-Inhalte von der eigentlichen Seite abgerufen und angezeigt werden. Senderempfehlungen zu einzelnen Artikeln werden im Editorial CMS direkt von der radio.de-API abgefragt und können vom Content Manager mit wenigen Klicks um weitere Inhalte angereichert werden.

Eine weitere Eigenentwicklung:
das Newsletter-System für responsive E-Mails

Als Deutschlands größte Radio-Plattform versendet radio.de wöchentlich einen Newsletter an einen entsprechend großen Empfängerkreis. Dieser enthält zum Beispiel Magazin-Artikel, Senderempfehlungen, Gewinnspiel-Hinweise und weiterführende Informationen.

Um Redakteuren und Content Managern das Erstellen und den Versand der Newsletter so einfach wie möglich zu machen, haben wir das Editorial CMS um Funktionen zum Newsletter-Versand erweitert, so dass die Vorbereitung der Inhalte komplett innerhalb des CMS erfolgt. Der fertige Newsletter sowie die Empfängerlisten werden über eine entsprechend konfigurierte Schnittstelle auf Seiten des Editorial CMS an den gewählten Versand-Dienstleister gesendet. Dabei war die Möglichkeit, die Versandanbieter ohne Weiteres wechseln zu können, eine der zentralen Anforderungen an das Newsletter-System.

Zur Erstellung eines Newsletters können Content Manager nun auf Magazin-Artikel zurückgreifen und diese mit wenigen Klicks in den Newsletter einfügen. Individuelle Newsletter-Texte wie Nutzeransprachen können ebenso unkompliziert im Editorial CMS geschrieben werden. Auch Listen mit Senderempfehlungen werden einfach durch Eingabe von Sendernamen zusammengestellt. Die zugehörigen Informationen und Logos der Sender werden über die radio.de-API abgefragt und bei Fertigstellung des Newsletters in das Newsletter-Template geschrieben. Die fertigen Inhalte sowie die Empfängerlisten werden über eine entsprechend konfigurierte Schnittstelle auf Seiten des Editorial CMS an den gewählten Versand-Dienstleister gesendet. Derzeit versendet radio.de seinen Newsletter über den Dienst Mandrill von MailChimp.

Auch das Newsletter-Template haben wir konzipiert, designed und responsiv umgesetzt. So wird der Newsletter in allen modernen E-Mail-Clients gut lesbar und korrekt angezeigt.

Radio Corporate Website

Die Corporate-Seite: TYPO3 Lösung für unkomplizierte Deployments

Auch die Corporate Webseite des Portals haben wir aktualisiert und infrastrukturell auf eigene Beine gestellt. Die Seite richtet sich an interessierte Senderbetreiber und Werbekunden. Auch sie nutzt die neue Designsprache und ist responsiv für alle Gerätegrößen optimiert. Das bestehende Firmenblog, Kontaktformulare sowie die Pressedownloads wurden überarbeitet und in die neue Corporate Site integriert.

radio.de bietet zu vielen verschiedenen Anlässen (z.B. für Karneval, Weihnachten oder die Fußball WM) spezielle Landing Pages mit Vorschlägen passender Sender an. Wir haben einen Mechanismus in TYPO3 integriert, der es den Content Managern erlaubt, unabhängig von der eigentlichen Struktur Seiten anzulegen und zu pflegen.

Die aktuelle Version 6.2 des TYPO3 CMS bietet ein solides System für das Hosting der Seite und ermöglicht radio.de die einfache Pflege von Inhalten, was zum Re-Launch vorerst auch in 10 Sprachen geschieht. Speziell für radio.de haben wir das System so konfiguriert, dass es in der dortigen Multi-Server-Umgebung leicht deployed und aktualisiert werden kann. Die Konfiguration ist dabei „Installations-agnostisch“ umgesetzt, sodass die automatische Einstellung je nach Installationsort und Server greift. So kann die Seite direkt nach dem Deployment ohne weitere Konfiguration betrieben werden.

Nach oben