Meniul, formularele și tabelele: ce se strică pe telefon la un site WordPress

Un tâmplar din Cluj-Napoca mi-a arătat luna trecută un mesaj primit pe Facebook: „Am încercat de trei ori să vă trimit cererea de pe telefon și nu merge butonul.” Site-ul lui arăta impecabil pe calculator. Pe telefon, butonul de trimitere stătea pe jumătate în afara ecranului, iar clientul nu avea de unde să știe asta. Google se uită deja la versiunea de pe telefon ca fiind site-ul tău, dar problema aici nu era una de căutări. Era una de comenzi pierdute, una câte una, fără ca nimeni să afle.

Cele mai multe teme WordPress moderne sunt responsive din construcție. Asta înseamnă că se aranjează singure pe ecrane mici, nu că funcționează bine acolo. Diferența se vede în patru locuri, întotdeauna aceleași.

Meniul care mănâncă jumătate de ecran

Antetul fixat sus, care rămâne vizibil la derulare, e un obicei preluat din machetele de calculator. Pe un ecran de 6 inci, un antet de 90 de pixeli plus o bară de anunțuri plus bannerul de consimțământ pentru module cookie lasă vizitatorului cam o treime din ecran pentru conținutul propriu-zis.

Verificarea e simplă. Deschizi pagina pe telefon, derulezi până la mijlocul unui articol și te uiți cât spațiu rămâne pentru text. Dacă e mai puțin de două treimi, antetul e prea gros. Soluția obișnuită nu e să scoți meniul, ci să îl subțiezi pe ecrane mici: logo mai mic, fără bară secundară, fără slogan.

Ce faci concret cu meniul

Meniul de tip hamburger rezolvă problema spațiului, dar creează alta dacă ascunde acolo șaisprezece linkuri într-o listă plată. Ține în meniul vizibil doar drumurile pe care merg oamenii: servicii, prețuri, contact. Restul intră în subsol. Un meniu mobil de care nimeni nu se folosește e la fel de inutil ca lipsa lui.

Formularul care cere prea mult

Pe calculator, un formular cu nouă câmpuri arată ca o coloană ordonată. Pe telefon, aceleași nouă câmpuri devin un traseu de derulare în care omul pierde firul, iar tastatura acoperă jumătate din ecran de fiecare dată când atinge un câmp.

Taie tot ce nu îți trebuie ca să răspunzi. Nume, o metodă de contact, o descriere scurtă. Adresa completă, codul poștal, numele firmei și „de unde ați aflat despre noi” le poți afla în conversație. Fiecare câmp scos e o cerere în plus care ajunge la tine.

Tabelele care ies din ecran

Un tabel de prețuri cu cinci coloane e firesc pe calculator. Pe telefon, WordPress nu îl restrânge singur: fie îl lățește peste marginea paginii, fie îl strivește până când cifrele se sparg pe trei rânduri. Rezultatul e o pagină care se mișcă lateral, iar derularea laterală neintenționată e cel mai clar semn că macheta nu a fost gândită pentru ecrane mici.

Soluția care nu strică nimic: pui tabelul într-un container cu derulare proprie pe orizontală. Pagina rămâne fixă, tabelul se plimbă în interiorul lui. Alternativa, mai bună când ai doar două sau trei coloane, e să transformi fiecare rând într-o cartelă separată pe ecrane sub 768 de pixeli.

Textul mic și butoanele pe care nu nimerești

Sub 16 pixeli, textul cere din partea cititorului efort de apropiere cu două degete. Multe teme setează 14 pixeli pentru corpul paginii, pentru că așa arată mai elegant în capturile de prezentare. Elegant pe captură, obositor pe telefon.

La butoane, referința practică e o zonă de atingere de minimum 44 pe 44 de pixeli. Sub această valoare, degetul atinge marginea și nu se întâmplă nimic, iar omul crede că site-ul e stricat. Mai sunt și linkurile din text lipite unul de altul: pe calculator le desparte cursorul, pe telefon nu le desparte nimic.

Punctele de rupere pe care le folosești

Trei praguri acoperă aproape tot parcul de dispozitive din România: 360 de pixeli pentru telefoanele mici, 768 pentru tablete în format vertical, 1024 pentru tablete în format orizontal și laptopuri mici. Nu ai nevoie de opt puncte de rupere. Ai nevoie ca la fiecare din cele trei să te uiți efectiv la pagină, nu doar să o redimensionezi în fereastra browserului.

Ce verifici în zece minute, fără instrumente

Ia telefonul tău și pe al unui coleg cu alt sistem de operare. Deschide pagina principală, o pagină de serviciu și formularul de contact. Trimite o cerere reală de pe telefon, până la capăt, inclusiv confirmarea. Apoi deschide un articol de blog și citește două paragrafe fără să apropii imaginea.

Ce vei găsi aproape sigur: bannerul de consimțământ care acoperă butonul principal, o fereastră de tip pop-up care se închide greu, o imagine care sare la încărcare și mută butonul de sub deget. Niciuna dintre astea nu apare într-un raport automat de viteză. Toate apar în primele zece minute de folosire reală.

Un ultim lucru care se uită des: dacă ai un număr de telefon pe site, verifică dacă e link apelabil. Pe multe site-uri de firmă numărul e scris ca text simplu, iar clientul trebuie să îl rețină și să îl tasteze. Sună mărunt până calculezi câți renunță pe drum.

Cum te poate ajuta Emblematic

Construim site-uri pornind de la ecranul mic și abia apoi le extindem pe calculator, pentru că acolo ajunge majoritatea vizitatorilor unei firme din România. Verificarea pe dispozitive reale face parte din livrare, nu e un serviciu separat, iar formularele le proiectăm după numărul de cereri pe care le aduc, nu după câte informații ar fi frumos să adune.

Dacă vrei să afli ce anume se strică pe telefon la site-ul tău actual, echipa Emblematic.ro este disponibilă pentru o consultație fără obligații. Contactează-ne și stabilim împreună pașii următori.