PHP 8.5 Release Page Design Contest Submission

[ChooKing]

Names and Contact Details

Choo / choo.king.pub@gmail.com

Link to mockup/prototype

https://resonant-halva-ecba76.netlify.app/

Rationale (300-600 words)

Accessibility

The original site has contrast problems in the code samples that fail WCAG testing. The revised version has been verified to pass WCAG 2.2 requirements.

Clarity

The original site is missing clear visual boundaries for closely related content. The revised version uses common border and background color to visually group closely related content.

The original site has a confusing search button that looks like a search input which opens an actual search input upon clicking. The revised site uses an actual search input directly.

Responsiveness

The original site has text overflow on mobile due to reliance exclusively on word break. The revised site uses word break on wider screens and switches to relying on scroll for narrower screens.

Color Theme

The original site only has light mode. The revised site has both light and dark modes.

One consideration with a dark theme is that the brand color is a bit too bright to look good in dark mode. A darker shade was used for the dark theme, but there is a possibility that this might not be accepted as a proper representation of the brand color.

Dark mode may seem out of place if it's only available on the release page and nowhere else on the site. Dark mode can be easily disabled by either deleting the entire media query for prefers-color-scheme: dark, commenting out that whole section, or by renaming "dark" to a non-existent color scheme to keep the code for future use.

Note that the color theme toggle was implemented in pure CSS due to the request to use minimal or no JS. Absolutely no JS was written for this prototype. This means the choice is not saved, but implementing that functionality can be done with only a small amount of JS code. The current behavior loads the browser preferred color theme. The toggle is for override to choose the opposite of default.

Source code: Github

License

• I confirm, and agree.

[pronskiy]

Thank you for the submission. Results are now published. You are welcome to join the implementation process #1592. Closing this thread as part of post-contest housekeeping.