Cos’è l’Intrinsic Web Design e perché WordPress lo usa nel suo editor

Hai mai avuto la curiosità di capire come i siti web moderni riescano a gestire i contenuti su dispositivi di ogni dimensione, dal minuscolo smartphone al monitor ultrawide?
Per anni la risposta è stata il Responsive Web Design, un insieme di istruzioni (media queries) per definire esattamente come gli elementi dovrebbero comportarsi a diverse dimensioni di larghezza dello schermo.

Oggi assistiamo a un approccio più maturo: l’Intrinsic Web Design (IWD). Non si tratta di una nuova tecnologia, ma di una filosofia che restituisce il controllo agli elementi stessi, permettendo loro di adattarsi in modo fluido e logico allo spazio che occupano.

In questo articolo esploriamo come questa rivoluzione stia cambiando il modo in cui costruiamo siti con WordPress.

Cos’è l’Intrinsic Web Design?

L’Intrinsic Web Design è una metodologia moderna che consente ai contenuti web di adattarsi naturalmente a schermi di diverse dimensioni, dai dispositivi mobili ai desktop. Anziché creare più regole per dispositivi diversi, sfrutta una serie di istruzioni per ridimensionare e riorganizzare gli elementi in modo fluido in base allo spazio disponibile.

L’obiettivo è creare componenti che si adattano al meglio a qualsiasi contenitore, anziché layout globali che devono essere riscritti per ogni dimensione dello schermo.

I pilastri dell’Intrinsic Web Design

Il bello del design intrinseco è che non cerca di reinventare la ruota. Piuttosto, si adatta alla natura fluida e adattabile che il web ha sempre avuto.

Questo non significa abbandonare le query multimediali. La differenza è che ora servono più per la messa a punto che per definire l’intera struttura del layout.

Invece di definire layout rigidi per ogni dimensione dello schermo, l’Intrinsic Web Design si basa sui seguenti principi:

• Contenuto che si auto-adatta: gli elementi del layout (come blocchi di testo, immagini o colonne) hanno la capacità di decidere come disporsi e dimensionarsi in base allo spazio disponibile nel loro contenitore, non solo in base alla larghezza della finestra del browser.
• Definizione di Vincoli, non di Breakpoint: si impostano regole come “il blocco deve avere una larghezza compresa tra 20 caratteri e 60 caratteri”, lasciando al browser la libertà di calcolare la disposizione ottimale.
• Strumenti CSS moderni: l’uso di potenti strumenti CSS come Flexbox, CSS Grid, e funzioni come clamp(), min(), max(), e unità di misura flessibili come fr, vh, vw rendono possibile questo approccio.

Perché WordPress sposa l’Intrinsic Web Design

WordPress, con l’introduzione dell’Editor a Blocchi (Gutenberg) e la filosofia del Full Site Editing (FSE), ha abbracciato l’Intrinsic Web Design come suo principio fondamentale.

L’obiettivo di WordPress è dare agli utenti la libertà di progettare senza dover scrivere codice. Questo è possibile solo se i blocchi sono intrinsecamente flessibili e non dipendono da rigide regole globali del tema.

1. Migliore esperienza per l’utente finale: il Design Intrinseco permette ai creatori di siti (che spesso non sanno scrivere codice CSS) di costruire layout complessi che funzionano perfettamente su tutti i dispositivi senza dover configurare manualmente i breakpoint per tablet e mobile. Il blocco è “intrinsecamente” responsive.
2. Layout modulare e flessibile: i blocchi di WordPress sono pensati per essere unità indipendenti. Applicando il design intrinseco, un blocco sa come comportarsi in modo responsive sia che venga inserito in una colonna stretta o in un contenitore a piena larghezza, aumentando la sua riutilizzabilità e modularità.
3. Funzionalità di fluidità:
   • Tipografia fluida: permette di definire la dimensione del testo in modo che si ridimensioni gradualmente e automaticamente al variare della dimensione dello schermo, garantendo una leggibilità ottimale senza salti bruschi.
   • Spaziatura fluida: consente di definire la spaziatura – margini e spaziatura interna (padding) – con unità flessibili in modo che si adattino allo spazio disponibile, fornendo un aspetto consistente e ben bilanciato su qualsiasi viewport.

Adottando l’Intrinsic Design, WordPress mira a rendere la creazione di siti responsive la norma di default, permettendo ai temi Full Site Editing di essere più leggeri e più veloci, grazie al minor carico di regole CSS.

In quali blocchi troviamo la tipografia fluida

Nella tipografia troviamo 6 opzioni di grandezza del testo, da un sistema di lettere che va dalla S alla XXL.

Nuovi blocchi introdotti in WordPress 6.9 

Questi blocchi sono stati aggiunti con il rilascio della versione 6.9 e includono il supporto nativo per la tipografia: 

