Cos'è
Una tabella con molte colonne, o costruita con misure fisse invece che flessibili, è naturalmente larga — il che va bene su uno schermo desktop, ma non si restringe per adattarsi a uno schermo di telefono molto più stretto come fa la maggior parte degli altri contenuti su una pagina ben costruita. Invece, o costringe l'intera pagina a scorrere lateralmente o viene scomodamente compressa e difficile da leggere.
Perché è importante
Lo scorrimento laterale è una delle cose più stridenti in cui un visitatore può imbattersi su un telefono — rompe il normale pattern di scorrimento su e giù che le persone si aspettano ovunque altro sul web, ed è facile perdere davvero contenuto che si trova appena fuori schermo a destra senza rendersi conto che sia lì. Su una pagina altrimenti perfettamente adatta al mobile, una sola tabella larga e non avvolta può essere l'unica cosa che fa sembrare rotta l'intera esperienza a un visitatore mobile.
Come risolverlo
- Identifica quali tabelle sul tuo sito hanno molte colonne o sono state costruite con larghezze fisse in pixel invece che flessibili.
- Avvolgi ogni tabella larga in un contenitore con la proprietà CSS
overflow-x: auto— questo mantiene intatto il layout della tabella ma permette a un visitatore di scorrere lateralmente solo quella tabella con uno swipe del dito, invece che l'intera pagina si sposti. - Per le tabelle con molte colonne, valuta invece un pattern di tabella responsive — per esempio, impilando ogni riga nella propria scheda etichettata su schermi stretti invece di mantenere il tradizionale layout a griglia a ogni dimensione.
- Se usi un website builder, controlla se il suo blocco tabella ha già un interruttore "scorrimento mobile" o "responsive" prima di costruire una correzione personalizzata.
- Testa la correzione su uno schermo di telefono stretto reale (o la modalità di anteprima mobile del tuo browser), non solo ridimensionando una finestra del browser desktop, dato che lo scorrimento touch si comporta diversamente da un mouse.