Zum Hauptinhalt der Seite
Architekturführer Köln - Online

Moderne Architektur in Köln

Der Architekturführer Köln hat bereits in Buchform den Preis für das Schönste Deutsches Buch 2016 der Stiftung Buchkunst abgeräumt. Die Architekturführer Web-App ist das passende Online-Pendant: inklusive komplett aktualisierter Datenbank, interaktiver Live-Kartenansicht und Offline-Lauffähigkeit.

Projektbeschreibung

Technische Umsetzung

Zum Inhalt

Responsiv, schnell und zeitgemäß - die Progressive Web App

Der Architekturführer Köln kann sowohl wie eine normale Website aufgerufen werden – oder wie eine App direkt vom Startbildschirm des Smartphones. Wie geht das? Es handelt sich um eine Progressive Web App. Im Verlauf des Seitenbesuchs zeigt Ihr Smartphone-Browser eine Benachrichtigung, dass die Website auf dem Startbildschirm installiert werden kann. Danach kann sie wie eine normale Standalone-App (also ohne das übliche Browser-Interface) gestartet werden. Dies bringt mehrere Vorteile:

  • Die App kann nach dem ersten Aufruf komplett offline verwendet werden. Dies ist beim Architekturführer zum Beispiel nützlich, wenn einen Stadtspaziergang mit Architektur-Infos aufwerten möchte, aber das Datenvolumen gerade aufgebraucht ist.
  • Die App funktioniert automatisch auf Android, iOS und in jedem modernen Browser. Damit hat man gegenüber Individualprogrammierung für die jeweiligen Systeme nur einen Bruchteil des Aufwands, und muss nur eine Plattform pflegen und aktualisieren.
  • Man spart sich den aufwendigen Weg über die App-Stores von Apple und Google.

Datenintegrität sichert Erweiterbarkeit und Zukunftssicherheit

Der Architekturführer Köln ist eine sogenannte Single-Page-Application (SPA) – also eine Web-App, die nach dem ersten Aufruf komplett im Browser abläuft und nur dann eine Internetverbindung benötigt, wenn Informationen vom Server benötigt werden (z.B. Detaildaten zu den Bauwerken). Somit läuft die App super schnell, fühlt sich responsiv und flüssig an, und jede Navigation ist verzögerungsfrei. Besonders gut für Kund:innen: Die Daten im CMS bleiben zwangsläufig komplett unabhängig von der App und sind somit zukunftssicher und können jederzeit über die gleiche Schnittstelle für andere Portale und Anwendungen verwendet werden.

Gleichzeitig kann die SPA die Daten auf unterschiedliche Weisen darstellen, ohne die Nutzer:innen auf redundante Netzwerkanfragen warten zu lassen. So bietet der Architekturführer mehrere Darstellungsmöglichkeiten für die rund 100 gelisteten Objekte: Zum Beispiel eine interaktive Karte, die immer den aktuellen Standort der Besucher:innen anzeigt. Oder eine Liste, die nur Objekte in der Nähe mit genauen, live aktualisierten Entfernungsangaben darstellt. Sogar die Suche nach individuellen Architekt:innen, Stadtteilen oder Kategorien ist möglich.

Unser CMS der Wahl für dieses Projekt ist ProcessWire, womit wir mit wenig Aufwand eine individuelle Schnittstelle für die Web-App programmieren konnten, und gleichzeitig ein benutzerfreundliches Interface für die Redakteur:innen bereits stellen. Die Kombination von Progressive Web-App, Single Page Application und CMS-basierten API positioniert Ihre Anwendung zukunftssicher und flexibel gegenüber geänderten Anforderungen.

Screenshot der Kartenansicht der Architekturführers

Die Kartenansicht ist eine der verschiedenen Ansichten der verfügbaren Objekte. Der grüne Punkte zeigt die aktuelle Position des Besuchers und aktualisiert sich live.

Die App enthält alle wichtigen Daten, unzählige Bilder und ausführliche Texte zu jedem der aktuell 74 Projekte.

Das Projekt koelnarchitektur.de

Seit mittlerweile 20 Jahre unterstützt schwarzdesign das Internetportal koelnarchitektur.de. Bereits 2003 wurde das Online-Magazin um einen Architekturführer erweitert, der die Ausgangsbasis für die 2016 mit dem Preis für das schönste Buch ausgezeichnete Publikation darstellte. Leider befindet sich das Projekt seit Ende 2021 "im Ruhestand" und wird redaktionell nicht mehr weiter gepflegt. Der Architekturführer Köln wird aber weiter entwickelt.

Beim Design der Web-App orientierten wir uns gerne an der Print-Ausgabe, die vom Kölner Designbüro Studio für Gestaltung so wunderbar gestaltet wurde. Die ebenso großartigen Texte wurden von Barbara Schlei und Uta Winterhager für die Web-App erneut komplett überarbeitet.

Mehr zum Thema "Progressive Web Apps (PWA)"