Improving Mobile Responsiveness for the Tour Operator Plugin

[ashleyshaw]

Introduction:

The current mobile experience for the Tour Operator plugin could be improved. While it functions correctly, there are opportunities to optimize the user interface, especially for navigation and content readability.

Problem/Opportunity:

On mobile, the sidebar content and other UI elements take up a significant portion of the screen, which may detract from the browsing experience. Users have expressed difficulty navigating between sections when on smaller devices.

Proposed Solution:

We can introduce collapsible sections or tabs for mobile devices. This would reduce the amount of space taken up by the secondary menu and allow users to toggle between sections easily. Utilizing CSS media queries and JavaScript, we can detect mobile screen sizes and apply the changes accordingly.

Alternatives Considered:

I considered using a simple scroll-to-top button or hiding certain elements on mobile, but those wouldn't address the root issue of space management. A collapsible section offers a more user-friendly experience.

Challenges:

• Ensuring that the collapsible sections are fully accessible.
• Testing for compatibility across different devices and screen sizes.

Call for Feedback:

I'd love to hear thoughts on whether this approach would improve user interaction. Are there alternative strategies that could provide a better experience on mobile?

Next Steps:

If we agree to move forward, I'll work on an initial prototype with collapsible menus and tabs to share with the team for further testing.

• @ZaredRogers please could you give some input on design side of things
• @krugazul how would we implement a custom menu within the block editor environment, it will likely become complex.