Ang Teknolohiya sa pagbuo ng website ay isang napaka-multifaceted na proseso. Gayunpaman, ang lahat ng mga yugto nito ay maaaring nahahati sa dalawang pangunahing bahagi - ang functional at ang panlabas na shell. O, gaya ng nakaugalian sa mga webmaster, back-end at front-end, ayon sa pagkakabanggit. Ang mga taong nag-order ng kanilang mga website mula sa mga web development studio ay kadalasang walang muwang na naniniwala na sulit na tumuon lamang sa functionality, at ito ang magiging tamang desisyon. Ngunit totoo ito sa napakabihirang mga kaso, kadalasan para sa mga startup na proyekto sa yugto ng pagsubok sa beta. Kung hindi, ang graphic na disenyo at user interface ay kailangan lang na sumunod sa mga pamantayan sa web development at maging maginhawa.
Ang unang batong panulok na kinakaharap ng taga-disenyo ng interface, o taga-disenyo, ay ang lapad ng layout ng site. Pagkatapos ng lahat, para dito kinakailangan na gumuhit ng mga interface. Purong intuitively, dalawang paraan ang lumitaw - maaaring gumawa ng magkahiwalay na mga layout para sa bawat sikat na resolution ng screen, o gumawa ng isang bersyon ng site para sa lahat ng display. At ang parehong mga pagpipilian ay magiging mali, ngunit una sa lahat.
Karaniwang lapad ng website sa mga pixelpara sa Runet
Bago ang pagbuo ng adaptive na layout, ang pagbuo ng isang site na may lapad na isang libong pixel ay isang mass phenomenon. Ang figure na ito ay pinili para sa isang simpleng dahilan - upang ang site ay umaangkop sa anumang screen. At ito ay may sariling lohika, ngunit ipagpalagay natin na ang isang tao ay mayroon pa ring hindi bababa sa isang HD monitor sa isang desktop. Sa kasong ito, ang iyong layout ay magmumukhang isang maliit na strip sa gitna ng screen, kung saan ang lahat ay magkakadikit sa isang bunton, at sa mga gilid ay may malaking hindi nagamit na espasyo. Ngayon, ipagpalagay natin na ang isang tao ay nag-a-access sa iyong website sa isang tablet na may 800px na malawak na screen at ang "Ipakita ang buong website" ay may check sa mga setting. Sa kasong ito, ipapakita rin nang mali ang iyong site, dahil hindi ito kasya sa screen.
Mula sa mga pagsasaalang-alang na ito, maaari naming tapusin na ang isang nakapirming lapad para sa layout ay talagang hindi angkop para sa amin at kailangan naming maghanap ng ibang paraan. Suriin natin ang ideya ng isang hiwalay na layout para sa bawat lapad ng screen.
Mga Layout para sa lahat ng okasyon
Kung pinili mo bilang isang diskarte upang lumikha ng mga layout para sa lahat ng laki ng screen sa merkado, ang iyong site ang magiging pinakanatatangi sa buong Internet. Pagkatapos ng lahat, imposibleng masakop ngayon ang buong hanay ng mga device, sinusubukang i-fine-tune ang bawat opsyon. Ngunit kung tumuon ka sa pinakasikat na mga resolusyon ng mga monitor at screen ng device, hindi masama ang ideya. Ang tanging kawalan nito ay ang mga gastos sa pananalapi. Pagkatapos ng lahat, kapag ang isang taga-disenyo ng interface, isang taga-disenyo at isang tagapagkodigo ay pinilit na gawin ang parehong gawain 5 o 6 na beses, ang proyekto ay nagkakahalagadi-katimbang na mas mataas kaysa sa orihinal na binadyet na presyo.
Samakatuwid, ang mga site na may isang pahina lamang ang maaaring magyabang ng maraming bersyon para sa iba't ibang screen, ang layunin nito ay magbenta ng isang produkto at siguraduhing gawin ito nang maayos. Well, kung wala kang isa sa mga landing na ito, ngunit isang multi-page na site, dapat kang mag-isip pa.
Pinakasikat na Laki ng Site
Ang isang kompromiso sa pagitan ng dalawang sukdulan ay nagre-render ng layout para sa tatlo o apat na laki ng screen. Kabilang sa mga ito, ang isa ay dapat na isang layout para sa mga mobile device. Ang iba ay dapat iakma para sa maliit, katamtaman at malalaking desktop screen. Paano pumili ng lapad ng site? Sa ibaba ay ipinakita namin ang mga istatistika ng serbisyo ng HotLog para sa Mayo 2017, na nagpapakita sa amin ng pamamahagi ng katanyagan ng iba't ibang mga resolution ng screen ng device, pati na rin ang dynamics ng indicator na ito.
Mula sa talahanayan maaari mong malaman kung paano matukoy ang laki ng site na gusto mong gamitin. Bilang karagdagan, maaari nating tapusin na ang pinakakaraniwang format ngayon ay isang screen na 1366 by 768 pixels. Ang ganitong mga screen ay naka-install sa mga laptop na badyet, kaya ang kanilang katanyagan ay natural. Ang susunod na pinakasikat ay ang Full HD monitor, na siyang gold standard para sa mga video, laro, at samakatuwid ay para sa paglikha ng mga layout ng website. Sa talahanayan pa, makikita natin ang resolution ng mga mobile device na 360 by 640 pixels, pati na rin ang iba't ibang opsyon para sa desktop at mobile screen pagkatapos nito.
Pagdidisenyo ng layout
KayaPagkatapos suriin ang mga istatistika, maaari nating tapusin na ang pinakamainam na lapad ng site ay may 4 na variation:
- Bersyon ng laptop na may lapad na 1366px.
- Buong HD na bersyon.
- Isang 800px na malawak na layout para sa pagpapakita sa maliliit na desktop monitor.
- Mobile na bersyon ng site - 360 pixels ang lapad.
Ipagpalagay nating napagpasyahan namin kung anong laki ang gagamitin para sa nabuong pinagmulan para sa site. Ngunit magastos pa rin ang naturang proyekto. Kaya tingnan natin ang higit pang mga opsyon, sa pagkakataong ito nang hindi gumagamit ng nakapirming lapad.
Paggawa ng layout na flexible
May alternatibong diskarte, kapag ito ay nagkakahalaga ng pag-angkop lamang sa pinakamababang laki ng screen, at ang mga laki ng site mismo ay itatakda ng mga porsyento. Kasabay nito, ang mga elemento ng interface tulad ng mga menu, button, at logo ay maaaring itakda sa mga ganap na halaga, na tumutuon sa pinakamababang laki ng lapad ng screen sa mga pixel. Ang mga bloke na may nilalaman, sa kabaligtaran, ay iuunat ayon sa tinukoy na porsyento ng lapad ng lugar ng screen. Binibigyang-daan ka ng diskarteng ito na ihinto ang pag-unawa sa laki ng mga site bilang limitasyon para sa taga-disenyo at mahusay na talunin ang kakaibang ito.
Ano ang golden ratio at paano ito mailalapat sa layout ng web page?
Kahit sa Renaissance, sinubukan ng maraming arkitekto at artista na bigyan ang kanilang mga likha ng perpektong hugis at proporsyon. Para sa mga sagot sa mga tanong tungkol sa mga halaga ng gayong proporsyon, bumaling sila sa reyna ng lahat ng agham - matematika.
Mula noong unang panahon, naimbento ang isang proporsyon na itinuturing ng ating mata bilang pinaka natural at eleganteng,dahil ito ay nasa lahat ng dako sa kalikasan. Ang nakatuklas ng pormula para sa gayong ratio ay isang mahuhusay na sinaunang arkitekto ng Griyego na nagngangalang Phidias. Kinakalkula niya na kung ang mas malaking bahagi ng proporsyon ay nauugnay sa mas maliit dahil ang kabuuan ay nauugnay sa mas malaki, kung gayon ang gayong proporsyon ay magiging pinakamaganda. Ngunit ito ang kaso kung nais mong hatiin ang bagay nang walang simetrya. Ang proporsyon na ito ay tinawag na ginintuang seksyon, na hindi pa rin nagpapahalaga sa kahalagahan nito para sa kasaysayan ng kultura ng mundo.
Bumalik sa disenyo ng web
Napakasimple - gamit ang golden ratio, maaari kang magdisenyo ng mga page na magiging kasing kasiya-siya sa mata ng tao hangga't maaari. Ang pagkalkula ayon sa kahulugan ng formula ng ginintuang ratio, nakuha namin ang hindi makatwiran na numero 1, 6180339887 …, ngunit para sa kaginhawahan, maaari kaming gumamit ng isang bilugan na halaga ng 1, 62. Nangangahulugan ito na ang mga bloke ng aming pahina ay dapat na 62 % at 38% ng kabuuan, anuman ang laki ng nabuong pinagmulan para sa site na iyong ginagamit. Makakakita ka ng halimbawa sa diagram na ito:
Gumamit ng mga bagong teknolohiya
Ang mga modernong teknolohiya sa layout ng website ay ginagawang posible na tumpak na maiparating ang ideya ng isang tagaplano at taga-disenyo, kaya ngayon ay kayang-kaya mong ipatupad ang mas matapang na mga ideya kaysa sa simula ng mga teknolohiya sa Internet. Hindi mo na kailangang pag-isipang mabuti kung ano dapat ang sukat ng site. Sa pagdating ng mga bagay tulad ng block adaptive na layout, dynamic na paglo-load ng nilalaman at mga font, naging mas kaaya-aya ang pagbuo ng website. Pagkatapos ng lahat, ang mga teknolohiyang ito aymas kaunting mga paghihigpit, bagama't naroon pa rin ang mga ito. Ngunit tulad ng alam mo, walang mga limitasyon ay walang sining. Iminumungkahi namin na gumamit ka ng isang tunay na malikhaing diskarte sa disenyo - ang ginintuang ratio. Gamit nito, mabisa at maganda mong mapupuno ang workspace, anuman ang laki ng site na itinakda mo sa iyong mga template.
Paano dagdagan ang working space ng site
May isang magandang pagkakataon na hindi ka magkakaroon ng sapat na espasyo upang magkasya ang lahat ng elemento ng UI sa isang maliit na layout. Sa kasong ito, kakailanganin mong magsimulang mag-isip nang malikhain o mas malikhain pa kaysa dati.
Maximum na libreng espasyo sa site sa pamamagitan ng pagtatago ng navigation sa pop-up menu. Lohikal na gamitin ang diskarteng ito hindi lamang sa mga mobile device, kundi pati na rin sa mga desktop. Pagkatapos ng lahat, hindi kailangang tingnan ng user sa lahat ng oras kung anong mga heading ang nasa iyong site - dumating siya para sa nilalaman. At dapat igalang ang kagustuhan ng gumagamit.
Ang isang halimbawa ng magandang paraan upang itago ang menu ay ang sumusunod na layout (larawan sa ibaba).
Sa itaas na sulok ng pulang bahagi, makikita mo ang isang krus, ang pag-click sa kung saan ay itatago ang menu sa isang maliit na icon, na iiwan ang user na mag-isa sa nilalaman ng website.
Gayunpaman, ito ay opsyonal, maaari mong iwanan ang navigation, na palaging makikita. Ngunit maaari mo itong gawing isang magandang elemento ng disenyo, at hindi lamang isang listahan ng mga sikat na link sa site. Gumamit ng mga intuitive na icon bilang karagdagan sa o kahit sa halip na mga text link. ito ay ang parehongay magbibigay-daan sa iyong site na gumawa ng mas mahusay na paggamit ng espasyo sa screen sa device ng user.
Ang pinakamahusay na website ay tumutugon
Kung hindi mo alam kung aling layout ang pipiliin para sa site, kung gayon ang lahat ay simple para sa iyo. Para makatipid sa mga gastos sa pag-develop at sa parehong oras ay hindi mawala ang iyong audience dahil sa hindi magandang layout para sa ilang device, gumamit ng tumutugon na disenyo.
Ang Responsive na disenyo ay isang disenyo na parehong maganda sa iba't ibang device. Ang diskarte na ito ay magbibigay-daan sa iyong site na maunawaan at maginhawa kahit sa isang laptop, kahit na sa isang tablet, kahit na sa isang smartphone. Ang epektong ito ay nakakamit sa pamamagitan ng awtomatikong pagbabago sa lapad ng lugar ng pagtatrabaho ng screen. Sa pamamagitan ng paggamit ng mga tumutugong style sheet para sa iyong site, ginagawa mo ang pinakamahusay na desisyon na posible.
Ano ang pagkakaiba sa pagitan ng tumutugon na disenyo at mga bersyon ng website
Ang tumutugon na disenyo ay naiiba sa mobile na bersyon ng site dahil sa huling kaso, ang user ay makakatanggap ng html code na iba sa desktop. Ito ay isang kawalan sa mga tuntunin ng pag-optimize ng pagganap ng server pati na rin ang pag-optimize ng search engine. Bilang karagdagan, nagiging mas mahirap na kalkulahin ang mga istatistika para sa iba't ibang bersyon ng site. Ang adaptive approach ay walang ganitong mga disadvantage.
Ang kakayahang tumugon para sa iba't ibang device ay nakakamit sa pamamagitan ng isang layout na may porsyento ng lapad na tinukoy o sa pamamagitan ng paglilipat ng mga bloke sa available na espasyo (sa vertical plane sa isang smartphone sa halip napahalang sa desktop), o paggawa ng mga indibidwal na layout para sa iba't ibang screen.
Matuto pa tungkol sa tumutugon na disenyo at pag-develop sa aming mga tutorial.
