Mobile-first design ristorante: checklist 2026 per convertire prenotazioni

Apri il sito del tuo ristorante dallo smartphone. Quanto tempo ci metti a trovare il numero di telefono? Riesci a prenotare un tavolo senza pizzicare lo schermo per zoomare? Il menu è sfogliabile o ti rimanda a un PDF da 8MB?

Se hai risposto "non benissimo" anche a una sola di queste domande, stai perdendo prenotazioni ogni singolo giorno.

I numeri non mentono. Secondo l'Osservatorio FIPE 2025, il 78% degli italiani cerca un ristorante da smartphone, con punte dell'85% tra i 18-44 anni. Google penalizza i siti non ottimizzati per mobile nei risultati locali. Il costo di un sito lento o difficile da usare non è teorico: è misurabile in coperti vuoti.

Questa guida è una checklist operativa. Niente teoria del design, niente concetti astratti. Punto per punto, quello che devi verificare — e correggere — per trasformare il tuo sito in una macchina da prenotazioni.

---

Perché il mobile-first nel 2026 non è più opzionale

Nel 2018 Google ha introdotto il mobile-first indexing: significa che il motore di ricerca valuta e posiziona il tuo sito in base alla versione mobile, non desktop. Se la tua versione mobile è scadente, il tuo posizionamento su Google Maps e nella ricerca locale ne risente direttamente.

Ma c'è un problema ancora più concreto: l'intento d'uso.

Chi cerca "ristorante [città]" da smartphone è quasi sempre in modalità decisione immediata. Ha fame, sta pianificando la serata, è già in zona. Il suo percorso è: cerca → trova → prenota (o chiama). Questo percorso dura mediamente meno di 90 secondi. Se in quei 90 secondi il tuo sito è lento, confuso o non funziona, passa al concorrente.

La buona notizia: la maggior parte dei problemi mobile sono risolvibili senza rifare il sito da zero.

---

Sezione 1 — Velocità e performance

La velocità è la base di tutto. Un sito che impiega più di 3 secondi a caricarsi perde il 40% degli utenti ancora prima che vedano una pagina (fonte: Google/SOASTA).

Come misurare: vai su PageSpeed Insights e inserisci l'URL del tuo sito. Guarda i punteggi per mobile, non desktop.

Checklist velocità

• LCP (Largest Contentful Paint) sotto 2,5 secondi — misura quanto ci vuole a mostrare il contenuto principale
• CLS (Cumulative Layout Shift) sotto 0,1 — evita che gli elementi saltino mentre la pagina carica
• FID/INP sotto 200ms — misura la reattività ai tocchi
• Immagini in formato WebP o AVIF — risparmio del 30-50% rispetto a JPEG/PNG
• Immagine hero sotto 150KB — la foto principale del locale non deve appesantire il caricamento
• Lazy loading attivo — le immagini non visibili caricano solo quando servono
• Hosting con CDN — i file vengono serviti dal server geograficamente più vicino all'utente

Caso pratico. Una trattoria a Bologna con sito su hosting economico aveva un LCP di 6,8 secondi. Dopo migrazione su hosting con CDN e compressione immagini: LCP a 2,1 secondi. Prenotazioni da mobile aumentate del 34% nel trimestre successivo, senza cambiare nulla del design.

---

Sezione 2 — CTA e conversione above the fold

"Above the fold" è quello che l'utente vede senza scorrere. Su mobile, è uno spazio prezioso e limitato — mediamente 640×360 pixel su un iPhone medio.

In quello spazio devi comunicare tre cose in meno di tre secondi:

1. Chi sei (nome del locale, tipo di cucina)
2. Dove sei (città, quartiere)
3. Cosa fare ora (prenota, chiama)

Checklist CTA e conversione

• Pulsante "Prenota" visibile senza scroll — deve essere above the fold su uno schermo da 375px di larghezza
• Altezza minima pulsante: 48px — standard Google per usabilità touch
• Numero di telefono cliccabile — usa <a href="tel:+39..."> per abilitare la chiamata diretta
• Contrasto WCAG AA — il testo sul pulsante deve avere un rapporto di contrasto minimo 4.5:1
• Un solo CTA principale — non mettere "Prenota", "Ordina", "Vedi menu" e "Contattaci" tutti alla stessa altezza. Scegli una priorità
• Indirizzo e orari visibili nella home — senza che l'utente debba cercare nella pagina "Contatti"

