va jouer dehors ! / city festival

Context

Va jouer dehors ! ("Go play outside!") is an association founded in 2019 by architect Matthieu Poitevin, born from the momentum following the rue d'Aubagne events in Marseille. In 2025, Caractère Spécial (the architecture agency) becomes Va jouer dehors !; simultaneously, the association operates and hosts the City Festival. Today, it is a unified entity: an architecture arm (formerly Caractère Spécial) and an events/media arm (Festival), gathered under the Va jouer dehors ! banner.

The ambition: to reinvent the city through concrete projects, encounters, and shared thinking — and to showcase this energy through an image-rich magazine-site, packed with dates and editorial content.

Goals

• Unify architecture and events into a single, clear experience.
• Showcase image galleries (projects, worlds, construction sites) with a fluid masonry layout.
• Publish and organize events (dates, locations, speakers), podcasts, and videos.
• Remain highly performant (optimized images, minimal JS, solid accessibility).
• Provide a custom WordPress back-office for total editorial autonomy.

Content & Sections

• Events / Encounters: Event pages with date, time, location, speakers, visuals, and archives — view events.
• Projects: Image-centric portfolios, photo series, before/afters, technical details.
• Podcasts & Videos: Lightweight integrations (external player) + metadata (duration, guests, season).
• Op-eds & Press: “Text galleries” (editorial lists) with compact cards, excerpts, and thematic navigation.

Technical Setup & WordPress Admin

• Platform: Tailor-made WordPress (custom theme), custom admin for the association’s needs.
• Data Models:
  • Custom Post Types: events, projects, op-eds, press, podcasts, videos.
  • Dedicated taxonomies: themes, seasons, locations, speakers.
• Images: <picture> with AVIF priority and JPG fallback, explicit width/height to avoid CLS, native lazy-loading.
• Grids: 100% CSS masonry (columns), CSS Grid alternative (grid-auto-flow: dense) when needed.
• JS: Minimal footprint (optional IntersectionObserver for reveals), no enforced framework.
• Accessibility: ARIA roles on lists, <figcaption> captions, checked contrasts, keyboard navigation.
• Performance: Deferral of non-essential scripts, critical CSS, long cache (hash), server compression enabled.

Editorial Excerpts

“Pooling energies to propose concrete projects — that resemble us and bring us together. Rehabilitating, inventing, welcoming, and making Marseille a flagship location where the city of tomorrow is experimented.”

Result

A living magazine-site that offers things to see and read: massive images, structured events, podcasts, and op-eds — all powered by a custom-admin WordPress that leaves the team autonomous, and a front-end foundation built for speed and accessibility.