Responsive Design und Web Apps

Die neue Mobile App von Basel Tourismus setzt Massstäbe im Bereich Responsive Design mit App Charakter. Sie unterstützt dabei bekannte Gesten wie Swipe, bietet eine angepasste mobile Navigation mit "Off–Canvas" Menus sowie umfangreiche Such- und Filtermöglichkeiten.

Von Responsive Design zur Web App

Im Rahmen der Mobile Strategie setzt Basel Tourismus auf einen Mix von native Apps für iOS und Android sowie einer modernen Web App für alle gängigen Smartphones. Während die native Apps als City Guide primär für Touristen vor Ort konzipiert wurden, deckt die neue Web App vor allem die Bereiche Veranstaltungen, Gastronomie und Erlebnisse für weitere Zielgruppen ab. Sie unterstützt dabei bekannte Gesten wie Swipe ("Wischen" mit einem Finger), bietet eine angepasste mobile Navigation mit "Off-Canvas" Menus sowie umfangreiche Such- und Filtermöglichkeiten.

Basel Mobile Web App mit Home und Off-Canvas Menu

Obwohl die App technisch auf den offenen Web-Standards HTML5, CSS3 und JavaScript basiert und es sich eigentlich um eine "Responsive Design" Website handelt, ist dies für den Benutzer nicht auf den ersten Blick ersichtlich. Sobald er mit seinem Smartphone auf www.basel.com geht wird ihm automatisch die Web App geladen, ohne dass er zuvor eine App installieren muss. Auch kann die Web App inkl. Icon auf dem Smartphone gespeichert werden und steht so für die zukünftige Nutzung mit einem einzigen Fingertipp bereit. Ein weiterer Vorteil ist die Reichweite der Web App d.h. sie läuft nicht nur auf iOS und Android, sondern auch auf allen anderen webfähigen Smartphones wie z.B. dem Windows Phone 8 Smartphone Lumia von Nokia.

Filter und Facetten mobile optimiert

Eine spezielle Herausforderung war die mobil optimierte Bedienung der umfangreichen Filter und Facetten, primär für die Suche von Veranstaltungen, Restaurants und Erlebnissen. So kann beispielsweise ein Restaurant in Basel gesucht werden, welches vegetarische Gerichte bietet, am Montag geöffnet hat und wo man mit der VISA Kreditkarte bezahlen kann. Dies alles sollte möglichst einfach auf dem Smartphone bedienbar sein. Der von Cando konzipierte Lösungsansatz orientiert sich an den sogenannten "Off-Canvas" Menus die vielen Benutzern bereits bekannt sind für die Hauptnavigation (siehe auch Facebook und das Icon mit den drei horizontalen Strichen). Statt jedoch nur das Hauptmenu ein- und auszublenden, wurde das Konzept auf die Suche und Filter erweitert. Durch das Antippen des "Lupen"-Icons werden die entsprechenden Filter ein- und ausgeblendet. Bereits gesetzte Filter werden klar und farbig hervorgehoben. Filtergruppen können mit "+" und "-" ein und ausgeblendet werden. Alle Elemente sind grosszügig gestaltet, um eine möglichst einfache Bedienung per Finger zu gewährleisten.

Basel Mobile Web App mit Filter als Off-Canvas Menu

Kontext, Karten und Routenplaner

Ein besonderes Anliegen war die optimale Unterstützung des jeweiligen Nutzungskontextes. Konkret kann der Benutzer alles unterwegs bequem mit einem Finger oder Daumen bedienen, ein Tap auf eine Telefonnummer startet einen Anruf oder Veranstaltungen des heutigen Tages werden direkt angezeigt. Neu wurde zudem in den Bereichen Restaurants, Shopping und weiteren Kategorien eine Umkreissuche eingebaut, welche alle Suchresultate in Abhängigkeit der Distanz zur aktuellen Position anzeigt. Kombiniert mit den umfangreichen Filter- und Facetten kann so z.B. einfach nach allen Restaurants mit vegetarischen Menus im Umkreis von 500m gesucht werden. Dabei wird bei den Resultaten jeweils die aktuelle Postition und die Position der Zieladresse angezeigt. Ein Tap auf "Route" öffnet zudem den Routenplaner von iOS oder Android inkl. Übergabe des Start- und Zielortes.

Basel Mobile Web App mit Umkreissuche, Karte und Routenplaner

Zentrales Content Management für alle Kanäle und Endgeräte

Eine wesentliche Anforderung stellt die zentrale Verwaltung der Inhalte für alle Kanäle und Endgeräte dar. Die eingesetzte Content Managagement Lösung von Cando ermöglicht es, Inhalte mit einem Klick für alle oder nur einen spezifischen Kanal z.B. der Web App freizugeben. So werden beispielsweise Veranstaltungen zentral erfasst und danach Schweiz Tourismus und den nativen City Guide Apps für iOS und Android zur Verfügung gestellt. Parallel dazu erscheinen sie auf der Desktop Website von Basel Tourismus und der Web App.

Multi-Chanel Content Management System

In Zukunft ist eine Erweiterung im Bereich Tablet für die Tourist Information angedacht, sowie die Erstellung des Restaurant Führers in gedruckter Form. All diese Kanäle werden aus dem zentralen Content Management von Basel Tourismus bedient, was den redaktionellen Aufwand erheblich reduziert im Vergleich zu Insellösungen. Ein spezielles Augenmerk gilt dabei der Bildverwaltung: Alle Bilder werden in hochauflösender Form im integrierten Media Asset Management verwaltet. Sie stehen so in der jeweils passenden Auflösung für den entsprechenden Kanal zur Verfügung: In niedriger Auflösung und performant für ältere Smartphones, optimiert für hochauflösende Retina Tablets oder in Druckqualität für die Broschüren und Flyer.

Das Cando Responsive Design Framework

Die neue Basel Tourismus Web App basiert auf dem Cando Responsive Design Framework welches sich durch folgende Eigenschaften auszeichnet: 

  • Dynamische Anpassung an Endgeräte (Smartphone, Tablet, Desktop)
  • Unterstützung von hochauflösenden Displays durch Web-/Iconfonts, Vektor Grafiken (SVG), hochauflösende Bilder
  • Optimierte Performance für Bilder durch dynamische Aufbereitung, optimierte Grössen und adaptive Bilder
  • Optimale Abdeckung unterschiedlicher Auflösungen und Geräteklassen durch Breakpoints für Geräteklassen und «fluid» Layouts innerhalb der Breakpoints
  • Sehr flexible Rastersysteme, selbst unterschiedliche Raster pro Geräteklasse, ideal für magazinartige Layouts (Tablets)
  • Anpassung der Schriften und Grössen sowie optimierte Typographie pro Geräteklasse

Weitere Informationen zum Cando Responsive Design Framework stellen wir gerne zur Verfügung.

Stichworte in Kürze

  • Mobile Lösungen und Apps
  • Responsive Design
  • HTML5, CSS-3, JS
  • Web Apps vs. native Apps
  • Zentrales CMS für alle Kanäle
  • Cando eTourism Plattform