• Accordion: Permette di personalizzare il testo dei titoli e del contenuto espandibile
• Matematica: Supporta il rendering di MathML e LaTeX con opzioni di stile per i caratteri
• Tempo di lettura: Consente di formattare il testo che indica la durata stimata della lettura
• Query termini: Utilizzato per visualizzare elenchi di categorie o tag con controllo sui font
• Conteggio commenti: Visualizza il numero di commenti di un articolo e permette di personalizzare la sua tipografia
• Link ai commenti: Collegamento testuale ai commenti di un post

Blocchi di testo standard

• Paragrafo: il blocco base con controllo completo su font, colori e dimensioni
• Titolo: è stato potenziato con il supporto Fit Text per adattarsi automaticamente alla larghezza del contenitore
• Elenco: supporta la personalizzazione del testo dei singoli punti elenco
• Citazione e Citazione evidenziata: includono controlli per il corpo del testo e per la didascalia/autore
• Verso: specifico per poesie o testi preformattati
• Preformattato: mantiene la spaziatura originale ma permette modifiche tipografiche

Blocchi di Design e Layout

• Pulsante: permette di regolare il font del testo al suo interno
• Copertina: il testo sovrapposto alle immagini o ai video sfrutta i controlli tipografici globali
• Tabella: include opzioni per il testo nelle celle e nelle intestazioni
• Colonne: sebbene sia un contenitore, i blocchi di testo al suo interno ereditano le proprietà tipografiche

Blocchi del tema (Full Site Editing)

• Titolo del sito / Motto del sito: controlli per l’identità visiva del brand
• Titolo del contenuto / Riassunto: fondamentali per i template dinamici
• Navigazione: gestione del carattere per le voci di menu

Nota aggiuntiva: con WordPress 6.9, puoi modificare i preset di dimensioni del testo, rendendo la tipografia più personalizzata per il tuo progetto

Trovi questa personalizzazione sotto Editor > Stili > Tipografia > Dimensione carattere

In quali blocchi troviamo la spaziatura fluida

In questo caso abbiamo 3 tipi di spaziatura sotto la scheda Dimensioni delle opzioni del blocco

• Spaziatura interna
• Margini
• Spaziatura tra i blocchi (solo per i blocchi di layout)

Blocchi contenitore (Layout)

Questi blocchi sono i principali utilizzatori della spaziatura fluida per gestire la spaziatura interna, i margini e lo spazio tra i blocchi.

• Gruppo: include le variazioni Riga, In colonna e la nuova Griglia
• Colonne: utilizza la spaziatura fluida per gestire il distanziamento tra le singole colonne
• Copertina: supporta il padding fluido per distanziare il contenuto dai bordi dell’immagine o del video di sfondo

Blocchi di Design e Navigazione

• Pulsanti: la spaziatura tra più pulsanti e la spaziatura interna di ogni singolo pulsante possono essere fluidi
• Navigazione: gestisce lo spazio tra le voci di menu in modo fluido per garantire la leggibilità su dispositivi mobili
• Icone social: utilizza la spaziatura fluido per distanziare le icone dei social media

Nuovi blocchi in WordPress 6.9

I blocchi introdotti nella versione 6.9 supportano nativamente gli strumenti di spaziatura avanzata del core:

• Fisarmonica: gestisce lo spazio tra i vari elementi espandibili e il padding del contenuto interno
• Query termini: permette di regolare la spaziatura fluida tra i termini (categorie/tag) visualizzati
• Tempo di lettura e Matematica: supportano margini e padding fluidi per l’integrazione nel layout

Blocchi di Testo e Media

Quasi tutti i blocchi che supportano l’opzione “Dimensioni” permettono ora margini e padding fluidi:

• Paragrafo e Titolo: insieme al supporto per il Fit Text (tipografia fluida), permettono di impostare margini fluidi per mantenere proporzioni costanti nel layout
• Galleria: utilizza la spaziatura fluida per gestire il “gap” tra le immagini
• Citazione e Citazione evidenziata: supportano il padding fluido per i bordi e la spaziatura del testo

Per concludere

L’adozione dell’Intrinsic Web Design ha segnato un punto di svolta per WordPress: i layout non si limitano più ad adattarsi ai diversi schermi, ma rispondono intelligentemente allo spazio disponibile, creando esperienze fluide e contestuali.

Con questa filosofia costruisci siti più veloci, leggeri e moderni, delegando al browser i calcoli complessi mentre tu ti dedichi alla creatività e all’esperienza utente.

Aggiornamento

A partire dalla versione 7.1 WordPress introdotto il supporto al Responsive Web Design. Dopo anni focalizzati sull’Intrinsic Design, la piattaforma ha risposto alle esigenze del settore pur restando fedele alla propria architettura originaria.
L’intrinsic Design non è stato sostituito, ma ampliato. È stato fornito uno strumento in più adatto ai neofiti, come da filosofia del CMS, che include principi storici come il “Design per la maggioranza”.