Kaip pritaikyti svetainę mobiliosioms naršyklėms

Mobilieji įrenginiai – išmanieji telefonai ir planšetiniai kompiuteriai – sudaro daugiau nei pusę viso interneto srauto. Nepaisant to, 2014 m. BrightEdge atlikta apklausa parodė, kad daugiau kaip ketvirtadalis lankomų svetainių nėra pritaikytos mobiliesiems įrenginiams, todėl jų savininkai praranda vidutiniškai 68 % lankytojų.

Populiarios platformos

Po iPhone atsiradimo, tokios platformos kaip WordPress, Joomla ir Drupal pradėjo siūlyti mobilųjį dizainą. Pavyzdžiui, „Drupal“ jau iš anksto turi mobiliai pritaikytas temas. Šios temos automatiškai aktyvuojasi, kai svetainė aptinka, kad ją lankoma mobiliojoje naršyklėje. Kitų temų dizainas taip pat yra jautrus liesti – jos reaguoja į gestus taip pat, kaip ir į pelės spustelėjimus, nesukeldamos didelių išdėstymo pokyčių.

CSS ir HTML naudojimas

HTML svetainėse mobiliai pritaikytą išvaizdą galima valdyti per CSS – kaskadinį stilių lapą. Nors galima rašyti taisykles konkretiems įrenginiams, paprasčiau naudoti „media queries“, kurios nustato išdėstymą pagal ekrano pločio pikselius. Galite turėti atskirą stilių dideliems ekranams, planšetėms ir išmaniesiems telefonams. Pagrindinis privalumas – CSS kodą rašote vieną kartą, o kiekvienas puslapis tiesiog įkelia tą patį stilių.

Lietimui skirtos interaktyvios funkcijos

Jei svetainėje naudojate JavaScript arba HTML5, svarbu žinoti, kaip ji reaguos į lietimo įvykius – tiek mobiliose naršyklėse, tiek vis dažniau naudojamuose lietimui jautriuose staliniuose kompiuteriuose. Dažniausiai į kodą įtraukiamos lietimo įvykiai ir gestai. Pavyzdžiui, jQuery bibliotekoje „tap“ įvykis atitinka pelės spustelėjimą – jis įvyksta, kai vartotojas paliečia ekraną ir pakelia pirštą. Taip pat galite išjungti numatytas mobilios naršyklės funkcijas, tokias kaip pritraukimas (pinch‑to‑zoom) ar slinkimas, naudojant event.preventDefault() metodą.

Testavimas ir patikrinimas

Geriausias būdas patikrinti mobilųjį puslapį – naudoti tikrą mobilųjį įrenginį. Peržiūrėkite išvaizdą, patikrinkite navigaciją lietimu ir įsitikinkite, kad nuotraukos atrodo ryškiai. Taip pat galite naudoti naršyklės emuliatorių. „Google Chrome“ naršyklėje paspauskite F12, atsidarys kūrėjo įrankiai, spustelėkite „Settings“ (Nustatymai) ir pasirinkite „Emulation“ (Emuliavimas), kur galėsite imituoti įrenginius, pvz., Google Nexus ar Apple iPad.