Pasaulē tiek izmantotas miljoniem ierīču, sākot no planšetdatoriem līdz tālruņiem un beidzot ar lieliem galddatoriem. Ierīces lietotāji vēlas, lai jebkurā no šīm ierīcēm vienmērīgi varētu skatīt tās pašas vietnes. Atsaucīgs mājas lapas dizains ir pieeja, ko izmanto, lai nodrošinātu, ka vietnes var apskatīt visos ekrāna izmēros, neatkarīgi no ierīces.
Kas ir atsaucīgs vietnes dizains?
Atsaucīgs web dizains ir metode, kas ļauj vietnes saturam un vispārējam dizainam pārvietoties un mainīties, pamatojoties uz ierīci, kuru izmantojat tā apskatei. Citiem vārdiem sakot, atsaucīga vietne reaģē uz ierīci un atbilstoši to padara vietni.
Piemēram, ja jūs tūlīt mainīsit šī loga lielumu, Lifewire vietne tiks pārvietota un mainīta, lai tā atbilstu jaunajam loga izmēram. Atverot vietni savā mobilajā ierīcē, pamanīsit, ka mūsu satura lielums tiek mainīts vienā kolonnā, lai tas atbilstu jūsu ierīcei.
Īsa vēsture
Lai gan citi termini, piemēram, plūstošs un elastīgs, tika izmesti jau 2004. gadā, atsaucīgs tīmekļa dizains pirmo reizi tika izveidots un ieviests 2010. gadā Ītans Marcotte. Viņš uzskatīja, ka tīmekļa vietnes ir jāveido tā, lai "lietu bēgums un plūsma" būtu pretstatā statiskai saglabāšanai.
Pēc viņa publicētā raksta ar nosaukumu "Atsaucīgs tīmekļa dizains", šis vārds sāka darboties un sāka iedvesmot tīmekļa izstrādātājus visā pasaulē.
Kā darbojas atsaucīga vietne?
Reaģējošās vietnes ir veidotas, lai pielāgotos un mainītu izmērus noteiktos izmēros, kas pazīstami arī kā pārtraukuma punkti. Šie pārtraukuma punkti ir pārlūkprogrammas platumi, kuriem ir noteikts CSS multivides vaicājums kas maina pārlūka izkārtojumu, kad tas atrodas noteiktā diapazonā.
Lielākajai daļai vietņu būs divi standarta pārtraukuma punkti gan mobilajām ierīcēm, gan planšetdatoriem.
Vienkāršāk sakot, mainot pārlūkprogrammas platumu neatkarīgi no tā, vai maināt pārlūkprogrammas lielumu vai skatāt to mobilajā ierīcē, aizmugurē esošais kods reaģē un izkārtojumu maina automātiski.
Kāpēc atsaucīgam dizainam ir nozīme?
Pateicoties elastībai, atsaucīgs tīmekļa dizains tagad ir zelta standarts, kad runa ir par jebkuru vietni. Bet kāpēc tam ir tik liela nozīme?
- Pieredze uz vietas: Adaptīvs tīmekļa dizains nodrošina vietnēm nevainojamu un kvalitatīvu pieredzi uz vietas jebkuram interneta lietotājam neatkarīgi no ierīces, kuru viņi izmanto.
- Satura fokuss: Mobilo ierīču lietotājiem adaptīvs dizains nodrošina, ka vispirms viņi redz tikai vissvarīgāko saturu un informāciju, nevis tikai nelielu fragmentu izmēru ierobežojumu dēļ.
- Google apstiprināts: Adaptīvs dizains atvieglo Google indeksēšanas rekvizītu piešķiršanu lapai, tā vietā, lai indeksētu vairākas atsevišķas lapas atsevišķām ierīcēm. Tas, protams, uzlabo jūsu meklētājprogrammu rangu, jo Google smaida vietnēm, kuras vispirms ir mobilās.
- Produktivitātes taupīšana: Agrāk izstrādātājiem bija jāizveido pilnīgi atšķirīgas vietnes galddatoriem un mobilajām ierīcēm. Tagad atsaucīgs tīmekļa dizains ļauj atjaunināt saturu vienā vietnē salīdzinājumā ar daudziem, ietaupot kritisko laika daudzumu.
- Labāki reklāmguvumu līmeņi: Uzņēmumiem, kas cenšas sasniegt savu auditoriju tiešsaistē, ir pierādīts, ka adaptīvs tīmekļa dizains palielina reklāmguvumu līmeni, palīdzot tiem attīstīt uzņēmējdarbību.
- Paaugstināts lapas ātrums: Tas, cik ātri vietne tiek ielādēta, tieši ietekmēs lietotāju pieredzi un meklētājprogrammu rangu. Reaģējošais tīmekļa dizains nodrošina lapu vienādu ātru ielādi visās ierīcēs, pozitīvi ietekmējot rangu un pieredzi.
Reaģējošs dizains reālajā pasaulē
Kā reaģējošs dizains ietekmē interneta lietotājus reālajā pasaulē? Apsveriet aktu, kas mums visiem ir pazīstams: iepirkšanās tiešsaistē.
Lietotājs var sākt savu produktu meklēšanu darbvirsmā pusdienu pārtraukuma laikā. Atraduši produktu, ko viņi domā iegādāties, viņi to pievieno grozam un ķeras pie darba.
Lielākā daļa lietotāju dod priekšroku lasīt atsauksmes pirms pirkuma veikšanas. Tātad lietotājs vēlreiz apmeklē vietni, šoreiz mājās planšetdatorā, lai izlasītu produkta atsauksmes. Pēc tam viņiem atkal jāpamet vietne, lai turpinātu savu vakaru.
Pirms viņi naktī izslēdz gaismu, viņi paņem savu mobilo ierīci un vēlreiz apmeklē vietni. Šoreiz viņi ir gatavi veikt savu pēdējo pirkumu.
Atsaucīgs tīmekļa dizains nodrošina, ka lietotājs var meklēt produktus darbvirsmā, lasīt atsauksmes planšetdatorā un nevainojami veikt galīgo pirkumu, izmantojot mobilo.
Citi reālās pasaules scenāriji
Iepirkšanās tiešsaistē ir tikai viens no scenārijiem, kurā atsaucīgs dizains ir izšķirošs tiešsaistes pieredzei. Citi reālās situācijas scenāriji ietver:
- Ceļojumu plānošana
- Meklējat jaunu mājokli iegādei
- Ģimenes brīvdienu ideju izpēte
- Recepšu meklēšana
- Uzziniet par jaunumiem vai sociālajiem tīkliem
Katrs no šiem scenārijiem, visticamāk, laika gaitā aptvers plašu ierīču klāstu. Tas uzsver, cik svarīgi ir izveidot atsaucīgu vietnes dizainu.