Adaptīvs izkārtojums vietnēm

Satura rādītājs:

Adaptīvs izkārtojums vietnēm
Adaptīvs izkārtojums vietnēm
Anonim

Jo mobilās ierīces kļūst populārākas, jo neērtāka ir ritināšana lielākajā daļā vietņu. Tāpēc kopš 2012. gada tīmekļa pārziņi ir izmantojuši risinājumu, kas padara resursu skatīšanu zemas izšķirtspējas ekrānos ērtāku - adaptīvu izkārtojumu.

Mūsdienu tendence

Adaptīvs izkārtojums
Adaptīvs izkārtojums

Šodien aptuveni pieci miljardi cilvēku uz Zemes izmanto mobilos tālruņus, un trešdaļai no viņiem ir viedtālruņi. Tāpēc vietņu īpašniekiem mobilā trafika kļūst arvien svarīgāka. Iespējams, ka laika gaitā šāds apmeklētāju avots tikai pieaugs. Meklētājprogrammas ātri reaģēja uz šo tendenci. Lielās korporācijas "Yandex" un Google ir veikušas būtiskas izmaiņas savos algoritmos vietņu ranžēšanai meklēšanas rezultātos, ņemot vērā adaptīvā izkārtojuma un dizaina pieejamību. Vienkārši sakot, mobilajiem tālruņiem, viedtālruņiem un planšetdatoriem optimizētajiem tīmekļa resursiem būs zināmas priekšrocības salīdzinājumā ar konkurentiem.

Adaptīva izkārtojuma definīcija

Adaptīvais izkārtojums ir tīmekļa lapas rāmja izveides metode,automātiski mainot bloku atrašanās vietu atbilstoši tās ierīces ekrāna izšķirtspējai, kurā tas tiek skatīts. Tas ir, ar šo pieeju tiek izveidoti atsevišķi stili dažādām izšķirtspējām. Šis efekts tiek panākts, rakstot īpašus CSS failus.

adaptīvais izšķirtspējas izkārtojums
adaptīvais izšķirtspējas izkārtojums

Agrāk problēma tika atrisināta nedaudz savādāk. Izstrādātājiem bija jāveic daudz vairāk “ķermeņa kustību”, izveidojot vietnes galvenās versijas izkārtojumu un dizainu un veicot to pašu mobilajai versijai. Atkarībā no ierīces ekrāna, kurā tika skatīts interneta projekts ar pieejamo mobilo platformu, tika palaista atbilstošā vietnes versija.

Šī pieeja daudzējādā ziņā neattaisnojās, un vairums tīmekļa pārziņu nekad nav uzsākuši mobilās versijas izveidi. Tagad šis pasūtījums ir aizstāts ar adaptīvo izkārtojumu. Veidojot vietnes skeletu, izmantojot šo tehnoloģiju, tīmekļa pārzinis visus savus spēkus koncentrē uz vienas projekta versijas izveidi, un apmeklētāji to var apskatīt ar vienādu komforta līmeni gan uz liela datora ekrāna, gan mobilajā tālrunī, viedtālrunī vai planšetdatorā.

Adaptīvā izkārtojuma priekšrocības

Kādas ir adaptīvā vietnes izkārtojuma priekšrocības? Iepriekš tika atzīmēts, ka priekšrocība ir pareiza visu lapu bloku attēlošana jebkurā ierīcē. Tāpat šīs pieejas pozitīvais aspekts veidnes izveidē ir izmaiņu ieviešanas ātrums. Ko tas nozīmē?

atsaucīga izkārtojuma veidne
atsaucīga izkārtojuma veidne

Ja vietnei bija divas platformas, izkārtojumā veiktajām izmaiņām bija jābūtvispirms ieviest darba versijā un pēc tam mobilajā versijā. Ja izmaiņas kodā bija diezgan būtiskas, tad šādu izmaiņu veikšanas process varētu ieilgt. Izmantojot adaptīvo izkārtojumu, darbs vietnē tiek veikts vienā failā. Izmaiņas, kas veiktas tīmekļa lapas izkārtojumā, vienlīdz drīz tiks atspoguļotas gan produkcijas, gan mobilajā versijā.

Šīs pieejas trūkums daži tīmekļa pārziņi sauc tās ieviešanas sarežģītību. Taču līdz ar CSS 3 parādīšanos adaptīvas izkārtojuma veidnes izveide ir kļuvusi pavisam vienkārša. Pat nepieredzējuši tīmekļa pārziņi var padarīt savu vietni piemērotu mobilajām ierīcēm.

Adaptīvā izkārtojuma principi un funkcijas

Kādi principi ir pamatā adaptīvā izkārtojuma metodei tīmekļa dizainā?

- Šķidra izkārtojuma veida izmantošana.

- "Gumijas" attēli.

- Multivides vaicājumu (multivides vaicājumu) izmantošana.

- Par mobilajām ierīcēm ir jādomā jau no izkārtojuma sākuma.

No šiem šīs veidnes izveides metodes pamatprincipiem izriet šādas adaptīvā izkārtojuma iezīmes:

1. Vietnes dizaina izstrāde un izveide, ņemot vērā darbu pie visa izšķirtspējas diapazona: no mobilajām ierīcēm līdz platekrāna displejiem.

2. Izkārtojums ar kaskādes stila lapām, izmantojot multivides vaicājumu tehnoloģiju, kas ieviesta CSS 3.

3. Programmēšana gan klienta, gan servera pusē attēlu sūtīšanai uz mazāka izmēra un izšķirtspējas mobilajām ierīcēm.

Svarīgs aspekts, ņemot vērā, kāds adaptīvais izkārtojums tiek veidots, irpopulāru elektronisko ierīču izšķirtspējas matrica. Šī pieeja dizaina izstrādei padarīs tīmekļa pārlūkošanu jebkurā ekrānā ļoti ērtu. Bet kā zināt, kurus iekļaut stilos?

Kur sākt ar adaptīvo izkārtojumu?

Lielākā daļa vietņu ir veidotas tā, ka viedtālruņu un planšetdatoru ekrānos parādās ritjoslas, kas nav tik ērtas sērfošanai, un daudzu interneta projektu dizains un izkārtojums vienkārši “peld”. Vietnēs, kas izveidotas tīmekļa dizaina apmācībai, ir dažādas dažādu ierīču ekrāna izšķirtspējas, zem kurām ir vērts izkārtot savas vietnes lapas.

adaptīvā izkārtojuma piemēri
adaptīvā izkārtojuma piemēri

Adaptīvajam izkārtojumam, kura piemērus var atrast diezgan bieži, ir daudz priekšrocību. Kas būtu jāpatur prātā, tuvojoties lapas izkārtojumam šādā veidā?

Sākot darbu pie veidnes, ir svarīgi periodiski pārbaudīt, cik labi saturs un izkārtojuma bloki tiek parādīti dažādos ekrānos. Lai to izdarītu, dažreiz pietiek tikai mainīt pārlūkprogrammas loga platumu. Stila fails saņem multivides vaicājumu un maina bloku pozīciju, veicot būtiskas izmaiņas. Labs rīks adaptīvas izkārtojuma veidnes testēšanai var būt vietnes, kas atdarina dažādu modeļu mobilo ierīču ekrānus. Šādi pakalpojumi ļaus rūpīgi apsvērt un izvērtēt, kā dizains izskatās uz dažādu mobilo ierīču displejiem.

Lai gan šāda responsīva izkārtojuma tehnoloģija nav tik vienkārša, tās apgūšana nesīs augļus jau pavisam drīz.

Ieteicams: