Kung nagiging mas sikat ang mga mobile device, mas hindi komportable ang pag-scroll sa karamihan ng mga site. Kaya naman, mula noong 2012, gumagamit na ang mga webmaster ng solusyon na ginagawang mas kumportable ang pagtingin sa mga mapagkukunan sa mga screen na may mababang resolution - adaptive na layout.
Modernong trend
Ngayon, humigit-kumulang limang bilyong tao sa Earth ang gumagamit ng mga mobile phone, na ang ikatlong bahagi sa kanila ay may mga smartphone. Samakatuwid, ang trapiko sa mobile ay nagiging lalong mahalaga para sa mga may-ari ng website. Malamang na ang ganitong mapagkukunan ng mga bisita ay lalago lamang sa paglipas ng panahon. Mabilis na tumugon ang mga search engine sa trend na ito. Ang mga malalaking korporasyon na "Yandex" at Google ay gumawa ng mga makabuluhang pagbabago sa kanilang mga algorithm para sa pagraranggo ng mga site sa mga resulta ng paghahanap, na isinasaalang-alang ang pagkakaroon ng adaptive na layout at disenyo. Sa madaling salita, ang mga mapagkukunan sa web na na-optimize para sa mga mobile phone, smartphone at tablet ay magkakaroon ng kalamangan sa kanilang mga kakumpitensya.
Tumugon na kahulugan ng layout
Ang Adaptive na layout ay isang paraan ng paggawa ng frame ng web page,awtomatikong binabago ang lokasyon ng mga bloke alinsunod sa resolution ng screen ng device kung saan ito tinitingnan. Iyon ay, sa diskarteng ito, ang mga hiwalay na istilo ay nilikha para sa iba't ibang mga resolusyon. Nakakamit ang epektong ito sa pamamagitan ng pagsulat ng mga espesyal na CSS file.
Kanina, nalutas nang medyo iba ang problema. Ang mga developer ay kailangang gumawa ng higit pang "mga galaw ng katawan", na lumilikha ng layout at disenyo ng pangunahing bersyon ng site at ginagawa ang parehong para sa mobile. Depende sa screen ng device kung saan tiningnan ang proyekto sa Internet na may available na mobile platform, inilunsad ang naaangkop na bersyon ng site.
Hindi nabigyang-katwiran ng diskarteng ito ang sarili nito sa maraming paraan, at karamihan sa mga webmaster ay hindi kailanman gumawa ng mobile na bersyon. Ngayon ang order na ito ay pinalitan ng adaptive na layout. Sa pamamagitan ng paggawa ng skeleton ng site gamit ang teknolohiyang ito, itinutuon ng webmaster ang lahat ng kanyang pagsisikap sa paglikha ng isang bersyon ng proyekto, at matitingnan ito ng mga bisita nang may parehong antas ng kaginhawaan kapwa sa isang malaking screen ng computer at sa isang mobile phone, smartphone o tablet.
Mga Pakinabang ng Tumutugon na Layout
Ano ang mga pakinabang ng adaptive na layout ng website? Nauna nang nabanggit na ang kalamangan ay ang tamang pagpapakita ng lahat ng mga bloke ng pahina sa anumang device. Gayundin, ang isang positibong aspeto ng diskarteng ito sa paglikha ng isang template ay ang bilis ng pagpapatupad ng mga pagbabago. Ano ang ibig sabihin nito?
Kung ang site ay may dalawang platform, ang mga pagbabagong ginawa sa layout ay dapat naunang ipatupad sa gumaganang bersyon, at pagkatapos ay sa mobile na bersyon. Kung ang mga pagbabago sa code ay medyo makabuluhan, kung gayon ang proseso ng paggawa ng mga naturang pagbabago ay maaaring tumagal ng mahabang panahon. Sa adaptive na layout, ang trabaho sa site ay isinasagawa sa isang file. Ang mga pagbabagong ginawa sa layout ng web page ay pantay na makikita sa parehong produksyon at mobile na bersyon.
Ang kawalan ng diskarteng ito, tinatawag ng ilang webmaster ang pagiging kumplikado ng pagpapatupad nito. Ngunit sa pagdating ng CSS 3, ang paglikha ng isang tumutugon na template ng layout ay naging medyo simple. Kahit na ang mga walang karanasan na webmaster ay maaaring gawing pang-mobile ang kanilang site.
Mga prinsipyo at tampok ng adaptive na layout
Anong mga prinsipyo ang sumasailalim sa tumutugon na paraan ng layout sa disenyo ng web?
- Gamit ang Uri ng Fluid Layout.
- "Goma" na mga larawan.
- Paggamit ng mga media query (media-queries).
- Ang pangangailangang mag-isip tungkol sa mga mobile device mula pa sa simula ng layout.
Mula sa mga pangunahing prinsipyong ito ng paraang ito ng paggawa ng template, sumusunod ang mga sumusunod na feature ng adaptive layout:
1. Pagdidisenyo at paggawa ng disenyo ng website na isinasaalang-alang ang trabaho sa buong hanay ng mga resolusyon: mula sa mobile hanggang sa mga widescreen na display.
2. Layout na may mga cascading style sheet gamit ang media query technology na ipinakilala sa CSS 3.
3. Programming sa gilid ng client at server para magpadala ng mga larawan sa mga mobile device na mas maliit ang laki at resolution.
Isang mahalagang aspeto, na isinasaalang-alang kung aling adaptive layout ang nilikharesolution matrix ng mga sikat na electronic device. Ang diskarte na ito sa pagbuo ng disenyo ay gagawing napaka-komportable sa pag-browse sa web sa anumang screen. Ngunit paano mo malalaman kung alin ang isasama sa mga istilo?
Saan magsisimula sa tumutugon na layout?
Karamihan sa mga website ay ginawa sa paraang lumilitaw ang mga scrollbar sa mga screen ng mga smartphone at tablet, na hindi masyadong maginhawa para sa pag-surf, at ang disenyo at layout ng maraming proyekto sa Internet ay "lumulutang" lang. Ang mga website na ginawa para sa pagtuturo ng disenyo ng web ay naglalaman ng iba't ibang mga resolution ng screen ng iba't ibang mga device, kung saan ito ay nagkakahalaga ng paglalagay ng mga pahina ng iyong site.
Adaptive na layout, ang mga halimbawa nito ay madalas na makikita, ay may maraming pakinabang. Ano ang dapat tandaan kapag lumalapit sa layout ng page sa ganitong paraan?
Kapag nagsimulang gumawa sa isang template, mahalaga na pana-panahong subukan kung gaano kahusay ipinapakita ang mga bloke ng nilalaman at layout sa iba't ibang mga screen. Upang gawin ito, kung minsan ay sapat lamang na baguhin ang lapad ng window ng browser. Ang style file ay tumatanggap ng media query at muling iposisyon ang mga bloke, na gumagawa ng mga makabuluhang pagbabago. Ang isang mahusay na tool para sa pagsubok ng tumutugon na template ng layout ay maaaring mga site na ginagaya ang mga screen ng mga mobile device ng iba't ibang modelo. Ang mga naturang serbisyo ay magbibigay-daan sa iyong maingat na isaalang-alang at suriin kung ano ang hitsura ng disenyo sa mga display ng iba't ibang mga mobile device.
Bagaman ang teknolohiya ng ganitong tumutugon na layout ay hindi gaanong simple, ang pag-master nito ay magbubunga sa lalong madaling panahon.
