der Freitag und Plone:
Gestaltung und Implementierung einer crossmedialen Leseerfahrung

Neue Website für die Online Wochenzeitung "der Freitag"
von Design Patterns zu Design Systemen.


Erfahren Sie mehr
der Freitag
der Freitag

Unsere Aufgabe

„Ein optimales Leseerlebnis und Zugang zu allen Inhalten, jederzeit und von überall!“ Vor dieser Herausforderung zu Zeiten des mobilen Internets stand auch die Wochenzeitung „der Freitag – Das Meinungsmedium“. Auf der Suche nach kompetenten Dienstleistern zur Gestaltung einer optimalen, crossmedialen Leseerfahrung fanden die Verantwortlichen mit Abstract-Technology einen Partner vor Ort in Berlin. Die Aufgabe von Abstract-Technology war es also in enger Kooperation mit dem IT-Team des Verlages, eine zukunftssichere Doppel-Strategie zu erarbeiten. Die Anforderungen des Projekts bestanden einerseits darin, das aus der Sicht der IT erforderliche Update des vorhandenen Redaktionssystems auf Basis von Plone behutsam auf die neueste Version zu bewerkstelligen, und gleichzeitig das Interface Design, die Informationsarchitektur und eine optimierte Nutzererfahrung (User Experience) konzipieren und in einem Projekt umzusetzen. „Unser Produkt ist der Inhalt, den wir produzieren“, so Dr. Christiane Düts, Geschäftsführerin von „der Freitag“, und weiter: „Wir brauchen Partner mit denen wir täglich unsere Inhalte ergebnisorientiert, sicher und hochwertig von print nach online transferieren können“.

„der Freitag“ wurde 1990 gegründet. Als 2008 der heutige Verleger Jakob Augstein die Zeitung übernahm, bezogen Redaktion und Verlag ihre neuen Räumlichkeiten am Berliner Hegelplatz. „der Freitag“ – Das Meinungsmedium“ erscheint seit Februar 2009 unter neuem Label in Print und online und pflegt mit dem britischen „Guardian“ eine exklusive Konsortial-Partnerschaft für den deutschsprachigen Raum. Print und Online sind eng miteinander verzahnt – Beiträge aus der https://Online-Community sind fester Bestandteil der Zeitung und bilden ein eigenes Ressort auf freitag.de. „der Freitag“ – Das Meinungsmedium“ überzeugt eine seit Jahren wachsende Leserschaft mit seinen Qualitäten als linksliberale Wochenzeitung – er liefert Hintergründe, fordert souverän, anspruchsvoll und klug zum gesellschaftlichen Dialog und zur Diskussion auf und trägt selbst mit kritischen und konstruktiven Meinungen dazu bei. Die Auflage für Print näherte sich im dritten Quartal 2017 der Schwelle von 25.000 verkauften Exemplaren.

Der Freitag - Information Architektur

Web-Komponenten oder Widgets für die Zeitungsproduktion aus dem Verlag


Vorgehen

Seit 2010, als Responsive Web Design Einzug in die Webentwicklung genommen hat, gab es einen kontinuierlichen Wandel sowohl in der Art und Weise der Konzeption von Inhalten genauso wie in der technischen Umsetzung. Selbstverständlich wird von Beginn an die Erwartungshaltung der Anpassung einer Webapplikation an die zahlreichen unterschiedlichen Geräteklassen und Devices erfüllt. User Experience (UX) und Usability dagegen wurde lange Zeit zu wenig Aufmerksamkeit gewidmet. Die Gestaltung zeitgemäßer digitaler Produkte verlangt heute, individuelle Erfahrungen und persönliche Vorlieben des Nutzers bei deren Verwendung zu berücksichtigen. Wir haben daher gemeinsam mit „der Freitag“ – Das Meinungsmedium“ in einem sehr frühen Projektstadium eine Recherche über die Nutzungsgewohnheiten der Zeitungsleser durchgeführt. Die daraus abgeleiteten Anforderungen an die Benutzerschnittstelle erforderten für eine nahtlose Integration in das existierende Plone Content-Management-System eine ausgeprägte Flexibilität im Systemdesign, welche wir durch weitgehende Modularisierung der Systemkomponenten sowie durch einfache Erweiterbarkeit der Module sicherstellen konnten.


Was wir dazu benutzt haben.



Frontend layer
Foundation logo
css3.png
sass.png
webpack

JS logo
jquery
html5.png
npm

Application layer
python.png
plone.png
Solr logo

Kommunication layer
pivotal logo
Slack logo
Basecamp logo

Freitag-Meetings, Workshops und Sprints, UX

Freitag-Meetings, Workshops und Sprints u.a. auch in Neapel.



Herausforderungen und Vorgehensweise

Atomare Komponenten und Design Systemen

