Skip to content

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

Closed as not planned

Description

@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

Image Image Image Image Image

License

  • I confirm, and agree.

Activity

  1. TimWolla commented on Oct 19, 2025

    @TimWolla
    Member

    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.

  2. pronskiy commented on Nov 6, 2025

    @pronskiy
    Member

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions