Dauguma lankytojų svetaines atsidaro telefonu, o Google pirmiausia indeksuoja mobiliąją versiją. Todėl mobilioji svetainės versija šiandien svarbesnė už kompiuterio.
Kas yra prisitaikantis dizainas?
Prisitaikantis (angl. responsive) dizainas – tai svetainės kūrimo metodas, kai svetainė automatiškai prisitaiko prie ekrano dydžio: telefono, planšetės ar kompiuterio. Visiems įrenginiams kuriama viena svetainė.
Kuo tai naudinga verslui
- Google SEO – Google pirmiausia vertina mobiliąją versiją
- Vartotojo patirtis – po blogos patirties telefone lankytojai retai grįžta
- Konversijos – patogi mobilioji svetainė surenka daugiau užklausų ir pardavimų
- Vienas kodas – nereikia kurti ir prižiūrėti atskirų versijų
- Nauji įrenginiai – sulenkiami telefonai ir kiti ekranų dydžiai palaikomi be papildomo darbo
Požiūris „pirmiausia telefonui“
Svetainė kuriama pradedant nuo mobiliosios versijos, o vėliau pritaikoma didesniems ekranams. Taip svarbiausia informacija ir funkcijos pasiekiamos ir mažiausiame ekrane.
Pagrindiniai prisitaikančio dizaino principai
- Lankstus tinklelis (grid) – elementai keičia dydį proporcingai ekranui
- Lankstūs paveikslėliai – prisitaiko prie konteinerio, neiškraipo turinio
- Medijos užklausos (media queries) – skirtingi stiliai skirtingiems ekrano dydžiams
- Patogūs liesti elementai – mygtukai bent 44x44 px, pakankami tarpai tarp elementų
- Skaitomas tekstas – bent 16 px šrifto dydis, kontrastinga spalvų schema
Kaip patikrinti savo svetainę
- Atidarykite svetainę telefone ir atlikite pagrindinius veiksmus
- Naudokite Chrome DevTools (F12 > Toggle device toolbar) simuliuoti įrenginius
- Google PageSpeed Insights (pagespeed.web.dev) – mobiliosios versijos greitis ir klaidos
- Paprašykite 3-5 žmonių atlikti užduotį telefone ir stebėkite, kur jie sustoja
Dažnos klaidos
- Per maži mygtukai – sunku paspausti pirštu
- Horizontalus slinkimas – turinys išeina už ekrano ribų
- Iššokantys langai, kurių telefone nepavyksta uždaryti
- Per smulkus tekstas – norint perskaityti, reikia priartinti
- Neveikianti navigacija – mobilusis meniu, kuris nereaguoja
Norite sužinoti, ar Jūsų svetainė tinkamai veikia mobiliuosiuose? Susisiekite dėl nemokamos konsultacijos.