Pe un ecran mare, trei oferte încap confortabil una lângă alta. Pe telefon, același tabel se poate transforma în cifre minuscule sau într-o bandă lungă ale cărei denumiri de coloane au dispărut. Lățimea este doar o parte a problemei: cititorii trebuie să țină minte ce compară. Începeți prin a întreba ce diferență trebuie să găsească, nu prin a micșora caracterele.
Definiți mai întâi sarcina
Imaginați-vă compararea a trei programe de formare. Diferențele utile ar putea fi formatul predării, durata și cunoștințele prealabile necesare. Plasați descrierea promoțională a fiecărui program în afara tabelului. O celulă cu condiții, excepții și biografia unui profesor nu mai este un punct de comparație concis. Separați faptele de explicații, dar nu ascundeți restricții care schimbă sensul unei oferte.
Păstrați legătura dintre etichete și valori
W3C recomandă marcarea antetelor și a celulelor de date cu elementele HTML potrivite. Relațiile mai complexe pot necesita atribute suplimentare. Simplul fapt de a scrie primul rând cu caractere aldine nu comunică această structură tehnologiei asistive. Dați tabelului un nume clar, precizați unitățile de măsură și reprezentați consecvent valorile necunoscute. O celulă goală nu trebuie să însemne, fără explicație, fie „gratuit”, fie „neinclus”.
Alegeți între derulare și carduri
Când cineva trebuie să compare o caracteristică între mai multe opțiuni, un tabel păstrat cu derulare orizontală poate funcționa mai bine decât un șir lung de carduri. Faceți zona derulabilă evidentă și testați accesul fără gesturi tactile. Dacă vizitatorii citesc de obicei fiecare ofertă separat, cardurile pot fi mai ușor de folosit. Repetați etichetele caracteristicilor în fiecare card, nu doar valorile. Este o alegere editorială, nu o regulă universală pentru orice tabel.
Nu faceți întreaga pagină să se comporte ca un tabel
Explicația W3C privind rearanjarea conținutului, Reflow, permite o excepție pentru informația care are nevoie de o dispunere bidimensională pentru a fi înțeleasă. Nu este o permisiune de a face întreaga pagină să se deruleze lateral. Textul introductiv, butoanele și secțiunile următoare trebuie să rămână confortabile pe un ecran îngust. Chiar și în tabel, împărțiți explicațiile lungi pe mai multe rânduri, în loc să le reduceți la caractere abia lizibile.
Testați decizia, nu doar imaginea
Pe un ecran îngust, găsiți o anumită diferență între două opțiuni. Apoi măriți nivelul de zoom, navigați comenzile disponibile cu tastatura și verificați cum sunt citite antetele cu tehnologia asistivă. După derulare, este clar cărei opțiuni îi aparține o cifră? Sunt faptele identice pe desktop și mobil? Dacă răspunsul cere memorarea mai multor ecrane, simplificați structura. O comparație bună economisește efort, nu doar spațiu.