/* Exemplu de tabel care devine card pe ecrane mici */
@media (max-width: 768px) {
.responsive-table thead {
display: none; /* Ascundem header-ul clasic */
}
.responsive-table tr {
display: block;
margin-bottom: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
}
.responsive-table td {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px dashed #eee;
}
.responsive-table td::before {
content: attr(data-label);
font-weight: bold;
color: #666;
}
}De la monitor de 27 inch la ecran de telefon
Acum vreo doi ani, lucram la un CRM intern pentru o firmă de logistică. Pe desktop arăta impecabil: grafice peste tot, un sidebar generos cu 15 link-uri și un tabel imens cu 12 coloane. Toată lumea a fost fericită până când managerul de depozit a încercat să valideze o recepție de pe un iPhone 12 în timp ce mergea printre rafturi. Rezultatul? Un dezastru. Sidebar-ul acoperea jumătate din ecran, iar tabelul necesita un scroll orizontal infinit.
Dashboard-urile sunt, prin definiție, medii cu densitate mare de informație. Problema e că, spre deosebire de un blog sau un site de prezentare, aici utilizatorul chiar are nevoie de acele date pentru a lua decizii. Nu poți pur și simplu să dai display: none la jumătate din elemente.
Sidebar-ul: Mai mult decât un simplu toggle
Prima greșeală pe care o văd des e sidebar-ul care doar se ascunde în spatele unui hamburger menu. Pe un dashboard, sidebar-ul e „busola” utilizatorului. Pe rezoluții intermediare (tablete, laptopuri mici), o soluție mult mai elegantă este sidebar-ul colapsabil care păstrează doar iconițele (slim sidebar).
Pe proiectul curent, folosim un sistem de stări: expanded, collapsed și mobile-overlay. Pe mobil, sidebar-ul devine un overlay complet cu un backdrop blurat. Important: nu uita să adaugi un transition: width 0.3s ease pe desktop pentru a nu zdruncina layout-ul principal când utilizatorul dă click pe toggle. Dacă folosești Flexbox pentru containerul principal, un sidebar cu lățime fixă și un main cu flex-grow: 1 rezolvă majoritatea problemelor de aliniere.
Tabelele: Inamicul public numărul unu
Tabelele sunt coșmarul oricărui developer de frontend când vine vorba de responsive. Cea mai simplă metodă, dar și cea mai „leneșă”, este să pui un overflow-x: auto pe containerul tabelului. E funcțional, dar UX-ul e execrabil. Utilizatorul pierde contextul primelor coloane (de obicei ID-ul sau Numele) pe măsură ce dă scroll.
O tactică mai bună pe care am aplicat-o recent este „Column Pinning”. Prima coloană rămâne position: sticky; left: 0;, în timp ce restul tabelului culisează sub ea. Dar dacă ai un tabel cu 10+ coloane, nici asta nu ajută pe un ecran de 360px. Aici intervine transformarea tabelului în carduri. Folosind Media Queries, forțăm elementele <thead> să dispară și transformăm fiecare <tr> într-un card de sine stătător, unde fiecare <td> devine un rând de tip label-valoare folosind pseudo-elementul :before.
Cards Stack și Container Queries
În 2024, nu mai avem nicio scuză să nu folosim Container Queries. De multe ori, un widget din dashboard (un grafic mic sau un sumar de vânzări) trebuie să se comporte diferit în funcție de lățimea containerului său, nu a întregului viewport.
Dacă pui un widget într-un grid care se schimbă de la 3 coloane la 1 coloană, widget-ul respectiv ar trebui să știe să își rearanjeze conținutul intern. Folosind @container (min-width: 400px), poți trece de la un layout vertical la unul orizontal fără să îți pese unde e plasat widget-ul în pagină. Este mult mai modular decât vechiul mod de a gândi totul global.
Trade-off-uri și performanță
Nu încerca să faci totul să arate „perfect” pe orice rezoluție. Un dashboard pe mobil este pentru acțiuni rapide: o aprobare, o vizualizare rapidă de status, un comentariu. Nimeni nu va face analiză de date complexă și Pivot Tables pe un telefon în metrou. Concentrează-te pe ierarhia informației. Pe mobil, pune butoanele de acțiune (Edit, Delete, Approve) la îndemâna degetului mare (bottom of the card), nu ascunse într-un tooltip de tip hover, care oricum nu funcționează pe touch.