Design responsive per ogni schermo
Precisione su ogni schermo, dispositivo e orientamento: dagli smartphone da 320 px ai monitor 4K ultrawide. Con il traffico prevalentemente mobile e l'indicizzazione mobile-first di Google, il responsive è un requisito di base. I nostri layout adattano l'esperienza al contesto, senza limitarsi a ridurre i contenuti.
Cosa facciamo
Come lavoriamo
Filosofia di design mobile-first
Progettiamo prima per lo schermo più piccolo, poi ampliamo progressivamente. Questo impone priorità: sul telefono rimangono contenuti e azioni essenziali. Definiamo quattro o cinque breakpoint basati sui dati analytics, non su larghezze arbitrarie dei dispositivi.
Griglie fluide e tipografia
CSS Grid e Flexbox creano layout flessibili che si adattano naturalmente. La tipografia fluida con CSS clamp() varia fra dimensioni minime e massime. Le container query permettono ai componenti di adattarsi al proprio contenitore, creando elementi UI modulari e riutilizzabili.
Ottimizzazione touch e gesti
Aree tattili di almeno 48 × 48 px con spaziatura adeguata. Gesti di scorrimento nativi, trascinamento per aggiornare e zoom delle immagini con due dita. Moduli con tastiera corretta e compilazione automatica. Navigazione mobile a pannello inferiore per tenere le azioni principali a portata di pollice.
Prestazioni e test su più dispositivi
Immagini responsive con srcset per inviare la dimensione adatta al dispositivo. Caricamento differito di immagini e componenti pesanti. Code splitting per evitare JavaScript riservato al desktop sui telefoni. Test su dispositivi reali e budget prestazionali per una ricarica inferiore a due secondi in 4G.
Responsive non significa solo entrare nello schermo
Un sito davvero responsive offre sul telefono le stesse informazioni e azioni del desktop, organizzate diversamente. Tagliare sezioni crea una versione ridotta. Google indicizza soprattutto ciò che vede sul telefono: i contenuti assenti lì possono mancare anche nell'indicizzazione. Realizziamo un'unica versione dei contenuti con layout adattivo.
Breakpoint scelti in base ai contenuti
I telefoni cambiano ogni anno: un layout costruito sulle misure di tre modelli può rompersi sul quarto. Posizioniamo i breakpoint dove il contenuto comincia davvero a soffrire riducendo la larghezza, non su una tabella di dispositivi. Così il risultato funziona anche sugli schermi futuri.
Tabelle e dati su schermi stretti
Nascondere una colonna fa entrare una tabella, ma elimina dati: l'utente mobile non vede prezzo o termine e non sa che mancano. La tabella deve scorrere nel proprio contenitore, con prima colonna fissa, senza spostare lateralmente l'intera pagina. Per grandi insiemi di dati può diventare un elenco di schede.
Area sicura, barra inferiore e altezza disponibile
Notch e barra dei gesti possono coprire un pulsante fisso in basso. Le barre mobili del browser alterano l'altezza disponibile e tagliano le sezioni a schermo intero. Usiamo variabili dell'area sicura e unità di altezza adatte, poi verifichiamo sul dispositivo: qui il simulatore spesso non basta.
Immagini in più dimensioni reali, non solo ridotte via CSS
Un'immagine di tremila pixel ridotta via CSS pesa sul telefono quanto sul desktop, ma viaggia su una connessione più debole. Generiamo più larghezze in formati moderni e lasciamo scegliere al browser. Riserviamo lo spazio prima del caricamento, evitando salti del testo fastidiosi e penalizzanti per la stabilità visiva.
Menu mobile: cosa nascondere e cosa lasciare visibile
Il menu a tre linee è familiare, ma tutto ciò che contiene perde visibilità. Contatto e azione principale devono restare visibili. Spesso il numero di telefono dista tre tocchi, benché sia il motivo della visita mobile. Lo rendiamo accessibile con una chiamata a un tocco e raccogliamo il resto nel menu.
Tablet e orientamento orizzontale
Il tablet combina larghezza da desktop e interazione touch: piccoli bersagli pensati per il mouse diventano difficili. Il telefono in orizzontale dimezza l'altezza disponibile e può rompere sezioni dimensionate in altezza. Testiamo tablet e orientamento orizzontale separatamente, senza dedurne il funzionamento dalla modalità verticale.
Test su dispositivi reali, oltre al simulatore
Il simulatore mostra le dimensioni, ma non riproduce fedelmente tastiera che copre i campi, ritardo al tocco, font di sistema, connessioni deboli o scorrimento inerziale. Verifichiamo su dispositivi fisici iOS e Android, incluso uno vecchio e lento: lì emergono problemi che gli utenti non segnalano, preferendo andarsene.
Cosa consegniamo
Cosa ricevi
Domande frequenti
Cosa ci chiedono i clienti
Come verifico se il mio sito è responsive?
Apri il sito sul telefono e controlla tre cose: niente movimento laterale durante lo scorrimento, testo leggibile senza zoom e pulsanti raggiungibili al primo tocco col pollice. Verifica home, contatti e una pagina prodotto o servizio. Se funzionano, la base è buona; gli altri problemi emergono con test più approfonditi.
Serve un'app separata per il telefono?
Nella maggior parte dei casi no. Un'app serve se gli utenti tornano spesso e hanno bisogno di notifiche o uso offline. Per un sito aziendale o un negozio aggiunge sviluppo, manutenzione su due sistemi e la barriera dell'installazione. Un buon sito responsive copre le stesse esigenze senza installare nulla.
Perché il sito appare diverso su iPhone e Android?
Usano motori di rendering diversi, con supporto, font di sistema e barre d'interfaccia differenti. Piccole differenze sono normali. Pulsanti non funzionanti o testi fuori schermo invece vanno corretti e si individuano testando entrambi i sistemi.
Si può adattare un sito esistente o va ricostruito?
Dipende dal codice. Dimensioni fisse ovunque o editor che generano posizioni assolute possono rendere l'adattamento più caro e fragile di una ricostruzione. Esaminiamo prima il codice e confrontiamo i costi su due anni con numeri concreti.
Il responsive conta per Google?
Sì. Google usa principalmente la versione mobile per l'indicizzazione: i contenuti assenti lì possono non essere considerati. Misura anche prestazioni e stabilità visiva. Il responsive da solo non garantisce posizioni migliori, ma consente di rendere accessibili contenuti e funzioni anche sul telefono.
Quanto tempo serve per adattare il sito a tutti i dispositivi?
In un sito costruito correttamente dall'inizio è parte del lavoro. Per un sito esistente il tempo dipende dai tipi di pagina, non dal numero totale: dieci pagine con lo stesso modello si risolvono insieme. Stimiamo dopo aver censito i layout.