Pull Request: https://github.com/php/web-php/pull/1084
Author: lhsazevedo

> [!TIP]
> You can view this proposal live at: https://php-navbar.lhsazevedo.dev/

## Intro
Over the years, the PHP webpage has seen various design proposals, some of 
which 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 thoughtful and 
incremental – the PHP 8 [release 
pages](https://github.com/php/web-php/pull/350), [homepage 
hero](https://github.com/php/web-php/pull/459) and [thanks 
page](https://github.com/php/web-php/pull/684) are great examples of this 
approach.

Inspired by these successful updates and the valuable discussions they sparked, 
I'd like to propose some updates to the navbar design and introduces a new 
search dialog to enhance the user experience on php.net. These changes are 
inspired by modern web design principles while respecting PHP's established 
branding and build upon [previous community 
discussions](https://github.com/php/web-php/pull/602).

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

## UI/UX 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 and experience while 
maintaining the existing search functionality, setting the stage for potential 
future improvements to the search implementation itself.

## Enhancements and Rationale

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 sleek, user-friendly search modal with keyboard navigation and enhanced 
UI.
   - Improves accessibility with proper ARIA attributes and keyboard 
navigation, making php.net more inclusive.

3. **Retained Search Functionality**:
   - 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 tests for the new search modal.
   - Ensures the changes don't introduce regressions, maintaining the site's 
reliability.

These changes are designed to be minimally disruptive while offering 
significant improvements:
- Existing users will find a familiar but enhanced experience.
- New users will benefit from improved navigation and search.

## Impact and Adoption
These changes are designed to be minimally disruptive while offering 
significant improvements:
- Existing users will find a familiar but enhanced experience
- New users will benefit from improved navigation and search UI
- Developers will appreciate the cleaner, more maintainable codebase

## 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: _coming soon_

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

### Desktop preview

https://github.com/user-attachments/assets/8137fb65-1e90-4b93-a185-708aa766e79b

### Mobile preview

https://github.com/user-attachments/assets/ad25d7e4-8ad2-4ca6-99a5-f92c49266d75

## Comparison
<details>
  <summary>View GIF comparisons (image heavy)</summary>

### Desktop comparison
#### Navbar
![desktop](https://github.com/user-attachments/assets/ad33c363-cd8d-4d5c-ae38-19e755e98035)
#### Search modal dialog
![desktop_search](https://github.com/user-attachments/assets/367b9a9d-696a-4ba3-8e1b-5c9eb3c9ad3c)

### Mobile comparison
#### Navbar
![mobile](https://github.com/user-attachments/assets/4d15f104-c028-4f5d-ba53-83086e7baf99)
#### Navigation
![mobile_nav](https://github.com/user-attachments/assets/a26758f6-50b8-49d5-b58a-f8e7bd483b7a)
#### Search
![mobile_search](https://github.com/user-attachments/assets/bdf20950-7c5a-44be-8bff-055b1d5d0121)

</details>

## 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 gauge the community's 
interest in these changes.

Reply via email to