Fanpage.it

Il problema

Fanpage.it è il prodotto più grande su cui ho lavorato e quello con il margine di errore più stretto.
A quel volume di lettura, una gerarchia sbagliata non è un problema estetico: sposta traffico, tempo sulla pagina e ricavi. Ogni nuovo componente va disegnato sapendo che verrà servito milioni di volte al giorno.

Il template articolo

Il primo istinto di chi disegna è progettare sull’iPhone che ha in mano. I dati dicono un’altra cosa.

Ho lavorato sui device reali dei lettori di Fanpage, non sulle medie di mercato. Su circa 50 milioni di eventi in un mese, il viewport più diffuso non è un iPhone: è 360×800, l’8,2% del traffico mobile. Non è un singolo telefono, è un ecosistema (OPPO, Samsung, Realme, Xiaomi): entry‑level Android, la fascia che di solito non entra nei mockup.

Quasi un lettore su quattro sta su uno schermo piccolo: il 24,3% del traffico. Sommando Android “core”, Apple legacy e device sotto i 360px, il margine sopra la piega si stringe rispetto a quello su cui si tende a disegnare di default.

Da qui è partito il nuovo template. Non l’ho tarato sul telefono comodo, ma sulla zona di sicurezza reale: 650px di altezza utile, una volta tolto il browser, la soglia che regge per quasi tutti i lettori. Quello che funziona lì, funziona ovunque sopra.

In quei 650px entra solo quello che serve a capire dove sei e a cominciare a leggere: titolo, apertura, primo segnale del contenuto. E deve restare Fanpage: disposizione degli elementi e caratteri sono quelli della testata, non un layout neutro montato per andare veloce. È il punto in cui i vincoli litigano: l’identità chiede spazi e font suoi, la velocità li vorrebbe togliere. Il primo viewport è dove le due cose si tengono insieme, leggibile e riconoscibile senza pagare in peso.

Niente pubblicità nel primo caricamento. L’adv è il ricavo, ma nel primo viewport è il peso che rallenta la partenza, e la partenza è il momento in cui il lettore decide se resta. L’ho spostata sotto la soglia, dove entra a lettura già avviata, senza rubare il primo istante.

Il risultato si misura dove conta per il ranking: il template tiene l’LCP nella fascia buona di Google (sotto i 2 secondi), con layout shift praticamente nullo. Su una pagina che deve caricare video, paywall e pubblicità, tenere questi due valori in verde è la prova che la struttura regge il peso senza rompere né la velocità né la lettura.

Le categorie trasformate in landing

A un certo punto la testata ha smesso di pubblicare solo articoli e ha cominciato a pubblicare prodotti: rubriche con un nome, una voce, una cadenza, a volte un abbonamento davanti. L’editoriale del direttore la mattina presto, il podcast del fine settimana, le interviste lunghe.

Una categoria, di suo, è un elenco in ordine di data. Per un prodotto del genere, l’elenco arriva troppo presto: chi ci finisce sopra non sa ancora cosa sta guardando e la prima riga della lista non glielo può spiegare. Serviva la struttura di una landing: cosa è, chi lo fa, con che ritmo esce, cosa ottieni, con l’elenco che riprende subito sotto, quando la domanda diventa “da quale comincio?”.

Il vincolo era non farne una pagina a mano. Una landing costruita su misura per una rubrica è una pagina che nessuno aggiornerà più il giorno in cui esce la seconda rubrica. Quindi è un template: gli stessi blocchi riempiti dalla redazione, con un pezzo in testa che dichiara i format e uno stato in più per i contenuti riservati agli abbonati.

La landing dell’abbonamento, tenuta fuori dal sito

La pagina che vende l’abbonamento sta su un sottodominio dedicato, join.fanpage.it, ed è costruita in Framer invece che dentro il prodotto editoriale.

È una scelta, con una ragione di cadenza. Una pagina di vendita si riscrive quando cambia l’offerta, quando parte una promozione, quando si aggiunge un format: molto più spesso di quanto si rilasci un sito editoriale, e per ragioni che non hanno niente a che fare con l’editoriale. Tenerla dentro significa mettere ogni virgola di marketing in coda a una release. Tenerla fuori significa che chi la scrive la cambia lo stesso giorno.

Il prezzo lo si paga sulla coerenza: due impianti diversi che devono sembrare la stessa azienda. Si paga con i token: colori, caratteri, misure, spazi ricopiati identici dall’altra parte, e con la regola di non inventare lì componenti che nel prodotto non esistono. È una manutenzione che va messa in conto, non un problema risolto una volta.

Il contenuto della pagina segue la stessa logica del paywall, portata più avanti: non elenca cosa perdi, dichiara cosa sostieni, e poi mostra i format uno per uno, ognuno con il suo “perché”. L’offerta è una sola, con la prova gratuita davanti e il prezzo pieno scritto sotto, invece che in una nota.