der Freitag and Plone:
Design and implementation of a cross-medial reading experience

A new website for the online version of the weekly newspaper “Der Freitag”
- from design patterns to design systems.


Learn more about it
der Freitag
der Freitag

Our Task

“An optimal reading experience and access to all content, always and from everywhere!” In times of mobile internet, the weekly newspaper “der Freitag – Das Meinungsmedium“ was exactly faced with this challenge. When looking for a competent service provider for the creation of an optimized, cross-medial reading experience, Abstract-Technology turned out to be their perfect match. Abstract Technology was commissioned to work out a future-proof two-way strategy in close cooperation with their IT-team. The project specifications consisted firstly of managing the gradual update of their existing plone-based system to the latest version. As a second step, the interface design, information architecture and a flawless user experience had to be created. Dr. Christiane Düts, managing director of “der Freitag“, clearly stated that “our product is the content that we produce” and further “we need partners with whom we can transfer our print content to online on a daily basis, in a results-oriented and safe way, and of course with high quality.”

The weekly newspaper“der Freitag“ was founded 1990. When today’s publisher Jakob Augstein took over the newspaper in 2008, the editorial office and publishers house moved to Hegelplatz, Berlin. “der Freitag“ – Das Meinungsmedium“ gets published since February 2009 under the new label in print and online and has a an exclusive consortium-partnership with the British “Guardian” for all German-speaking areas. Print and online are closely linked - input from the der Freitag Online-Community is an integral part of the newspaper and has its own sub-page on “freitag.de”. For years, “der Freitag“ – Das Meinungsmedium“ has been convincing an ever-growing audience with its quality as a left-liberal weekly newspaper - it delivers background stories, asks for societal dialogue and discussion in an independent, ambitious and intelligent way and contributes with its own critical and constructive opinions. The print edition in the third quarter 2017 came close to 25000 sold copies.

Der Freitag - Information Architektur

Web-Komponenten or Widgets for the production from the publisher


Course of action

Since 2010, when responsive web design made its way into web development, a continuous change has been taking place with regards to how content was structured, as well as regarding its technical implementation. Of course, expectations towards the web application that had to be adapted with the numerous different classes of machines and devices were fully met from the beginning. User experience (UX) and usability instead were given too little attention for far too long. Today, the design of modern digital products makes it paramount to consider individual user experiences as well as personal preferences. As a consequence, together with “der Freitag“ – Das Meinungsmedium“, a thorough research focusing on readers’ habits and preferences was conducted during the very early stages of the project, resulting in user interface requirements consisting of a distinct flexibility in the system design. This was necessary in order to seamlessly integrate into the existing plone content management system, which we were able to secure via an extensive modularization of the system components as well as through a simple extensibility of the modules.


Used Technologies



Frontend layer
Foundation logo
css3.png
sass.png
webpack

JS logo
jquery
html5.png
npm

Application layer
python.png
plone.png
Solr logo

Communication layer
pivotal logo
Slack logo
Basecamp logo

Freitag-Meetings, Workshops und Sprints, UX

Freitag-Meetings, Workshops and Sprints e.g. in Napels



Challenges

Atomic elements and design systems

From the beginning of the planning phase, we have directed our efforts towards the adaptive principles of web design, meaning that end-devices and their potential was given priority over respecting design rules. We have defined each single layout-component based on the “Atomic Design Principle” (See Atomic Design of Brad Frost) element and by consequently applying the BEM-Method (Block Element Modifier) for the naming conventions for the frontend-development of an independent design system. Our goal was to achieve control over all content elements on a granular level, hence enabling a user-friendly, content-rich and flexible layout. Thanks to the close cooperation with the design- and UX-experts from our partner agency Fifth Beat, adaptive design components were developed that we named “cluster” and “leadcylces”. Cluster and leadcylces can contain up to nine design elements that can be automatically adapted to the page layout. One of the most important requests has been to create a flexible website-display to be smoothly integrated into the daily routine of the editorial office via Cluster- and Leadcylce-systems.

Atomic Design Beispiel – Quelle Brad Frost

Advantages for the client

An optimal reading experience

For the readers of “der Freitag“ – Das Meinungsmedium“ the following advantages emerge: from now onwards the usage of the website is fully supported by mobile end-devices in portrait- as well as in landscape-format. The text is easily readable also after the transfer into the web-format thanks to the application of the font "TheAntiquaF" specifically developed for the “Der Freitag” by font designer Luc(as) de Groot. Images do not contain any more embedded text and linkspace is now sufficiently dimensioned and easy to click on.

During the last phase of the project, an intensive testing phase as well as the optimization of the loading speed and performance played a major role. After a successful beta phase during which a great number of improvement suggestions were collected from users and subsequently implemented, since August 2017, “der Freitag“ – Das Meinungsmedium“ is now online with its new system and layout.

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

Our Method

Project phases

  • workshop
  • content analysis [Content Inventory] (audit)
  • content type model & navigation
  • design development, personas & scenarios
  • implementation prototypes via wireframes (two iterations)
  • initial visuals mockup key screens
  • refined visuals mockup of key screens
  • HTML5/CSS3 low-fi prototype of a couple of scenarios
  • usability test
  • HTML5/CSS3 high-fi Diazo Theme Package, Integration via WEBpack
  • integration into editorial system (Plone CMS)
  • testing phase
  • beta phase
  • final calibration
  • go-Live

Was wir machen - unsere Prozesse

Through our method of working, we were able to ingrain the most important values of the company into the project: “We do not want to develop a new product, our product is the quality of our content! We encourage our readers to read our articles regularly because of the clear concept and to participate in the community. We need a modular system that is in line with our modern day journalism and ideas, where we can quickly create new headings, clusters and leadcycles. Our readers need good content and a secure and flexible infrastructure that makes reading even more fun."

At this point, we would like to thank the team of “der Freitag“ – Das Meinungsmedium“ for a very positive and active collaboration



What we can do for you

Abstract-Technology

Abstract-Technology is a digital agency for software solutions that designs and personalizes open source software. We develop cutting edge digital solutions for companies and educational institutions including Universities, Academies & NGOs.

We support clients in introducing and designing:

  • Learning Management Systems (LMS)
  • Enterprise Relationship Planning (ERP) systems
  • e-commerce & digital marketing solutions
  • web Content Management solutions (CMS)
  • UX Design

Our strengths

  • multiple & long standing project experience with international clients
  • open source philosophy
  • active & committed networking
  • key competences: many years of expertise in the development of CMS systems based on PLONE
Get in touch

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