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.
- 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.
- 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à.
- 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.