Ar kada susimąstėte, kiek laiko per dieną praleidžiate naršydami telefone? Prisipažinsiu, aš tai tikrai daug! Ir matyt ne tik aš. Šiandien beveik kiekvienas iš mūsų neįsivaizduoja gyvenimo be išmaniojo telefono ar planšetės. Naudojame juos darbui, pramogoms, bendravimui ar informacijos paieškai. Ir tai, draugai, yra tikra mobili revoliucija, kuri iš esmės pakeitė mūsų požiūrį į interneto svetaines ir kaip mes jomis naudojamės.
Skaičiai nemeluoja – gyvename mobiliųjų telefonų eroje
Pirmiausia, pagalvokite apie patogumą. Juk telefonas visada su mumis, ar ne? Galime patikrinti naujienas stovėdami eilėje, perskaityti straipsnį keliaudami viešuoju transportu, kažką „palaikinti“, kažką „papostinti“ arba greitai rasti reikiamą informaciją kavos pertraukėlės metu. Nebeliko būtinybės ieškoti atskiro stalo su kompiuteriu, nes viskas tapo pasiekiama vienu piršto prisilietimu.
Štai keletas skaičių, kurie tikrai privers jus susimąstyti:
- 2023 metais pasaulyje buvo beveik 7 milijardai išmaniųjų telefonų naudotojų. Prognozuojama, kad iki 2027 metų šis skaičius išaugs iki 7,7 milijardo! (Šaltinis: Statista)
- Kaimyninėje Lenkijoje, 2022 metų duomenimis, 78,1% namų ūkių turėjo išmanųjį telefoną, o 62,5% – planšetę (Šaltinis: GUS). Lietuvoje situacija bus tikrai panaši.
- 2023 metais net 59,4% viso pasaulio interneto srauto atėjo iš mobiliųjų įrenginių (Šaltinis: DataReportal). Tai reiškia, kad daugiau nei pusė visų naršančiųjų internete naudojasi telefonais!
Taigi, skaičiai aiškiai rodo, kad mobiliųjų įrenginių svarba yra tiesiog milžiniška, todėl svetainės pritaikymas jiems, nėra tik „nice to have“ funkcija. Iš esmės, tai yra kritiškai svarbus veiksnys jūsų verslo sėkmei internete. Jeigu jūsų svetainė veikia lėtai ir yra nepatogi naudoti telefone – galite būti tikri, kad klientus tikrai prarasite. Beja, ne tik prarasite, bet ir nukreipsite juos tiesiai pas savo konkurentus.
Taigi, manau sutarėme, kad svetainės pritaikymas kiekvienam ekrano dydžiui jau tapo būtinybe.
Kas yra prisitaikantis (responsive) dizainas ir kodėl jis būtinas?
Turbūt esate girdėję terminą „Responsive Web Design“, arba lietuviškai – prisitaikantis web dizainas. Paprastai tariant, tai toks interneto svetainių kūrimo būdas, kuris užtikrina, kad kiekvienas svetainės puslapis atrodys ir veiks puikiai bet kuriame įrenginyje, nepriklausomai nuo jo ekrano dydžio. Nesvarbu, ar tai didelis kompiuterio monitorius, planšetė ar mažas telefono ekranas – svetaine visada bus patogu naudotis.
Beja, šią idėją dar 2010 metais pristatė Ethan Marcotte ir nuo tada prisitaikantis web dizainas iš esmės pakeitė tai, kaip mes kuriame interneto svetaines.
Kodėl prisitaikantis web dizainas yra svarbu?
Įsivaizduokite, kad bandote naršyti svetainėje, kuri nėra pritaikyta mobiliesiems. Tenka nuolat priartinti ar atitolinti ekrano vaizdą, slinkti į šonus, o mygtukai tokie maži, kad net sunku juos paspausti. Erzina ir nepatogu, tiesa? Didelė tikimybė, kad po šios patirties, jūs pakliūtumėte tarp 61% vartotojų, kurie, pasak „Google“, greičiausiai nebegrįžtų į tokią svetainę. Na, ir truputį mažesnė tikimybė, kad pakliūtumėte tarp 40% vartotojų, kurie iš karto po to, aplankytų konkurentų svetainę.
Būtent todėl prisitaikantis web dizainas yra kritiškai svarbus bet kokiam verslui, norinčiam sėkmingai veikti internete. Jis užtikrina, kad jūsų lankytojai visada turėtų gerą patirtį, nesvarbu, kokį įrenginį jie naudoja. O gera lankytojo patirtis = laimingas klientas!
Kodėl jūsų svetainei reikalingas prisitaikantis dizainas?
Šiuolaikiniame skaitmeniniame pasaulyje prisitaikantis svetainės dizainas yra būtinybė. Jei norite, kad jūsų veikla internete būtų sėkminga, jūsų svetainė privalo atrodyti puikiai visuose įrenginiuose. Juk prisitaikantis dizainas turi daugybę privalumų, kurie tiesiogiai veikia jūsų verslo matomumą ir patrauklumą internete.
Geresnė vartotojo patirtis
Prisitaikantis dizainas užtikrins nuoseklią ir patogią vartotojo patirtį, nepriklausomai nuo to, ar naršoma kompiuteriu, planšete ar išmaniuoju telefonu:
- Žymiai lengviau naršyti: svetainės meniu ir mygtukai prisitaiko prie ekrano dydžio, todėl jos valdymas tampa intuityvesnis ir paprastesnis.
- Patogus turinio vartymas: tekstas ir paveikslėliai automatiškai prisitaiko prie ekrano, todėl visiškai nereikia vargti didinant ar mažinant vaizdą.
- Greitesnis krovimas: pritaikant svetainę mobiliesiems įrenginiams, taip pat padidinamas jos krovimosi greitis.
Geresnės „Google“ pozicijos
„Google“ labai myli mobiliems įrenginiams optimizuotas svetaines, todėl prisitaikantis dizainas tiesiogiai įtakoja jūsų pozicijas paieškoje:
- „Mobile-first“ indeksavimas: „Google“ naudoja mobiliąją puslapio versiją indeksavimui ir reitingavimui. Tai reiškia, kad jei jūsų svetainė nėra pritaikyta mobiliesiems, jos pozicijos paieškos rezultatuose gali smarkiai nukentėti.
- Mažesnis atmetimo rodiklis: geresnė vartotojo patirtis reiškia, kad lankytojai ilgiau užsibūna jūsų svetainėje. Tai yra teigiamas signalas „Google“, kuris rodo, kad jūsų verslo svetainės turinys yra vertingas.
Pagrindiniai prisitaikančio dizaino elementai
Prisitaikantis dizainas nėra kažkokia stebuklinga magija, o tik tam tikrų taisyklių ir technikų visuma. Iš esmės, jis remiasi trimis pagrindiniais elementais, kurie leidžia svetainei lanksčiai prisitaikyti prie bet kurio ekrano:
Lankstus tinklelis (Fluid Grid)
Pamirškite fiksuotus blokų plotus! Prisitaikančiame web dizaine blokų pločiai yra nurodomi ne pikseliais, o procentais. Tai leidžia jiems sklandžiai prisitaikyti prie bet kokio ekrano dydžio. Įsivaizduokite, kad jūsų svetainės turinys yra tarsi guma – tam, kad užpildytų įrenginio ekraną, jis gali tiek išsitempti, tiek ir susitraukti.
- Pločiai procentais: tai leidžia bloko elementams proporcingai keistis pagal ekrano dydį.
- Lanksčios paraštės ir tarpai: dažnai jie apibrėžiami em arba rem vienetais, kurie prisitaiko prie teksto dydžio ir padeda išlaikyti proporcijas bei estetiką.
- CSS Flexbox arba Grid: modernios turinio išdėstymo technikos, stipriai palengvinančios prisitaikančių svetainės blokų kūrimą.
Štai kaip gali atrodyti nesudėtingas CSS kodas, skirtas prisitaikančių svetainės turinio blokų išdėstymui:
.container {
width: 90%; /* Konteineris užims 90% ekrano pločio */
max-width: 1200px; /* Bet ne daugiau nei 1200 pikselių */
margin: 0 auto; /* Centravimas */
display: flexbox; /* Elementai išsidėstys vienas šalia kito */
}
.column {
width: 48%; /* Stulpelis užims beveik pusę konteinerio pločio */
margin: 1%; /* Šoniniai tarpai */
}Prisitaikantys vizualai
Nuotraukų, paveikslėlių, vaizdo įrašų bei kitų vizualų pritaikymas skirtingų dydžių įrenginiams, dažnai yra viena kėbliausių ir daugiausiai laiko užimančių užduočių. Tačiau sprendimų yra ir čia.
- srcset atributas: tai tikras išsigelbėjimas rašant HTML kodą, nes jis leidžia nurodyti skirtingus paveikslėlių dydžius, skirtingiems ekrano pločiams. Tuomet, interneto naršyklė jau pati parenka patį tinkamiausią paveikslėlį.
- CSS paveikslėliai: fono paveikslėliams galime naudoti background-size: cover arba contain CSS savybes, kurios leidžia nustatyti, kaip foninis paveikslėlis turėtų prisitaikyti prie elemento dydžio ir išlaikyti proporcijas.
Štai pavyzdys, kaip gali atrodyti HTML kodas prisitaikančiam paveikslėliui:
<img srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1100px"
src="paveikslėlis.jpg"
alt="Prisitaikantis paveikslėlis"
>Media Queries
Media Queries – tai yra galinga CSS technika, kuri leidžia pritaikyti svetainės stilius, priklausomai nuo įrenginio savybių. Pavyzdžiui, galite nustatyti, kad telefono ekrane tekstas būtų didesnis, o mygtukai platesni.
- Lūžio taškai (Breakpoints): tai yra tam tikri ekrano pločio taškai, kuriuose puslapio išdėstymas keičiasi. Pavyzdžiui, galite turėti vieną išdėstymą telefonams, kitą – planšetėms, ir trečią – dideliems monitoriams.
- Įrenginio orientacija: medijos užklausos leidžia pritaikyti stilius ir pagal įrenginio orientaciją – gulsčią (angl. landscape) arba stačią (angl. portrait).
Štai paprastas pavyzdys, kaip gali būti naudojamos medijos užklausos:
/* Pagrindinis stilius */
.column {
width: 100%; /* Pagal nutylėjimą stulpelis užima visą plotį */
}
/* Ekrano plotis platesnis nei 768px (pvz., planšetės) */
@media screen and (min-width: 768px) {
.column {
width: 50%; /* Stulpelis užims 50% pločio, kad tilptų du stulpeliai */
}
}
/* Ekrano plotis platesnis nei 1200px (pvz., staliniai kompiuteriai) */
@media screen and (min-width: 1200px) {
.column {
width: 33.33%; /* Stulpelis užims apie trečdalį pločio, kad tilptų trys stulpeliai *
}
}Dažniausios klaidos kuriant prisitaikantį dizainą ir kaip jų išvengti
Kuriant ir testuojant prisitaikantį svetainės dizainą, taip pat galima padaryti ir keletą klaidų. Bet nesijaudinkite, juk būtent iš klaidų mes ir mokomės, tiesa? Štai dažniausiai pasitaikančios problemos su prisitaikančiu svetainės dizainu ir patarimai, kaip jų išvengti.
Kuomet tikrinate, kaip atrodo jūsų svetainė skirtinguose įrenginiuose, pasistenkite atkreipti dėmesį į šiuos dalykus:
- Persidengiantys elementai: ar kartais jūsų teksto blokai neužlipa ant paveikslėlių? Ar mygtukai neužstoja vienas kito? Persidengiantys interaktyvūs elementai sukelia laaabai daug nepatogumų vartotojui.
- Per mažas tekstas: pabandykite paskaityti tekstą mažame telefono ekrane. Ar viską matote be vargo? Ar kartais nereikia priartinti vaizdo, kad viską įskaitytumėte? Tekstas telefone turi būti skaitomas lengvai ir nevarginti akių.
- Neveikianti lietimo sąveika: išbandykite visus mygtukus ir kitus interaktyvius svetainės elementus. Ar jie pakankamai dideli ir patogūs? Ar juos lengva paspausti? Jutikliniai elementai turi būti pritaikyti pirštams.
- Horizontalus slinkimas: ar kartais netenka slinkti puslapį į šoną, kad pamatytumėte visą jo turinį? Šito dalyko reikėtų vengti bet kokia kaina! Svetainė turėtų prisitaikyti prie ekrano pločio, kad nereikėtų jos slinkti horizontaliai.
- Per didelio dydžio paveikslėliai: ar paveikslėliai telefone kraunasi ilgai ir lėtina svetainės veikimą? Įsitikinkite, kad jie yra tinkamai optimizuoti ir pritaikyti pagal dydį. Juk telefonui visiškai nereikia 2000 pikselių pločio nuotraukų!
- Netinkami lūžio taškai: ar jūsų svetainės dizainas sklandžiai keičiasi pereinant nuo vieno ekrano dydžio prie kito? Patikrinkite, ar pasirinkti lūžio taškai (angl. breakpoints) tinka dažniausiai naudojamiems ekrano dydžiams.
Prisitaikančio dizaino dabartis ir ateitis
Netyčiom prisiminiau, kaip anksčiau kurdavau interneto svetaines – nereikėjo sukti galvos, ar tinklapis atrodys gerai telefone ar planšetėje. Žinoma, buvo kitų „galvos skausmų“, pavyzdžiui, atskirus stilius tekdavo rašyti vos ne kiekvienai naršyklei, o apie svetainės pritaikymą IE net nekalbu! Bet tie laikai jau seniai praėjo, ar ne? Dabar prisitaikantis dizainas tapo neabejotinu interneto dizaino standartu. Jis nuolat tobulėja, prisitaiko prie naujų technologijų ir kintančių vartotojų lūkesčių.
Skaičiai nemeluoja: net 75% vartotojų apie įmonės patikimumą sprendžia remdamiesi jos svetainės dizainu (Šaltinis: Stanford). Tai reiškia, kad jūsų interneto puslapis turi būti ne tik prisitaikantis prie visų įrenginių, bet ir estetiškas bei profesionalus.
Neleiskite savo verslui prarasti potencialių klientų dėl netvarkingos svetainės – susisiekite su AmberPixel studija šiandien!