Tip pratico: testa il tuo sito con una mano sola, con il pollice. Riesci a premere tutti i pulsanti principali senza spostarti? Se devi fare acrobazie con le dita, i tuoi clienti abbandonano.

---

Sezione 3 — Form di prenotazione

Il form è il momento della verità. È il punto in cui l'utente decide se completare l'azione o rinunciare.

Ogni campo aggiuntivo riduce le conversioni. Uno studio di Baymard Institute mostra che semplificare un form da 9 a 5 campi aumenta i completamenti del 26%.

Checklist form prenotazione

• Massimo 5 campi: data, orario, numero coperti, nome, telefono (o email)
• Date picker nativo mobile — usa <input type="date"> per aprire il calendario del sistema operativo
• Orari selezionabili con slot predefiniti — dropdown o bottoni, non campo libero
• Tastiera numerica automatica — per campi telefono usa <input type="tel">
• Conferma via SMS o email — la prenotazione deve generare una conferma automatica
• Messaggio di errore chiaro — se l'utente sbaglia un campo, indica esattamente quale e come correggerlo
• Pagina di ringraziamento dedicata — utile anche per tracciare le conversioni in GA4

Quanto costano le commissioni delle piattaforme di prenotazione? TheFork applica una commissione di circa 2-4€ per coperto "originato" dalla piattaforma. Per un ristorante da 80 coperti con il 60% delle prenotazioni via TheFork, stiamo parlando di 1.500-3.000€ al mese di commissioni. Un form diretto sul sito costa zero commissioni. Approfondisci come ridurre i costi con il nostro calcolatore ROI prenotazioni.

---

Sezione 4 — Menu digitale mobile-first

Il menu è la seconda pagina più visitata di qualsiasi sito ristorante, dopo la home. Eppure il 60% dei locali italiani offre ancora un PDF non ottimizzato per mobile (dato: ricerca Webristoranti 2025 su un campione di 500 siti HORECA).

Un PDF su mobile:

• Non è indicizzato da Google (non aiuta la SEO)
• Non si aggiorna automaticamente quando cambi i prezzi
• È impossibile da navigare su schermi piccoli
• Non mostra foto dei piatti
• Non filtra per allergeni

Checklist menu digitale

