[PHP 8.5 Landing] Clarity (Mobile-first) — Iván Portillo Pérez

[PortilloDev]

Names and Contact Details

Name: Iván Portillo Pérez GitHub: @PortilloDev Email: ipp_1981@hotmail.com Preferred contact: Email Timezone: Europe/Madrid website: https://ivanportilloperez.com/

Link to mockup/prototype

https://portillodev.github.io/php85-release-page/

Rationale (300-600 words)

Design Rationale - PHP 8.5 Release Page

Goals and Design Decisions

This design for the PHP 8.5 release page focuses on simplicity, performance, and accessibility, keeping visual consistency with php.net while introducing modern elements that reflect the language’s evolution.

Content Hierarchy and UX

Hero Section: The design uses a clear visual hierarchy with the version number "8.5" as the primary element, followed by a concise tagline. Call-to-action buttons are strategically positioned to guide users toward downloading or exploring features.

Features Showcase: Real PHP 8.5 features are displayed with interactive code examples in VS Code-style blocks. Each feature includes syntax-highlighted code and a clear description, alternating left-right for visual variety. The responsive layout adapts from single column on mobile to side-by-side on tablet/desktop.

Download and Migration Sections: Practical information is presented clearly with feature lists and direct links to official documentation.

Mobile-First Approach and Responsiveness

The design implements a mobile-first approach with breakpoints at 768px and 1024px. It uses clamp() for fluid typography, CSS Grid for adaptive layouts, and Flexbox for flexible components. Testing was conducted at 360px, 768px, and 1280px resolutions.

Performance and Optimization

• Optimized CSS: 15KB uncompressed (at the 15KB limit), ~3.2KB gzipped
• System fonts: No external dependencies, instant load
• Official logo: PHP logo served from php.net CDN (php-logo-white.svg) for accuracy and cacheability
• Minimal JavaScript: Only for hamburger menu and scroll button (~1KB)
• Syntax highlighting: CSS-based (no external libraries)

Accessibility (A11y)

• Semantic HTML: Use of landmarks (header, main, footer) and semantic elements
• Keyboard navigation: All interactive elements are accessible with Tab
• Contrast: Meets WCAG AA with contrast ratios above 4.5:1
• Screen readers: .sr-only content for additional descriptions
• Focus management: Visible and consistent focus indicators
• Alt text: Appropriate descriptions for decorative elements

Consistency with php.net

The design maintains PHP’s signature color palette (#777bb4) and uses system fonts to preserve the familiar feel. Moderate spacing and borders create a smooth transition from the main site.

Additionally, branding repetition has been reduced:

• Header keeps a concise "PHP" label
• Hero communicates the version prominently ("PHP 8.5 is here")
• Visual brand is represented by the official PHP logo image rather than duplicating text marks

Localization (i18n)

• No text in images: All content is plain text
• Prepared structure: Strings are easy to extract for translation
• Universal icons: Emojis that work across languages
• Relative links: Structure supports multiple languages

Maintainability

• Modular CSS: Styles organized by sections with clear comments
• Descriptive classes: BEM-like naming for easy identification
• Clear structure: Semantic HTML that’s easy to understand and modify
• No dependencies: Easy maintenance without external tooling

Innovation and Creativity

The design introduces modern elements including:

• VS Code-style code blocks: Dark theme with syntax highlighting, complete with macOS-style window controls (red, yellow, green dots)
• Real PHP 8.5 features: Live code examples showcasing pipe operator, array_first/last, exception handlers, and RTL locale detection
• Alternating layout: Code and descriptions alternate sides for visual rhythm
• Modern aesthetics: Subtle gradients, smooth hover effects, and monospace fonts for code
• Progressive disclosure: Additional features listed at the end with links to full documentation

The combination of traditional elements (PHP colors) with modern code presentation creates an experience that educates developers while maintaining visual appeal. This approach ensures the page is fast, accessible, maintainable, and immediately useful, meeting all contest criteria while showcasing PHP 8.5's actual capabilities.

RATIONALE.md

License

• I confirm, and agree.

[TimWolla]

Hi! Thank you for your submission(s). I noticed that they do not use the “existing 8.5 content” from PR #1454 and do not actually showcase the most interesting “new PHP 8.5” features (e.g. the new URI extension or clone-with), instead focusing on some minor improvements. While the code boxes in your design work for these minor improvements with fairly short snippets, I don't feel they can sufficiently showcase some of the larger features.

I suggest to take a look at #1454 and the current rendered version at https://web-php-pr-1454.preview.thephp.foundation/releases/8.5/en.php to see what is planned for the the release page, as also suggested in the contest description: “Content-first: use existing 8.5 content as data.”.

Disclosure: I'm not part of the contest jury or otherwise involved in scoring. I am however a core developer of PHP, developed several of the new PHP 8.5 features and helped preparing the release pages for PHP 8.3, 8.4 and now also helped to prepare and refine the planned contents for 8.5.