@media (max-width: 640px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
margin-bottom: 10px;
border-radius: 8px;
padding: 8px;
}
td {
border: none;
position: relative;
padding-left: 50%;
text-align: right;
}
td:before {
content: attr(data-label);
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
}Redimensionarea unui dashboard complex pentru ecrane de mobil e moartea pasiunii. Am avut de curând un proiect de monitorizare flote cu vreo 12.000 de utilizatori activi, unde mulți erau pe teren și foloseau tablete sau telefoane. Am fost nevoit să regândesc complet layout-ul ca să nu-și prindă urechile în tabele uriașe și meniuri care acopereau tot ecranul.
Iată cele trei mari probleme de care m-am lovit și cum le-am rezolvat fără să o iau razna.
2. Sidebar-ul collapsible: De la 260px la iconițe și overlay
Pe desktop, un sidebar de 260px e perfect pentru că ai spațiu. Pe tabletă devine o risipă de spațiu, iar pe mobil e direct un dezastru. Sincer, cea mai curată abordare pe care am găsit-o folosește variabile CSS pentru lățime.
Pe tabletă (768px - 1024px), transform sidebar-ul într-o bară îngustă de 70px, lăsând doar iconițele vizibile. Pe mobil, sidebar-ul devine complet ascuns (transform: translateX(-100%)) și apare ca un overlay doar când utilizatorul apasă pe hamburger menu.
Trade-off: Versiunea cu iconițe pe tabletă arată curat, dar userul trebuie să știe deja ce înseamnă fiecare pictogramă. Dacă ai un meniu stufos cu sub-meniuri, varianta asta devine destul de greu de implementat UX-friendly fără un JS suplimentar care să controleze stările de hover sau click.
2. Tabelele mari: Sticky columns și indicii de scroll
Dacă ai un tabel cu peste 10 coloane, să-l înghesui pe mobil e exclus. Soluția rapidă este un container cu overflow-x: auto. Dar utilizatorii de multe ori nu-și dau seama că pot face scroll în lateral.
Ca să rezolv asta, folosesc întotdeauna position: sticky pe prima coloană (de obicei numele entității sau ID-ul), astfel încât restul datelor să treacă pe sub ea. În plus, adaug o umbră discretă pe coloana fixă doar când se face scroll, ca indiciu vizual că mai există conținut ascuns.
Uneori, clienții se plângeau că pe ecrane foarte mici e totuși greu de urmărit un rând cap-coadă. Așa că am trecut la o abordare hibridă.
3. Transformarea tabelului în carduri (Card Stack)
Când ecranul scade sub 640px, tabelul clasic moare. O tehnică excelentă pe care am aplicat-o implică rescrierea stilului tabelului prin CSS, transformând rândurile (tr) în carduri individuale.
Folosim display: block pentru elementele tabelului și generăm etichetele coloanelor din atribute data-* cu ajutorul pseudo-elementelor :before. Astfel, codul HTML rămâne curat, dar pe mobil userul vede o listă verticală de carduri ușor de citit.
Voi cum gestionați tabelele masive pe ecrane mici? Mergeți pe scroll orizontal cu coloane sticky sau preferați să ascundeți din date pe mobil?