Responsive dizajn ni dovolj – kaj še manjka?
Responsive dizajn imate, obisk raste, konverzije pa ne. Razlog je skoraj vedno hitrost, gumbi, slike ali obrazci na telefonu. Preberite, katere štiri stvari preverite na svoji spletni strani in katera od njih vam na mobilnem znižuje konverzijo.
Kategorije:
Responsive dizajn ima danes skoraj vsaka novejša spletna stran, vsaj na papirju.
Prilagaja se telefonu, tablici, prenosniku in širokemu monitorju, pa vseeno k nam redno pridejo marketingaši in lastniki podjetij z isto zgodbo: obisk raste, konverzija pa stagnira.
Ko stran pogledamo, razlog skoraj nikoli ni v tem, da ni odzivna. Razlog je v tem, česar responsive dizajn sam po sebi nikoli ne reši.
Zbrali smo štiri stvari, ki jih odzivna postavitev najpogosteje pozabi, in predlagali učinkovite rešitve.
Responsive dizajn še ne pomeni, da je spletna stran hitra
Stran se lahko na telefonu postavi popolnoma pravilno in kljub temu grozljivo počasi nalaga.
To je prva in najdražja težava, ki je responsive dizajn sam po sebi ne reši, marsikdo pa misli, da je s tem že opravil domačo nalogo.
Po podatkih o deležu mobilnega spletnega prometa mobilne naprave danes generirajo skoraj 63 % vsega prometa na spletu, torej hitrost nalaganja na telefonu ni dodatek, ampak pogoj, da stran sploh deluje.
Google mobilno različico strani uporablja tudi za mobilno indeksiranje, zato počasna stran izgublja tako uporabnike kot pozicije v iskalniku.
Hitrost meri prek Core Web Vitals, natančneje prek metrike INP (Interaction to Next Paint). Googlova dokumentacija metrike INP kot dober rezultat opredeljuje vrednost pod 200 milisekund.
Odzivna postavitev tega ne popravi sama. Hitrost popravite z lažjimi slikami in manj blokirajočim JavaScriptom.
Preverite svoj rezultat v PageSpeed Insights, ne le v Googlovem testu za mobilne naprave, ki pove samo, ali je postavitev v redu, ne pa, kako hitro se stran naloži v praksi.
Gumbi, ki jih na telefonu težko zadanete
Gumb, ki je na monitorju videti ravno pravšnje velikosti, je na telefonu pogosto premajhen za klik s prstom. Na pogled majhen detajl, ki pa prinese ogromno razliko v konverzijah.
To ni kozmetična podrobnost, ampak UX (uporabniška izkušnja): ali bo uporabnik uspešno dokončal nakup ali povpraševanje, ali pa bo vmes odnehal.
WCAG 2.2 smernica za velikost tipk zahteva vsaj 24 x 24 px na dotik, praksa pa gre še dlje: Google in Apple za mobilne gumbe priporočata okoli 44 do 48 px, torej precej več, kot marsikatera privzeta WordPress ali Shopify predloga sploh ponudi.
V CSS-ju vsem klikljivim elementom na strani nastavite min-height in min-width na vsaj 44 px, med sosednjimi elementi pa pustite najmanj 8 px praznega prostora.
Če sta ‘Naroči’ in ‘Prekliči’ prilepljena drug ob drugem, bo prej ali slej nekdo pomotoma kliknil napačnega, ravno na napravi, kjer je popravljanje take napake najbolj nadležno.
Slike, ki se prilagodijo velikosti, ne pa teži
Slika se na telefonu lepo skrči, v ozadju pa brskalnik vseeno prenese isto, težko datoteko kot na namiznem računalniku.
Fotografija v ločljivosti za velik monitor lahko tehta tudi desetkrat več, kot bi jo telefon sploh potreboval.
Rešitev je tehnično stara skoraj toliko kot sam responsive dizajn: atributa srcset in sizes brskalniku povesta, katero različico slike naj naloži glede na napravo.
Težava je, da to podpira veliko predlog in vtičnikov, nihče pa tega ne preveri ali vklopi.
Preverite sami: odprite stran v Chrome DevTools in vklopite mobilno simulacijo. V zavihku ‘Network’ poglejte, kolikšna je velikost naložene slike.
Če je datoteka večja od 200 kilobajtov za sliko, ki na telefonu zavzame četrtino zaslona, je čas, da v CMSju ali temi preverite nastavitve za responsive slike.
Če razmišljate o prenovi ali izdelavi nove spletne strani, je to ena prvih stvari, ki jih pri nas preverimo, še preden se sploh lotimo dizajna.
Mobilni obrazec ni pomanjšan namizni obrazec
Obrazec, ki ima na vsaki strani 20 pik notranjega razmika, na monitorju deluje čisto normalno, na zaslonu širine 320 pik pa s tem izgubite osmino prostora.
Dodajte rob okoli polj in delež izgubljenega prostora hitro naraste na četrtino zaslona.
Sliši se kot malenkost, dokler ne vidite, koliko ljudi obrazec zapusti prav na tej točki.
Poleg razmika je pomembno tudi, kateri tip tipkovnice se odpre:
- polje za e-pošto naj ponudi tipkovnico z znakom @,
- polje za telefonsko številko pa numerično.
Droben detajl, ki na telefonu odloči, ali bo uporabnik obrazec izpolnil v petnajstih sekundah ali ga bo po tretjem tipkanju zaprl.
Priporočamo, da si preberete še blog zapis: ‘Odzivna spletna stran: 5 tipičnih spodrsljajev’
Kako nadaljevati, ko responsive dizajn že imate
Odzivna stran je dober začetek, ne pa konec zgodbe.
Marsikje prav te majhne razlike odločajo, ali bo vaša stran prodajala ali zgolj obstajala.
Če želite vedeti, kje vaša stran izgublja konverzijo, rezervirajte brezplačni klic z našimi strokovnjaki, ki vam lahko prihrani mesece napačnih odločitev.