• Niente PDF — sostituiscilo con pagine HTML o un menu digitale integrato
• Navigazione per categorie — antipasti, primi, pizze, dessert: tab o accordion cliccabili
• Foto dei piatti ottimizzate — almeno per i best seller (aumentano l'ordine medio del 20-30% secondo Unione Italiana Food)
• Indicatori allergeni visibili — obbligo normativo Reg. UE 1169/2011, ma anche un valore per il cliente
• Prezzi aggiornati — un menu con prezzi sbagliati genera reclami e sfiducia
• Menu stagionale facile da aggiornare — tu o il tuo staff dovete poterlo fare senza chiamare un tecnico

Scopri come funziona il nostro menu digitale multilingua con AI, che permette di aggiornare prezzi e piatti in tempo reale e mostra il menu tradotto automaticamente per i clienti stranieri.

---

Sezione 5 — Local SEO e schede Google

Un sito mobile-first senza local SEO è come un bel locale in un vicolo buio. La visibilità su Google Maps dipende da una combinazione di fattori: rilevanza, distanza e prominenza — e la prominenza si costruisce anche dal sito.

Checklist local SEO mobile

• Google Business Profile aggiornato — orari, foto, categoria, attributi (parcheggio, accessibilità, WiFi)
• Schema markup LocalBusiness — dati strutturati per nome, indirizzo, telefono, orari nel codice del sito
• Mappa Google incorporata e cliccabile — apre Google Maps nativo al tap su mobile
• NAP consistente — Nome, Indirizzo, Telefono identici su sito, GBP, TheFork, TripAdvisor
• Pagina "Dove siamo" con indicazioni — non solo la mappa, anche indicazioni testuali (fermata metro, parcheggio)
• Orari festività aggiornati — chiudere il giorno di Natale senza aggiornare GBP genera recensioni negative

Per approfondire la SEO locale specifica per il tuo tipo di locale, leggi la nostra guida nella sezione /guide/seo-locale.

---

Sezione 6 — Usabilità e accessibilità

Usabilità non significa "bello". Significa che il cliente riesce a fare quello che vuole fare nel minor tempo possibile.

Checklist usabilità

• Font size minimo 16px per il corpo testo — sotto questa soglia iOS zooma automaticamente, rompendo il layout
• Spaziatura tra link e pulsanti — almeno 8px tra elementi cliccabili vicini per evitare tap sbagliati
• Niente hover states come unico feedback — su mobile non esiste "passare il mouse sopra"
• Hamburger menu funzionante — se usi un menu a tendina, deve aprirsi e chiudersi facilmente
• Ricerca interna — per locali con menu esteso o più sedi, la ricerca aiuta
• Modalità scura supportata — sempre più utenti la usano di default in serata (proprio quando cercano dove mangiare)
• Pagina 404 personalizzata — con link alla home e al form prenotazione, per recuperare utenti persi

---

Sezione 7 — Velocità del checkout per delivery e asporto

Se il tuo ristorante fa anche delivery o asporto, ogni secondo nel processo d'ordine ha un impatto diretto sul fatturato.

Le piattaforme come Deliveroo, Glovo e Uber Eats prendono commissioni dal 25% al 35% su ogni ordine. Un ristorante con 3.000€ di ordini delivery settimanali paga 750-1.050€ di commissioni alla settimana — oltre 40.000€ l'anno.

Avere un sistema d'ordine diretto sul sito riduce questa dipendenza. Ma deve essere ottimizzato per mobile meglio di quanto lo siano le app delle piattaforme — che hanno team di UX dedicati.

Checklist ordine diretto mobile

• Carrello persistente — se l'utente chiude per sbaglio, l'ordine deve essere salvato
• Pagamento con Apple Pay / Google Pay — riducono l'abbandono al checkout del 35-40%
• Stima tempi di consegna in tempo reale — l'utente vuole sapere quando arriva il cibo prima di ordinare
• Riordino con un tap — per clienti abituali, proponi l'ultimo ordine con un solo pulsante
• Notifiche push o SMS di stato — "il tuo ordine è in preparazione", "il rider è partito"

Approfondisci come strutturare un sistema di chatbot per delivery diretto che gestisce gli ordini senza commissioni di piattaforma.

---

Il quadro completo: cosa ti costa NON ottimizzare

Facciamo un calcolo concreto per un ristorante tipo.

Per una pizzeria da 50 coperti con scontrino medio di 25€ a persona, perdere anche solo 30 prenotazioni al mese significa 1.500€ di fatturato mensile che svanisce — non per la qualità del cibo, ma per un sito mal ottimizzato.

---

Da dove iniziare: priorità di intervento

Non tutti i problemi hanno lo stesso peso. Se hai risorse limitate, intervieni in questo ordine:

Priorità 1 — Alto impatto, basso costo

1. Rendi cliccabile il numero di telefono
2. Aggiungi il pulsante "Prenota" above the fold
3. Comprimi le immagini e converti in WebP
4. Elimina il PDF del menu, sostituiscilo con HTML

Priorità 2 — Alto impatto, medio investimento 5. Semplifica il form di prenotazione a 5 campi 6. Aggiungi schema markup LocalBusiness 7. Ottimizza Google Business Profile 8. Migra su hosting con CDN

Priorità 3 — Investimento strutturale 9. Menu digitale con foto e filtri allergeni 10. Sistema prenotazione diretta con conferma automatica 11. Ordine diretto per delivery/asporto con pagamenti digitali

---

Conclusione

Il mobile-first non è un'opzione estetica. È la differenza tra un sito che lavora per te mentre sei in cucina e uno che regala clienti alla concorrenza.

Questa checklist è il punto di partenza. Puoi fare un audit interno in un pomeriggio: apri il sito dal telefono, prendi la checklist, spunta o segna le criticità. Poi agisci per priorità.

Se vuoi un'analisi professionale del tuo sito e un piano di intervento personalizzato, il team di Webristoranti Agenzia lavora esclusivamente con locali HORECA e sa esattamente dove si nascondono i problemi più comuni — e come risolverli rapidamente.

Il tuo prossimo cliente ti sta cercando adesso, dal telefono. Sei pronto ad accoglierlo?