Von Beginn der Planungen an haben wir die Prioritäten nach dem adaptiven Grundsatz des Webdesign ausgerichtet, indem wir die Möglichkeiten der Endgeräte über eine Orientierung nach Designrichtlinien gestellt haben. Wir haben jede einzelne Layout-Komponente als eigenständiges Element auf „atomarer Ebene“ (Siehe Atomic Design von Brad Frost) definiert und unter konsequenter Anwendung der BEM-Methode (Block Element Modifier) zur Namenskonvention bei der Frontend-Entwicklung ein eigenständiges Designsystem entwickelt. Ziel dabei war es, die Kontrolle über alle Inhaltselemente auf granularer Ebene zu erlangen, welche ein bedarfsgerechtes, an Content-Dichte und Bedarf anpassbares und flexibles Layout ermöglicht. Dank der engen Zusammenarbeit mit den Experten für Design und UX von unserm Partnerunternehmen Fifth Beat sind so adaptive Designkomponenten entstanden, die wir Cluster und Leadcycles genannt haben. Cluster und Leadcycles können bis zu neun Designelemente enthalten, welche sich automatisch dem Seitenlayout anpassen. Die Flexibilität bei der Darstellung der Website ist eine der wichtigsten Anforderungen, welche sich durch Cluster- und Leadcycle-Systeme elegant in den Redaktionsalltag einfügen lässt.

Atomic Design Beispiel – Quelle Brad Frost

Vorteile für den Kunden

Ein optimales Leserlebnis

Für die Leser von „der Freitag“ – Das Meinungsmedium“ ergeben sich damit folgende Vorteile: ab sofort wird die Nutzung der Webseite mit mobilen Endgeräten sowohl im Hoch- als auch im Querformat sinnvoll unterstützt. Die Texte sind auch nach Übertragung ins Webformat gut zu lesen dank Verwendung der Schrift "TheAntiquaF", welche von dem Schriftdesigner Luc(as) de Groot speziell für „der Freitag“ entwickelt wurde. Bilder enthalten keinen eingebetteten Text mehr und Linkflächen sind nun ausreichend dimensioniert und damit gut zu treffen.

Eine intensive Testphase sowie die Optimierung von Ladegeschwindigkeit und Performance haben die letzte Phase des Projekts begleitet.

Nach einer erfolgreichen Beta Phase, in der viele Hinweise und Verbesserungsvorschläge von Nutzern und Anwendern eingesammelt und umgesetzt werden konnten, ist „der Freitag“ – Das Meinungsmedium“ seit August 2017 mit dem neuen System und in neuem Layout online.

Der Freitag davor und danach.Der Freitag Artikel davor und danach

Unsere Arbeitsweise

Projektphasen

  • Workshop
  • Inhaltsanalyse [Content Inventory]
  • Modellierung der Inhaltstypen und Entwurf Navigationskonzept [Content type model + navigation]
  • Designentwicklung, Personas & Scenarios
  • Prototypische Umsetzung mittels Wireframes
  • Grobdesign der Schlüsselseiten [Initial visuals mockup key screens]
  • Feinschliff der Schlüsselseiten [Refined visuals mockup of key screens]
  • HTML5/CSS3 low-fi prototype of a couple of scenarios
  • Usability Tests
  • HTML5/CSS3 high-fi Diazo Theme Package, Integration via WEBpack
  • Integration in das Redaktionssystem (Plone CMS) mit Diazo Theming
  • Testphase
  • Betaphase
  • Finale Kalibrierung
  • Go-Live

Was wir machen - unsere Prozesse

Dadurch konnten wir gemeinsam mit dem gesamten Team von „der Freitag“ – Das Meinungsmedium“ die wichtigste Grundprinzipien des Unternehmens im Projekt verankern: „Wir wollen kein neues Produkt entwickeln, unser Produkt ist die Qualität unserer Inhalte! Wir möchten unsere Leser animieren, unsere Artikel wegen des klaren Konzepts regelmäßig zu lesen und sich an den Community-Beiträgen zu beteiligen. Wir brauchen ein modulares System, das mit unserem modernen Journalismus und mit unseren neuen Ideen im Einklang steht, wo wir schnell neue Rubriken, Cluster und Leadcycles anlegen können. Unsere Leser brauchen gute Inhalte und dazu eine sichere und flexible Infrastruktur, in der Lesen einfach noch mehr Spaß macht.”

An dieser Stelle danken wir dem Team von „der Freitag“ – Das Meinungsmedium“ für die konstruktive und aktive Zusammenarbeit.



Was wir für Sie machen können:

Abstract-Technology

Wir sorgen für die Standard-Implementierung und Beratung diverser Open Source-Technologien von Plone, Django oder Odoo bis hin zu E-Learning Technologien wie Open edX. Unsere Planungs- und Umsetzungsphase ist sehr agil, was Raum für individuelle Anforderungen lässt.

Unser Experten-Team arbeitet Hand in Hand mit den Kunden, um das jeweils passende System zu entwickeln. Transparenz, Agilität und Kompetenz bilden die Basis jeder Planungs- und Umsetzungsphase.

Fragen Sie uns

zum Kontaktformular

Weitere Fallstudien


Was können wir für Sie tun?

Unsere Fallstudien sind nicht das Ergebnis einer fertigen Lösung, sondern resultieren aus einer Methode, die der Software mehr Wert verleiht. Wir sehen die Projekte von einem anderen Blickwinkel und deshalb können wir helfen, diese zu verbessern.

Erfahren Sie mehr über unsere Dienstleistungen