Responsive nu înseamnă doar că site-ul încape pe telefon
Când spunem că un website este responsive, cea mai simplă explicație este că se adaptează la dimensiunea ecranului. Doar că formularea asta poate induce puțin în eroare. Un site poate încăpea perfect pe telefon, fără scroll orizontal și fără elemente care ies din pagină, și totuși să ofere o experiență foarte slabă.
Poate textul să fie prea mic. Poate butoanele să fie greu de apăsat. Poate o fotografie să ocupe aproape tot primul ecran, iar informația pentru care ai intrat să apară mult mai jos. Sau poate două coloane de pe desktop să fi fost puse pur și simplu una sub alta, fără să se mai verifice dacă ordinea lor are sens.
În astfel de cazuri, site-ul este responsive din punct de vedere tehnic, dar nu neapărat și din punct de vedere practic.
Un telefon nu este doar un monitor mai mic
Diferența dintre desktop și mobil nu se rezumă la numărul de pixeli disponibili.
Pe desktop folosești un mouse, ai mai mult spațiu și poți vedea mai multe informații simultan. Pe telefon folosești degetul, ai un ecran îngust și, de multe ori, interacționezi cu website-ul într-un context complet diferit.
Poate cauți o adresă în timp ce ești deja pe drum. Poate vrei să suni rapid un business. Poate verifici un preț sau completezi un formular cu o singură mână.
Dintr-o dată, un buton care părea suficient de mare pe desktop poate deveni incomod. Două linkuri apropiate pot fi greu de apăsat separat. Un meniu bazat pe hover își pierde complet logica pe touchscreen.
De aceea responsive design nu înseamnă doar să micșorezi ceea ce exista deja. Înseamnă să te gândești din nou la felul în care acea interfață va fi folosită.
Ordinea informației se poate schimba odată cu ecranul
Să presupunem că pe desktop ai o secțiune cu o imagine în stânga și text în dreapta, urmată de alta în care pozițiile sunt inversate. Vizual, alternanța poate funcționa foarte bine.
Pe telefon însă, cele două coloane trebuie transformate într-una singură.
Dacă procesul este făcut automat, poți ajunge cu imagine, text, imagine, text, chiar dacă într-una dintre secțiuni informația ar fi trebuit să apară înaintea fotografiei. După câteva astfel de blocuri, utilizatorul poate ajunge să deruleze mult prin conținut vizual înainte să găsească lucrurile importante.
Pagina nu este defectă. Nimic nu se suprapune.
Doar că logica de pe desktop nu a supraviețuit trecerii pe mobil.
Aici responsive design începe să devină mai mult o problemă de decizie decât una de CSS.
Imaginile nu se adaptează singure
O fotografie panoramică poate arăta foarte bine pe un monitor mare și complet nepotrivit pe un telefon.
Dacă este decupată agresiv, subiectul poate ieși din cadru. Dacă este păstrată integral, poate deveni atât de înaltă încât împinge tot conținutul important mult mai jos. Dacă are text integrat în imagine, acel text poate deveni aproape imposibil de citit.
Uneori este suficient să schimbi zona de focus. Alteori ai nevoie de o variantă diferită a imaginii pentru ecrane mici.
Mai există și problema dimensiunii fișierului. Nu are sens ca un telefon să descarce o imagine uriașă pregătită pentru un monitor mare dacă aceeași fotografie poate fi livrată într-o versiune mai potrivită.
Din exterior pare un detaliu mic. În practică, exact astfel de detalii fac diferența dintre un site care se adaptează și unul care doar se comprimă.
Breakpoint-urile nu sunt trei dimensiuni magice
În design vedem deseori trei versiuni ale unui website: desktop, tabletă și mobil. Este o reprezentare utilă, dar realitatea are mult mai multe dimensiuni între ele.
Există laptopuri mici, tablete folosite vertical sau orizontal, telefoane foarte înguste, telefoane foarte late și ferestre de browser care nu ocupă întregul monitor.
Un layout poate arăta impecabil la 1440 de pixeli și la 390 de pixeli și să înceapă să se rupă undeva la mijloc.
De aceea breakpoint-urile nu ar trebui alese doar după ideea că „aici începe tableta” și „aici începe telefonul”. Ele ar trebui introduse acolo unde designul chiar începe să nu mai funcționeze.
Uneori problema apare la o dimensiune la care nimeni nu s-a gândit să facă un mockup.
Un website trebuie testat, nu doar redimensionat
Browserul poate simula foarte bine diferite dimensiuni de ecran și este unul dintre cele mai utile instrumente în dezvoltare. Dar nu reproduce perfect felul în care site-ul este folosit pe un dispozitiv real.
Pe telefon apare tastatura. Bara browserului ocupă spațiu. Degetul nu are precizia unui mouse. Un element fixat în partea de jos poate ajunge prea aproape de controalele sistemului, iar un formular care părea perfect în simulare poate deveni incomod după ce tastatura acoperă jumătate din ecran.
De aceea testarea responsive înseamnă și să folosești efectiv website-ul.
Deschizi meniul, completezi formularul, apeși butoanele, folosești galeria și vezi dacă interfața continuă să se comporte natural.
Abia atunci începi să observi lucrurile pe care un simplu screenshot nu le arată.
Responsive design înseamnă adaptare, nu micșorare
Un website responsive nu trebuie să arate identic pe fiecare dispozitiv.
De fapt, uneori tocmai încercarea de a păstra totul identic este problema.
Pe anumite ecrane trebuie să schimbi ordinea, să reduci o imagine, să simplifici un element sau să modifici modul de interacțiune. Important este ca utilizatorul să poată face același lucru fără să simtă că folosește o variantă mai slabă a website-ului.
Partea ușoară este să faci site-ul să încapă pe telefon.
Partea mai dificilă este să îl faci să pară că a fost gândit pentru telefon încă de la început.
