Kas ir adaptīvs tīmekļa dizains?

Izpratne par elastīgu vietņu izstrādi

Satura rādītājsIzvērst

Visā pasaulē tiek izmantotas miljoniem ierīču, sākot no planšetdatoriem līdz tālruņiem un beidzot ar lieliem galddatoriem. Ierīču lietotāji vēlas netraucēti skatīt vienas un tās pašas vietnes jebkurā no šīm ierīcēm. Responsīvs mājas lapas dizains ir pieeja, ko izmanto, lai nodrošinātu, ka vietnes var skatīt visos ekrānos 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 atkarībā no ierīces, kuru izmantojat tās skatīšanai. Citiem vārdiem sakot, atsaucīga vietne reaģē ierīcei un attiecīgi renderē vietni.

Piemēram, ja šobrīd maināt šī loga izmēru, Lifewire vietne pārvietosies un mainīsies, lai tā atbilstu jaunajam loga izmēram. Ja atverat vietni savā mobilajā ierīcē, pamanīsit, ka mūsu satura lielums tiks mainīts uz vienu kolonnu, lai tas atbilstu jūsu ierīcei.



Īsa vēsture

Lai gan citi termini, piemēram, plūstošs un elastīgs, tika izplatīti jau 2004. gadā, adaptīvo tīmekļa dizainu pirmo reizi izdomāja un 2010. gadā ieviesa Ītans Markots. Viņš uzskatīja, ka tīmekļa vietnēm ir jābūt veidotām tā, lai tās būtu “vēsmas un plūdmaiņas”, nevis paliek nemainīgas.

Pēc viņa raksta publicēšanas ar nosaukumu ' Adaptīvs tīmekļa dizains ', termins pacēlās un sāka iedvesmot tīmekļa izstrādātājus visā pasaulē.



Kā darbojas atsaucīga vietne?

Adaptīvās vietnes ir izveidotas, 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ūkprogrammas izkārtojumu, kad tā 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.

Divas sievietes skatās vietni klēpjdatorā un lielā ekrānā

Maskot/Getty Images

Vienkārši sakot, mainot pārlūkprogrammas platumu, mainot tās izmērus vai skatot to mobilajā ierīcē, aizmugurē esošais kods reaģē un automātiski maina izkārtojumu.



Kāpēc atsaucīgam dizainam ir nozīme?

Sieviete, kas tur viedtālruni un skatās tīmekļa dizaina idejas uz tāfeles

Westend61/Getty Images

Pateicoties elastīgumam, adaptīvs tīmekļa dizains tagad ir zelta standarts jebkurai vietnei. Bet kāpēc tam ir tik liela nozīme?



    Pieredze uz vietas: Adaptīvs tīmekļa dizains nodrošina, ka vietnes piedāvā vienmērīgu un kvalitatīvu pieredzi uz vietas jebkuram interneta lietotājam neatkarīgi no izmantotās ierīces.Satura fokuss: mobilo ierīču lietotājiem adaptīvais dizains nodrošina, ka viņi vispirms redz tikai vissvarīgāko saturu un informāciju, nevis tikai nelielu fragmentu izmēra ierobežojumu dēļ.Google apstiprināts: adaptīvais dizains ļauj Google vieglāk piešķirt lapai indeksēšanas rekvizītus, nevis indeksēt vairākas atsevišķas lapas atsevišķām ierīcēm. Tas, protams, uzlabo jūsu meklētājprogrammas rangu, jo Google uzsmaida vietnēm, kas galvenokārt ir paredzētas mobilajām ierīcēm.Produktivitātes taupītājs: Agrāk izstrādātājiem bija jāizveido pilnīgi atšķirīgas vietnes galddatoriem un mobilajām ierīcēm. Tagad adaptīvais tīmekļa dizains ļauj atjaunināt saturu vienā vietnē salīdzinājumā ar daudzām vietnēm, ietaupot kritiski daudz laika.Labāki reklāmguvumu rādītāji: ir pierādīts, ka uzņēmumiem, kas cenšas sasniegt savu auditoriju tiešsaistē, adaptīvs tīmekļa dizains palielina reklāmguvumu līmeni, palīdzot attīstīt uzņēmējdarbību.Uzlabots lapas ātrums: vietnes ielādes ātrums tieši ietekmēs lietotāja pieredzi un meklētājprogrammas rangu. Adaptīvs tīmekļa dizains nodrošina, ka lapas tiek ielādētas vienādi ātri visās ierīcēs, pozitīvi ietekmējot rangu un pieredzi.

Atsaucīgs dizains reālajā pasaulē

Kā responsīvs dizains ietekmē interneta lietotājus reālajā pasaulē? Apsveriet mums visiem zināmo darbību: iepirkšanos tiešsaistē.

Attēlā, izmantojot klēpjdatoru, lai iepirktos tiešsaistē, vienlaikus veicot piezīmes blakus mobilajai ierīcei

Westend61/Getty Images



Lietotājs var sākt produktu meklēšanu darbvirsmā pusdienu pārtraukumā. Kad viņi ir atraduši produktu, kuru viņi apsver iegādāties, viņi to pievieno grozam un atgriežas darbā.

Lielākā daļa lietotāju dod priekšroku izlasīt atsauksmes pirms pirkuma veikšanas. Tātad lietotājs atkal apmeklē vietni, šoreiz planšetdatorā mājās, lai izlasītu atsauksmes par produktu. Pēc tam viņiem atkal ir jāatsakās no vietnes, lai turpinātu savu vakaru.



Pirms viņi tajā vakarā izslēdz gaismu, viņi paņem savu mobilo ierīci un vēlreiz apmeklē vietni. Šoreiz viņi ir gatavi veikt pēdējo pirkumu.

Adaptīvs tīmekļa dizains nodrošina, ka lietotājs var meklēt produktus galddatorā, lasīt atsauksmes planšetdatorā un veikt galīgo pirkumu, izmantojot mobilo tālruni.

Citi reālās pasaules scenāriji

Iepirkšanās tiešsaistē ir tikai viens no gadījumiem, kad adaptīvam dizainam ir izšķiroša nozīme tiešsaistes pieredzē. Citi reālās pasaules scenāriji ietver:

  • Ceļojumu plānošana
  • Meklēju jaunas mājas iegādei
  • Ģimenes brīvdienu ideju izpēte
  • Meklē receptes
  • Iepazīstieties ar ziņām vai sociālajiem medijiem

Katrs no šiem scenārijiem laika gaitā, visticamāk, attieksies uz plašu ierīču klāstu. Tas uzsver, cik svarīgi ir izveidot adaptīvu vietnes dizainu.