Improving Mobile Experience for JSON Schema Tour

[keys-i]

Hi there,

I’ve been using the JSON Schema Tour and think it could benefit from mobile-friendly improvements. Since more people are accessing content on their phones, making the tour more straightforward to use on smaller screens could be valuable. Here’s what I’m thinking:

1. Responsive Design

• Mobile-First: We could start by focusing on mobile users, using CSS media queries to ensure everything looks good on smaller screens.
• Flexible Layout: Making the layout adaptable will help it work better across different devices.

2. Simplified Navigation

• Collapsible Menu: A hamburger-style menu might help keep things neat and easily navigate on mobile.
• Swipe Gestures: Adding swipe gestures could make moving between sections on touch devices smoother.

3. Content Adjustments

• Optimized Fonts: Adjusting font sizes and spacing could make text easier to read on mobile.
• Expandable Sections: We could use expandable sections for longer content or code examples to keep things tidy and avoid overwhelming users.

4. Touch-Friendly Interactions

• Touchable Elements: Ensuring buttons and links are big enough for touch inputs could improve the experience.
• Code Snippet Handling: we could enable horizontal scrolling or split them into smaller, scrollable sections for wide code snippets.

5. Performance Tuning

• Next.js Image Optimization: Using Next.js’s built-in image optimization could help with faster loading on mobile networks.
• Lazy Loading: Loading images and other resources could improve performance, especially on slower connections.

6. Testing & Feedback

• Cross-Device Testing: It might be useful to test the site on different mobile devices to catch any issues.
• User Feedback: Adding a way for users to give feedback about their mobile experience could help us keep refining things.

7. Documentation Update

• Guidelines for Mobile: Updating the documentation with tips for maintaining mobile compatibility might be helpful, even for the two of us working on the project.

---

Next Steps:
Let me know what you think! If this sounds good, I’ll dive in and start working on some of these changes. Together, we can make the JSON Schema Tour even better for mobile users.

[erosb]

Thank you for raising the issue. In the initial version we didn't consider mobile-friendliness as a priority, because the tour is an interactive learning material, rather than static content. We assumed that writing json in the schema editor on a mobile device would be just pain for the user anyway, regardless how good the UI is.

We consider improving the layout on UI for the future. Any contribution is also appreciated :)

[RonakSurana-2001]

I have raised a PR #83
Kindly See.