Footer da sito premium con l'AI: 3 esempi veri
Come si fa un footer da sito premium? Tre siti veri a confronto, i prompt per farlo rifare a un agente AI e i due bug che si vedono solo aprendo la pagina.
Un footer da sito premium fa tre lavori: dice come raggiungere una persona vera, aiuta a orientarsi e chiude la pagina con il marchio, grande e calmo. Qui trovi tre siti veri da cui rubare un'idea ciascuno e i prompt per farla rifare a un agente AI, che nella nostra prova ci ha messo circa due minuti.
Cos'è
La fascia in fondo a ogni pagina del sito. Quasi tutti la costruiscono per ultima, di fretta.
Perché serve
Chi scorre fino in fondo di solito cerca qualcosa: un'email, un indirizzo, un orario. Un buon footer gli risponde con un'occhiata.
I tre siti vengono dalla prima pagina di siteinspire, una raccolta di siti fatti bene, registrati il 4 novembre 2026 in una finestra larga 1.440 pixel. Descriviamo solo quello che si vede: i loro numeri non li conosciamo.
1. Komma Komma: prima il contatto, il nome per ultimo
Komma Komma è uno studio web di Reykjavik, in Islanda. Il suo footer è il più classico dei tre.
Cos'è. Quattro colonne con piccole etichette grigie: Contact Info, Navigation, Studio, Privacy Policy. In fondo, "KOMMA KOMMA" in lettere nere enormi, da un bordo all'altro.
Perché funziona. La prima colonna ha l'email scritta per intero, da copiare, e un link "Book a call". La colonna Studio riporta "Reykjavik, IS", l'ora locale ("14:21 GMT" durante la registrazione) e le coordinate: persone vere, in un posto vero. Il nome in chiusura è un'immagine larga quanto i contenuti sopra (1.376 pixel).
Come si fa. Subito prima del footer c'è una domanda grande, "Do you have a project in mind?", con un pulsante "Let's talk". Il footer arriva dopo:
Rifai il footer del mio sito in quattro colonne, ognuna con una piccola etichetta grigia: Contatti, Navigazione, Studio, Privacy. Nella prima colonna metti la mia email [email] scritta per intero come testo selezionabile e un link "Prenota una chiamata". Nella colonna Studio metti città, paese e ora locale. In fondo, il nome del marchio a caratteri enormi, largo esattamente quanto i contenuti sopra. Subito prima del footer, una sezione con la domanda "Hai un progetto in mente?" e un solo pulsante.
2. Stereoscope Coffee: il footer come un bancone
Stereoscope Coffee è una torrefazione con negozi nella zona di Los Angeles e a Seul.
Cos'è. Una griglia a linee sottili, come un modulo stampato: newsletter, "Visit our store (1/7)" con un negozio alla volta (foto, indirizzo, orari, pallino colorato), link, email e social. In fondo "STEREOSCOPE" su tutta la larghezza.
Perché funziona. Risponde alla domanda "posso andarci adesso?". Ogni scheda finisce con un pallino e una parola: durante la registrazione Seul aveva un pallino rosso e "CLOSED" (lì erano le 23:24), Hollywood un pallino verde e "OPEN". E invece di una lista di sette negozi, due piccole frecce mostrano il successivo:
Come si fa. Due orologi dal vivo, "LA" e "SEOUL", hanno ciascuno un piccolo conteggio, "(3/5)" e "(0/2)" in quel momento. Probabilmente vuol dire "negozi aperti / negozi in città", ma nessuna etichetta lo dice: è l'unico punto debole. Nel prompt chiedilo in chiaro:
Nel footer aggiungi una scheda per ogni sede, una alla volta, con due piccole frecce per passare alla successiva. Ogni scheda ha foto, indirizzo, orari e in fondo un pallino colorato con accanto la parola "Aperto" o "Chiuso", calcolata sull'ora locale della sede. Se mostri un conteggio, scrivi sempre cosa conta.
3. House of Honey: il logo diventa un'opera
House of Honey è uno studio di interior design in California. Il suo footer è il più calmo, e il più coraggioso.
Cos'è. Uno sfondo marrone scuro quasi tutto occupato da una grande forma rosa. Sotto, link, Instagram, un'email per le candidature e due indirizzi con telefono.
Perché funziona. Quella forma è il logo dello studio, il simbolo in alto a sinistra. Il codice della pagina mostra che il footer usa la stessa forma, a tutta larghezza (1.424 pixel). Nessuna parola, eppure dice "House of Honey". I colori sono solo due, marrone scuro e rosa chiaro, gli stessi della barra del menu.
Come si fa. L'invito arriva subito prima: una scheda rosa su una foto dice "It would be a privilege to hear from you", con un link "Get in Touch". Così il footer può restare tranquillo.
Chiudi il footer con il mio logo: lo stesso SVG del logo nell'header, ingrandito a tutta la larghezza e nascosto ai lettori di schermo. Usa solo due colori, gli stessi della barra del menu. Sotto il logo: link alle pagine, social, email e indirizzi. Subito sopra il footer, una scheda con un invito a scriverci e un solo link.
Il filo comune. Tutti e tre chiudono con il marchio da bordo a bordo, e il footer non vende: in due casi su tre domanda e pulsante stanno nella sezione sopra. Studio o professionista? Parti da Komma Komma. Negozio o locale? Stereoscope. Logo con una forma forte? House of Honey.
4. Rifallo con un agente AI
Alek ha dato a Claude Code una cartella vuota e un prompt con le idee migliori dei tre. L'agente poteva solo leggere e scrivere file e ha finito in circa due minuti. Ecco la pagina dopo due giri di correzioni:
Come si fa:
- In una cartella vuota, incolla all'agente il prompt qui sotto con i tuoi dati.
- Apri la pagina nel browser con la console degli errori.
- Se c'è un errore, incollalo all'agente così com'è.
- Stringi la finestra a 360 pixel e riallargala: il nome deve riempire sempre la larghezza.
Il prompt contiene già le correzioni che nella prova sono servite dopo:
Crea una piccola pagina demo con tre file: uno HTML, uno CSS e uno JavaScript. Niente librerie, niente framework. Il JavaScript serve solo per l'orologio. Lo studio si chiama [nome] e sta a [città]. Prima del footer, una sezione "Hai un progetto in mente?" con un solo pulsante. Il footer ha tre livelli: quattro colonne con etichetta, con il contatto nella prima colonna e l'email come testo visibile; una linea sottile; il nome gigante, che riempie la larghezza del footer da bordo a bordo su schermi da 360 a 2.560 pixel. Regole: usa un vero elemento footer e una navigazione con etichetta; mostra a ogni visitatore l'ora di [città], ovunque si trovi, con Intl.DateTimeFormat e il fuso [Europe/Lisbon]; accanto all'ora, un pallino con la parola "Aperto" o "Chiuso": aperto dal lunedì al venerdì, dalle 9:00 alle 18:00; l'orologio e il pallino restano nascosti finché lo script non parte; se il JavaScript è spento, mostra gli orari scritti per esteso; il nome gigante è un SVG nascosto ai lettori di schermo con aria-hidden, perché il nome compare già nel copyright; misura la parola con getBBox, non indovinare, e misurala di nuovo quando i font hanno finito di caricarsi; non chiamare nessuna variabile globale status; sul telefono le colonne si impilano e ogni link ha più spazio intorno.
Con il browser impostato sull'ora di New York, il footer mostrava comunque l'ora di Lisbona. Il browser conosce già i fusi orari, ora legale compresa.
I due bug. L'agente non poteva eseguire niente e l'ha detto, suggerendo di controllare a mano.
Bug 1: il pallino mentiva. Diceva "Open now" ma il pallino restava grigio, e un errore in console fermava anche l'orologio dopo il primo minuto. Il motivo: il pallino stava in una variabile chiamata status, e i browser hanno già una variabile globale con quel nome, che trasforma tutto in testo. Rinominata statusBadge, il pallino è diventato verde.
Bug 2: lettere stirate. La prima versione forzava la parola a una lunghezza esatta e il browser allargava ogni lettera. La seconda allontanava le lettere, perché con quei font la parola occupava solo l'84% circa dello spazio. Al terzo giro: misura, non indovinare. Il nome è un SVG (un'immagine che si adatta a ogni dimensione); lo script misura la parola come il browser l'ha disegnata, con getBBox, e regola l'SVG su quella misura:
Prova piccola
Scorri fino in fondo al tuo sito e leggi il footer come lo leggerebbe uno sconosciuto. Poi aggiungi una sola riga: la tua città con l'ora locale accanto, e la tua email come testo visibile.
È riuscita se una persona che non ti conosce, in cinque secondi, sa dove sei, che ore sono lì e come scriverti.
Attenzione a
- I bug si vedono solo guardando. L'agente ha corretto ogni bug in circa un minuto, ma li ha trovati una persona aprendo la pagina.
- I font cambiano da un computer all'altro. Un nome in testo va misurato. Due dei siti veri usano un'immagine (il nome per Komma Komma, il logo per House of Honey), che non cambia con i font di chi visita.
- Mai solo il colore. Un pallino rosso o verde non dice niente a chi non distingue quei colori: scrivi sempre "Aperto" o "Chiuso".
Il prossimo pezzo da sistemare? La pagina prezzi: 3 esempi da copiare. Per tenere l'agente dentro regole chiare: redesign di un'app con l'AI senza rompere il codice.
Fonte: il pezzo di Alek su Medium. Grazie a Komma Komma, Stereoscope Coffee e House of Honey.
In breve: Un footer premium dice come raggiungere una persona vera, aiuta a orientarsi e chiude con il marchio grande: l'agente lo scrive in minuti, i bug li vedi solo nel browser.
Newsletter
L'AI che funziona davvero, nella tua casella.
Le nuove pillole, gli strumenti che usiamo e quello che impariamo sui progetti. Poche mail, solo quando c’è qualcosa di utile.
