Au P'tit Zinc
95 in performance e 100 in accessibilità su un sito dominato dalle foto: era questa la sfida.
- Anno
- 2026
- Progettazione
- 3 settimane
- Stack
- Next.js · React · Tailwind · Vercel
- Design
- Sviluppo
- SEO locale
- Fotografia (direzione)
Versione dimostrativa pubblicata da KAYZEN su un indirizzo Vercel; il dominio definitivo appartiene al cliente.
- performance Lighthouse
- 95/100
- accessibilità Lighthouse
- 100/100
- SEO Lighthouse
- 100/100
- azioni sempre presenti su mobile
- 3
Cosa c'era da risolvere.
Il contesto
Au P'tit Zinc è un bistrot sul quai Pierre-Scize, nel 5° arrondissement di Lione, aperto dal 1992. Un indirizzo di quartiere noto per l'atmosfera di fine serata quanto per la cucina.
Il vincolo
Il locale si vende con l'atmosfera, quindi con la fotografia: luce calda, bancone, sala piena. Ma il sito fotografico di un ristorante è quasi sempre lento, e metà delle visite arriva da uno smartphone, per strada, alle 19:30, per trovare l'indirizzo e prenotare.
La risposta
Far convivere immersione e velocità. La prima schermata mostra un'immagine ampia con priorità di caricamento, tutto il resto è differito. Le tre azioni reali (prenotare, chiamare, indicazioni stradali) sono raggiungibili con un solo gesto da qualunque punto della pagina.
I punteggi rilevati alla consegna.
Punteggi Lighthouse del sito in produzione. Li pubblichiamo così come sono: quando uno è basso, la causa e il piano di correzione sono spiegati più sotto invece di essere taciuti.
Ogni scelta di design, e il suo perché.
Tema scuro e caldo
Fondo antracite, accenti rame, fotografie a dominante ambrata. Qui lo scuro non è una moda: riproduce la luce del locale nell'ora in cui si decide di andarci.
Tre azioni, sempre a portata
Prenotare, chiamare, indicazioni. Una barra d'azione fissa su mobile le mantiene accessibili durante tutto lo scorrimento. È l'unica cosa che l'80% dei visitatori viene a fare.
Un carosello senza trappole
Scorrimento automatico disattivato di default, comandi da tastiera, pausa al passaggio del mouse e arresto totale se l'utente ha chiesto di ridurre il movimento. Un carosello che avanza da solo è il componente più universalmente detestato del web.
Palette del progetto
Antracite
#171412
Sfondo
Rame
#B4763A
Accenti, azione
Avorio
#F3EDE4
Testo
Verde bottiglia
#2E4034
Sezioni secondarie
Sistema tipografico
Titoli
Playfair Display
Testo corrente
Inter 400
Un serif ad alto contrasto per il nome e i titoli, nello spirito del bancone di zinco, e un sans-serif neutro per il menu, che deve restare leggibile in un secondo.
Cosa c'è sotto il cofano.
- Next.js
- React
- Tailwind
- Vercel
Una sola immagine prioritaria
L'immagine della prima schermata è precaricata e dimensionata tramite attributi; tutte le altre sono differite. È ciò che consente 95 in performance su un sito fatto di fotografie.
Formati moderni e dimensioni servite
Ogni foto esiste in più larghezze, servite tramite srcset. Uno smartphone non scarica l'immagine pensata per il desktop: è la prima fonte di spreco nei siti di ristoranti.
Prenotazione esterna ma differita
Il modulo di prenotazione di un fornitore terzo pesa diverse centinaia di kilobyte. Viene caricato solo al clic su «Prenota», non al caricamento della pagina.
Come il sito si fa trovare.
Ricerche di prossimità
«Bistrot Lyon 5», «restaurant quai Pierre-Scize», «où manger Vieux Lyon le soir» (dove cenare nella Vieux Lyon). Sono ricerche di decisione immediata, spesso fatte a meno di un chilometro dal ristorante.
Markup Restaurant completo
JSON-LD Restaurant con indirizzo, recapiti, orari, fascia di prezzo, tipo di cucina e link al menu. È questo blocco che Google riprende nel pannello locale.
Coerenza con la scheda Google
Nome, indirizzo e telefono identici carattere per carattere tra il sito e la scheda dell'attività. Una discrepanza, anche solo di punteggiatura, indebolisce il posizionamento locale.
Utilizzabile da tutti.
Da giugno 2025 l'Atto europeo sull'accessibilità (European Accessibility Act) impone l'accessibilità digitale a una larga parte dei servizi online. La affrontiamo in fase di progettazione, non come rimedio a posteriori.
100/100 su fondo scuro
La trappola del tema scuro è il testo grigio su antracite. Tutte le coppie sono state portate sopra 4,5:1, e i testi sovrapposti alle foto passano per un velo abbastanza denso da reggere la soglia qualunque sia l'immagine.
Cosa è stato consegnato.
- Home
- Il menu
- Il locale
- Prenota
- Come arrivare e orari
- Contatti
Lo svolgimento del progetto.
Direzione fotografica
Selezione e ritocco: il sito vale quanto valgono le sue immagini.
Design
Tema scuro, barra d'azione, carosello sotto controllo.
Sviluppo
Immagine prioritaria, srcset, prenotazione differita.
SEO locale
Markup Restaurant, coerenza con la scheda Google.
Cosa ci chiedono spesso.
Altri lavori
Cybersicurezza e app multipiattaformaSésame
Un password manager che non può leggere le tue password: la prova era l'architettura.
Cybersicurezza e app webSésame Éclair
Un segreto, una lettura, zero tracce: la chiave non lascia mai il link, il server conserva solo un blocco illeggibile.
Conformità GDPR e SaaSKonsent by Kayzen
Un fornitore di banner che verifica i banner è giudice e parte: l'indipendenza era il prodotto.
Lo stesso livello di rigore, per il tuo sito.
Audit gratuito del tuo sito attuale, preventivo entro 24 ore e un ragionamento scritto, come quello che hai appena letto. Pagamento in tre rate senza interessi; agevolazioni locali verificate prima della firma.