Ecumenical city pilgrim trail Villingen App

[AndZyk]

The ecumenical city pilgrim trail in Villingen, Germany is a small trail through the city where you can visit churches and other places of interest. This Progressive Web App is a small website to guide visitors through these places and give additional informations. You can install it on your smartphone or tablet and walk the trail with it.

app.stadtpilgerweg-villingen.de

 

Features:

• Interactive Map
• Progressive Web App

 

Interactive Map

Before entering the map you get a little tutorial where you can choose between two routes, the standard trail or a more accessible trail. You can track your position on the map and click on the markers. Each marker is a view with additional information to the place. The views can contain texts, quotes, images or a chat element.

The map was realized with Leaflet and styled with Mapbox.

 

Progressive Web App

The website can be installed as Progressive Web App on your smartphone or tablet for a better experience. The PWA remembers the last visited view and has no unnecessary browser navigation. It can also partly work offline and caches almost everything.

The PWA was realized with the help of Workbox.

 

Modules used:

• Repeater Matrix
• ProCache
• Map Marker (Google Maps)
• Sitemap
• ProcessWire Upgrade
• TOTP two-factor authentification
• Tracy Debugger

 

Regards, Andreas

Edited August 23, 2020 by AndZyk
Fixed typo

[LostKobrakai]

Nicely done. I like the color schema a lot.

You might want to make the "Los geht's" CTA a bit more clear though. I wasn't really sure what I need to do/click on the introductory page. Also I feel more whitespace after it wouldn't hurt as well.

[AndZyk]

Thank you for your feedback. ?

More whitespace for the buttons is a good idea. I added a little bit more whitespace to the buttons at the bottom.

 

[psy]

@AndZyk great work. ?

Only other feedback I have is that the buttons "What do I see?", "What do I hear" & "How does the hustle & bustle affect me?" don't go anywhere/show anything. My cursor changed from normal arrow to an 'edit' icon, not pointer on hover. Is this supposed to happen?

I'm using Chrome on an iMac

[AndZyk]

Thank you. ?

Those "buttons" are actually just a list that looks like a chat, for example like in a messenger. You should see a text select cursor on hover over the text. ?

 

 

[psy]

OK @AndZyk get it after the explanation but a bit confusing without that knowledge. The cursor changing to a text selector on edit threw me. Maybe turn off pointer events to let the user know it's just a display thing? 

[AndZyk]

Strange, that you can see a different cursor. There are no pointer stylings on this element and you should get the standard text cursor. Maybe it is a caching issue.

Either way this website was designed for smartphones and tablets, so visitors don't see a cursor anyway. ?