Die seit dem 1. Februar 2000 im Netz verfügbare und zum SÜDKURIER GmbH Medienhaus gehörende erste reine Online-Zeitung ka-news.de ist mit 280.000 Unique Usern und über 7 Millionen Seitenaufrufen pro Monat das führende Nachrichten-Portal für den Raum Karlsruhe. Die bereits existierende mobile Website sollte einem grundlegenden Relaunch unterzogen und damit aus Usability-Sicht auf eine neue Ebene gehoben und den veränderten Nutzungsgewohnheiten angepasst werden. Um diese Aspekte zu gewährleisten, wurden wir mit dem Relaunch beauftragt. Hierbei war eine mobile Website zugunsten einer responsiven Website aufgrund der geplanten Content- und Monetarisierungsstrategie gesetzt und musste sich nahtlos in das existierende Content-Management-System einfügen.
Startseite der mobilen Website von ka-news.de vor dem Relaunch
In der alten Version waren die Artikel sehr kleinteilig und Bilder kamen kaum zur Geltung. Zudem existierte keine zentrale Navigation, um einzelne Bereiche direkt anzusteuern.
Startseite der mobilen Website von ka-news.de nach dem Relaunch
In der neuen Version gaben wir Bildern und ihrer Wirkung der emotionalen Ansprache der Besucher wesentlich mehr Raum. In der Auflistung entfalten die einzelnen Artikel dadurch eine größere Wirkung und höhere Wertigkeit, während die gesamte Seite an Übersicht gewinnt und dem im mobilen Kontext gebräuchlichen Scrollen optimal entsprochen wird. Dem Besucher wird standardmäßig eine chronologische Artikelsortierung geboten, die sich mit einfachem Tap im Header aber außerdem nach meistgelesen und meistkommentiert sortieren lässt.
Zudem erfolgte eine prominente Integration sozialer Elemente (Kommentare, Sharing) bereits auf der Übersichtsebene der Artikel, die zur Interaktion einladen.
Um dem Besucher auch das direkte Ansteuern der für ihn relevanten Themengebiete zu ermöglichen, erfolgte die Einführung einer Hamburger-Navigation. Diese ermöglicht die komfortable Navigation einer tiefen und breiten thematischen Hierarchiestruktur inklusive der Anmelde- und Suchmöglichkeiten:
Scrollt der Besucher durch die Artikel und befindet sich folglich nicht in der gezielten Navigation durch die Website, werden die Navigationsleisten beim Herunterscrollen ausgeblendet, um den auf mobilen Geräten beschränkten Platz optimal für die Darstellung des Contents zu verwenden. Scrollt der Besucher wiederum nach oben, wird die Navigation automatisch wieder eingeblendet.
Bildergalerie und Termine von ka-news.de vor dem Relaunch
Bildergalerie und Termine von ka-news.de nach dem Relaunch
Während die Bildergalerie-Übersicht in der alten Mobil-Version klein war und durch Taps navigiert werden konnte, sind Bilder jetzt größer eingebunden und können durch einfaches Wischen navigiert werden.
Ebenso können Großansichten aufgerufen und durchgeblättert werden.
Der zuvor sehr kleinteilige Terminkalender wurde aufgeräumt und ist nun wesentlich übersichtlicher und leichter zu bedienen.
In die jeweiligen Events wurden außerdem Maps eingebunden, die einen besseren Überblick bieten. Termine lassen sich mit einem einfachen Tap nun zum eigenen Kalender hinzufügen.
Umsetzung in HTML5 auf existierendem CMS
Die Frontend-Entwicklung erfolgte in HTML5. Hierbei stellten wir sicher, dass die Website später in eine hybride oder native App überführt werden kann. User Experience Design und Screendesign sind daraufhin ebenso abgestimmt. Das durchweg positive Feedback der Leser bestätigt den erfolgreichen Schritt nach vorn.
