at www.mindoktor.se , I'm in the process of taking some of our last pages not designed in Webflow and upgrading them to our favourite web design tool. This needs to be production quality so there are some requirements that I'm having problems supporting all at the same time:
- Great UX (Hey, that's why we're here, right?
- CMS-driven so that our support people can add sections / Q&As
- Mobile (first/awesome)
The design that we'd like to see is the predominant FAQ/Docs pattern out there, and also the one that our Webflow champions themselves chose for their dev docs (at least for the desktop design).
I've done a sketchy stab at the design to try the basic structure, that you can see here:
unfortunately I do not feel I can share the whole site as this is a duplicate of our real production environment.
There are some tricky things here:
The navbar is CMS-driven so that items can be added/removed which seems to work great, but I'm unsure how to provide links to the right section header among the content, and even if I did there doesn't seem to be a way to populate the ID from the CMS? I need the menu to highlight the current item when scrolling through the page. I'm guessing the answer is some old school #-links generated by dynamic embeds, but I need help from someone with a higher pay grade
Also, I'd like the different section headers to act more like an accordion in mobile, or at least to be contracted on page load so that customers have an idea of which content is available before diving into a specific area. But applying an interaction so that it's hidden on load, obviously affects desktop as well. Guess this is an old problem, but what's a good workaround?