Improve Navigation Layout and UX Enhancement

[OmkarSonawane1230]

Improve Navigation Layout, Responsiveness and UX Enhancement

Redesign the layout of navigation to improve the UX and responsiveness of our navigation system while ensuring seamless integration with translations.

Key Enhancements:

1. Navigation Layout Redesign:

   • Revampe the navigation layout to provide a more visually appealing experience.
   • Optimise the spacing of Navigation elements to improved clarity and ease of use.

2. Improve Responsiveness:

   • Improve the Responsiveness to ensure layout is accessible on various devices.

3. Apply the Changes to all Translation:

   • Test the changes to ensure compatibility with translations.

4. Improved UX by adding some animation:

   • Add Animation for enhancing user experience.

https://github.com/expressjs/expressjs.com/assets/163371960/0b81f767-7bf9-4dac-8888-e75756fcf3d0

Screenshots

• Desktop Navigation

  

• Mobile Navigation (iPhone 8 Plus)

  

• Dark and Light Theme

  1. Dark Theme

3. Light Theme

[netlify[bot]]

✅ Deploy Preview for expressjscom-preview ready!

Name	Link
🔨 Latest commit	b2b373129852f3b01e695b53cbdd53ad5128d73c
🔍 Latest deploy log	https://app.netlify.com/sites/expressjscom-preview/deploys/6648b2c5918b20000816f6ff
😎 Deploy Preview	https://deploy-preview-1518--expressjscom-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[chrisdel101]

Thanks for @OmkarSonawane1230. A quick look over a few of the changes and I found a few things to comment on.

• Changing the break-point for the menu to @media all and (max-width: 1060px). It works better the way it is now. I don't think this works, or is an enchantment.

• Using the new break point size you added above, opening the new arrow drawers above 899pxsize, they snap closed right away after opening. Anyway, at this point we'd have the navbar showing anyway (like does now), but just wanted to let you know. I'm testing on Mac chrome and FF.

• And the auto highlighed nav-links feature that shows the current page in dark grey, and then also adds grey highlights on hover. This is just too busy to fit the current UI. Might be too drastic?

Overall this is just too many file changes all at once and too many unsolicited changes. I didn't go through every single feature you suggested, and there might be some good stuff , but a better way might be to suggest a change or two individually first, and then once they've been approved you can implement them. This would make it much easier to review too, dealing with less files and changes at once. And also, if the change isn't approved, it saves you the the time of working on it.

For example, just navbar itself could perhaps benefit from a revamp. Just this alone might be one PR, or even just parts of the navbar per PR depending on the scale of the changes. Rather than overhauling the site navigation and UX all in one go.

This is just my 5 cents. What do you think of that @crandmck?

[OmkarSonawane1230]

Hi @chrisdel101, Thanks for taking the time to review my pull request. I appreciate your feedback and suggestions for improving the navigation. I want to highlight some points you mentioned.

• Changing media query, I have to change them because after updating the navmenu, spacing, sizing and search bar position in navbar, all the element don't fit in size below 1060px, that the reason I change 899px break point.

• I agree with 2nd point, I tested it as you mention how it snap right after the click, but it happens in range between 899px - 1060px maybe because of previous layout was build to work with 899px break point. It could be solve by changing the style made for 899px break point, although there is no problem for below 899px.

I agree that the UI changes are to much for current UI, but my I idea is to redesign the Expressjs.com. I decided to do following things.

• Improve overall UI.
• Make the documentation well formatted.
• As you are adding the blog feature, I think that we should also add a 'Help desk', where developer and tell their problem regarding the development. on basis of that problem we will able find more issues.

@crandmck and @chrisdel101 I believe these improvement and features will make Expressjs.com not only a website, but a Developer hub. Please let me know what you think about my idea.

[crandmck]

Thanks @OmkarSonawane1230 for the PR, and thanks also @chrisdel101 for reviewing it.

I agree with @chrisdel101 that there are a lot of changes in a single PR. In general it's best if a PR addresses an existing issue which has ideally had some prior discussion. This one is a bit "out of the blue" and objectively it's not clear what it accomplishes.

my I idea is to redesign the Expressjs.com. I decided to do following things.

I appreciate the sentiment and enthusiasm, and while the site is not perfect by any means, it's not clear that it needs a complete redesign, and there are other issues with the content (vs. layout/design) that are higher priority IMO.

Improve overall UI.

Hard to argue with that, but what specifically needs to be improved and why? "UI improvement" can often be a matter of opinion and IMO should be the result of a collaborative & comprehensive design effort.

Make the documentation well formatted.

What does this mean? It seems well formatted to me, but this could mean almost anything.

As you are adding the blog feature, I think that we should also add a 'Help desk', where developer and tell their problem regarding the development. on basis of that problem we will able find more issues.

This is a big change, and would require discussion by the @expressjs/express-tc. The biggest issue that I see is that the TC and project collaborators more broadly have more than enough on their plate already trying to release 5.x and definitely don't have time to act as a "help desk" to the entire Express community, as much as we might like to do that.

I'm open to the idea of a redesign in general, but I'd like to understand the value added, beyond qualitative or purely subjective rationale.

I'm going to close this issue, but I'm open to considering INCREMENTAL changes along these lines in the future. I would ask that you open issues in the repo identifying specific, well-defined problems or deficiencies and then open PR(s) to address those... This will just make it easier for us to manage the changes and ensure that they improve the overall quality of the documentation.

@OmkarSonawane1230 I do appreciate your efforts and I don't want to discourage you, but I hope you'll understand that we want to stay focused on improving the overall quality of the documentation, and not making sweeping changes without due diligence.