Update navbar design and improve search UI

[lhsazevedo]

Tip

You can view this proposal live at: https://php-navbar.lhsazevedo.dev/

Intro

Over the years, the PHP webpage received various design proposals, some didn't gain traction due to their drastic nature or departure from PHP's established branding style. However, our community has shown that we can successfully implement design improvements when they're incremental – the PHP 8 release pages, homepage hero and thanks page are great examples of this approach.

Inspired by these successful updates and the the discussions they sparked, I'd like to propose some updates to the navbar design and introduce a new search dialog to enhance a bit the user experience on php.net. These changes are inspired by modern web design principles while respecting PHP's branding and build upon previous community discussions.

By focusing on small enhancements rather than a full redesign, we can improve the site's usability and aesthetics without disrupting its familiar layout and branding.

UI Scope

It's worth noting that while the current client-side search implementation could be considered outdated, replacing it would be beyond the scope of this design improvement. Such a change would require a separate, focused effort. This proposal aims to enhance the user interface while maintaining the existing search functionality, setting the stage for potential future improvements to the search implementation itself.

Enhancements

1. Modernized navbar design:

   • A responsive navbar with improved mobile navigation.
   • Ensures a consistent experience across devices, addressing the growing mobile user base while maintaining PHP's established visual identity.

2. New search dialog:

   • A user-friendly search modal with keyboard navigation.
   • Improves accessibility with proper ARIA attributes and keyboard navigation, making php.net more inclusive.

3. Retained search implementation:

   • Integration of the existing FuzzySearch with the new UI.
   • Maintains familiar search behavior while setting the stage for future improvements to the search implementation.

4. Code improvements

   • CSS refactoring and removal of outdated libraries (Hogan.js, typeahead.js).
   • Improves maintainability, making future enhancements easier to implement.

5. Enhanced reliability

   • Introduction of Playwright E2E tests for the new search modal.
   • Ensures the changes don't introduce regressions, maintaining the site's reliability.

Impact

These changes are designed to be minimally disruptive:

• Existing users will find a familiar but enhanced experience
• New users will benefit from improved navigation and search UI

Preview

Please note that the preview site uses an improved search index generated by a companion change I'm proposing to the PHP documentation generator (phd). While both PRs can be merged independently, I've captured the screenshots and recordings using the new index to showcase the full potential of these improvements.

You can find the companion PR for the phd changes here: php/phd#154

Preview Site

You can view this proposal live at: https://php-navbar.lhsazevedo.dev/

Desktop preview

desktop_preview-2024-10-03_22.08.18.mp4

Mobile preview

mobile_preview-2024-10-03_22.10.47.mp4

Comparison

View GIF comparisons (image heavy)

Desktop comparison

Navbar

Search modal dialog

Mobile comparison

Navbar

Navigation

Search

Final thoughts

I believe these improvements will benefit the PHP community while respecting the site's established design principles. I look forward to your feedback and collaboration in refining this proposal.

If you find this proposal valuable or have any concerns, I'd greatly appreciate your feedback. Please consider leaving a 👍 or 👎 to help measure the community opinion.

[github-actions]

🚀 Preview for commit acd86a1 can be found at https://web-php-pr-1084.preview.thephp.foundation

[github-actions]

🚀 Regression report for commit acd86a1 is at https://web-php-regression-report-pr-1084.preview.thephp.foundation

[lhsazevedo]

Suggested reviewers: @morrisonlevi @dragoonis @cmb69 @kamil-tekiela @ramsey @mvriel @pronskiy @Girgias

Edit: Will check visual tests asap

[kamil-tekiela]

I like it. I like the changed color, I like that the text of the buttons is more readable, I like that the PHP logo is now white, and I like that the search results list is simpler. The mobile view looks really good. There are a couple of things I don't like though.

1. I am not of a fan of the search opening up to cover the page. Why is it that when I click on an input box a new input box pops up? The placeholder text also doesn't match suggesting that the popup does something different than the box I actually clicked on.
2. If the popup stays, I would not disable the page scroll. I never liked this as it creates a jarring visual experience. At least on Chrome the page shifts to the right and the scroll bar is now in the middle box which means that if I want to scroll I need to hover my mouse over the thin box.
3. If the popup stays, there should be no load animation. It's an unnecessary gimmick that only delays loading of the box.
4. Even though the text is more readable, I still think it's not contrast enough from the background color. Especially the "Search" placeholder is visually blending in with the surroundings. Make it stand out more, either by changing the text color or giving the search box lighter border. I wouldn't mind if all text in the navbar was pure white or whitesmoke.
5. IMHO there is no need to make the navbar taller. The previous height was ok. On most monitors the vertical space is more expensive than horizontal, so every padding you add makes the actual content push down to a place with less priority. You made it shorter in mobile view so why make it taller in desktop view.
6. Not sure if related but the code formatting on /releases/8.3/en.php is borked.
7. The navbar is now almost the same color as the main div of /releases/8.3/en.php. Everything is purple now. I don't hate the color, but it's just too much. Something needs to change.
8. The logograms in mobile view have too low contrast with the background. You made them #D2D9FF but even if they were #FFFFFF they would be still too dark. I would suggest making it #F5F5F5 with opacity 1, the same as all text in the navbar.

[cmb69]

Thank you! Overall, this looks like a nice improvement, but I don't like that the search now won't work if JavasScript is not available.