Ang Adaptive na disenyo ng website ay isang maginhawang sistema para sa pagpapakita ng parehong website sa iba't ibang uri ng mga device online. Sa madaling salita, ito ay ang kakayahang tingnan ang isang web page sa isang laptop, smartphone at iba pang mga gadget.
Ang pagtugon sa web ay naging isang pangangailangan mula noong ang mga tao ay nakakuha ng mga gadget na naka-enable sa internet na may iba't ibang format. Nagsusumikap ang mga kumpanya, online na tindahan, at kahit na mga site na nagbibigay-kaalaman lamang na pasayahin ang kanilang madla, na umaangkop dito sa lahat ng posibleng paraan. Nalulutas ng tumutugon na disenyo ang problema sa kaginhawahan, samakatuwid ito ay isang kailangang-kailangan na bagay sa trabaho.
Mga Katangian ng Responsive Web Design
Ang kaginhawahan ng disenyo ay nailalarawan sa pamamagitan ng ilang pangunahing pamantayan.
- Laki. Ang tumutugon na disenyo ng website ay dapat na may kaunting mga pagkakaiba kapag ipinapakita ang pahina sa iba't ibang mga device, kaya ang mga laki ng mga larawan, teksto at iba pang mga elementong tinitingnan ay dapat na tumutugma sa mga sukat ng mga device mismo. Para magawa ito, iniangkop ng mga web developer ang disenyo para magkaroon ito ng maraming bersyon ng view.
- Pagbagay ng nilalaman. Materyal na pumupuno sa site (mga larawan, videoat iba pang mga elemento ng multimedia) ay dapat ding tumugma sa mga kinakailangang resolution ng screen nang hindi nawawala ang kalidad ng display.
- Pagiging flexible ng disenyo. Pagsasama sa pagbuo ng mga elemento na nagbibigay-daan sa iyong mabilis na ayusin ang disenyo ng site kapag binago mo ang web page na iyong tinitingnan. Halimbawa, ini-scroll ng user ang page pataas at pababa, nag-navigate sa iba't ibang seksyon, o binabago ang posisyon ng screen mula patayo patungo sa pahalang at vice versa.
- Pasimplehin ang mga item ayon sa device para sa mas mahusay na kakayahang magamit.
- Itago ang mga hindi mahalagang block sa mas maliliit na screen.
Basics
Ang pagbuo ng website ay tiyak na nauugnay sa mga programming language, dahil hindi mo magagawa nang wala ang mga ito. Gamit ang HTML at CSS, kinikilala ng browser ang komposisyon at pagkakasunud-sunod ng mga bagay (mga teksto, mga larawan, mga video) - ito ang paraan kung paano nabuo ang site.
Ang CSS ay responsable para sa kulay, mga istilo, laki, font, alignment, padding, mga elemento ng background, mga form, atbp. Ang HTML ay responsable para sa pangkalahatang nilalaman at istraktura ng site. Kaya, ang isang web resource ay binuo sa pinagsama-samang dalawang pinakamahalagang paraan ng paglalarawan.
Ang CSS, sa kabilang banda, ay isang kailangang-kailangan na tool sa disenyo. May malaking hanay ng mga feature na higit sa HTML:
- Nagbibigay ng pare-parehong disenyo sa maraming page, hitsura ng site, at kinokontrol ang pagpapakita ng mga HTML na dokumento.
- Binibigyan ka ng pagkakataong gumawa ng disenyo at content nang sabay.
- Naglalapat ng maraming istilo at kakayahangtumitingin sa iba't ibang device.
- Gumagawa ng mga kumplikadong desisyon sa disenyo.
- Nailalarawan ng mataas na bilis.
Upang bumuo ng website, kailangan mong malaman ang ilang pangunahing konsepto.
Ang isang CSS selector ay tinutukoy ng pangalan ng isang istilo na tumutukoy sa mga katangian at mga opsyon sa pag-format. Sinasabi nito sa browser kung saang partikular na elemento nalalapat ang mga katangian.
Ang property ay isang istrukturang unit. Tinutukoy nito ang mga panlabas na parameter (laki, lokasyon, kulay, hugis, atbp.) at ipinahayag sa isang partikular na code.
May isang hanay ng mga tinukoy na katangian ng CSS na naglalarawan ng isang bagay sa hitsura at lokasyon.
Magkasama, ang mga elementong ito ay bumubuo ng sumusunod na scheme:
Selector { property1: value; ari-arian2; halaga }.
Mga laki at resolution ng layout
Nagsisimula ang pagbuo ng disenyo sa paghahanda ng layout sa Photoshop o iba pang mga graphic program. Para sa kaginhawahan, ang mga espesyal na marka ng modular grid ay ipinakilala sa canvas, ang mga espesyal na indent ay sinusunod. Kaya, ipinapakita ng web designer sa taga-disenyo ng layout ang mga prinsipyo ng pagbubuo ng hinaharap na site at ang tamang pag-aayos ng mga elemento ng web.
Mga tumutugong resolution at laki ng disenyo ng web para sa mga pangunahing uri ng device:
- Sumusunod ang disenyong ito sa prinsipyo ng pagsisimula ng trabaho nang may pahintulot sa mobile. Ang layout para sa smartphone ay ginawa sa laki na 460 × 960 px.
- Ang laki ng layout ng tablet ay 768 × 1024.
- Ang laki ng notebook ay 1280 × 802.
- Ang laki ng PC ay 1600 × 992.
Sa mobile na bersyon ng sitedapat na pinasimple hangga't maaari, habang pinapanatili ang lahat ng mga pangunahing pag-andar. Kung ang layout ay inihahanda para sa isang online na tindahan, kasama ang lahat ng pagpapasimple na ginagamit, dapat itong magkaroon ng pangunahing paglalarawan, isang katalogo ng produkto, isang pagpipilian sa pag-order, isang shopping cart, atbp. - lahat ng kinakailangang elemento para sa ganap na paggana, tulad ng full-format na pagtingin sa isang PC. Ang kaginhawahan ng mobile na bersyon ay dito mo maiiwasan ang mga karagdagang page para makatipid ng oras kapag naglo-load.
Sa adaptive content, gamit ang html code, maaari mong itago ang ilang elemento na hindi naman talaga kailangan. Halimbawa, sa mataas na resolution, ang site ay nagpapakita ng isang card ng produkto kasama ang paglalarawan nito, presyo, impormasyon sa paghahatid at ang kakayahang magdagdag sa "Basket". Sa mobile resolution, ang proseso ay pinasimple sa isang larawan, isang presyo, at isang buy button.
Katamtaman at minimum na mga resolution para sa tumutugon na disenyo ay dapat isaalang-alang ang kadalian ng pagbabasa at pagtingin ng user.
Layout
Ang layunin ng adaptive na layout ng disenyo ay lumikha ng isang flexible na layout, o gaya ng nakaugalian din na sabihin: "rubber template". Ang bottom line ay wala sa mga single-digit na laki ng page, ngunit sa proporsyonal na compressibility ng template para sa madaling pagtingin sa lahat ng device.
Ito ay pangunahing binuo sa CSS. Sa panahon ng pag-develop, tinutukoy ang mga control point ng mga sukat ng screen. Kaya, ang lapad ng natitirang mga bagay ay tinutukoy. Upang gawin ito, ang lapad ng pahina ay itinakda ng css max-width na pag-aari, depende sa mga pamantayang ito, ang laki ng iba pang mga elemento ay pinili bilang isang porsyento. Halimbawa, ang laki ng bloke sa pangunahingpage ay 600px, at ang lapad ng sidebar block (site sidebar) ay 400px, ayon sa pagkakabanggit, ang lapad ng nilalaman ay magiging 60%, at ang lapad ng sidebar ay 40%.
May ilang uri ng tumutugon na mga layout. Pinipili ang bawat isa, depende sa mga feature at construction.
Mga Pagtingin:
- Isang uri ng layout na nagbibigay-daan sa mga bloke na mabalot kapag nabawasan ang resolution ng screen. Sa mga site na may maraming hanay, inililipat ang mga karagdagang block sa ibaba ng screen.
- Kapag gumawa ng hiwalay na pattern para sa bawat pahintulot. Ang ganitong uri ng tumutugon na disenyo ay mas tumatagal ngunit ito ang pinakanababasa.
- Isang simpleng uri ng disenyo na naglalayong sukatin ang lahat ng elemento. Hindi ito flexible.
- Ang uri ng panel ay maginhawa para sa paggamit sa mga mobile application, kapag lumitaw ang mga karagdagang function kapag binabago ang mismong posisyon ng screen.
Ang paggawa ng mga tumutugong layer ay isang bahagi lamang ng trabaho. Ang mga adaptive na larawan ay isang hiwalay na kaso, na may sariling mga problema at pamamaraan para sa paglutas ng mga ito.
Ang isang larawan ay dapat na malinaw na ipinapakita sa iba't ibang mga resolution ng screen. Mayroong problema dito - kung paano matiyak na ang larawan ay palaging nananatiling pareho, anuman ang pagbabago sa resolution. Ang paglalagay ng simpleng CSS code sa kasong ito ay hindi magiging sapat.
Halimbawa: img {max-width: 250px;} - dito dapat kang maglapat ng paraan kung saan ang laki ng lalagyan na naglalaman ng larawan ay limitado, at hindi ang larawan mismo. Magiging ganito ang hitsura nito: div img {max-width: 250px;}. Ang pamamaraang ito ay malulutas ang problemalayout ng maliliit na larawan, ngunit hindi angkop para sa malalaking larawan.
Samakatuwid, maraming mga developer ang mas gustong gumamit ng mga javascript na wika na nagbibigay-daan sa iyong iangkop ang anumang larawan nang hindi nag-overload sa server. Nag-aalok ang Javascript ng malaking bilang ng mga alternatibong script.
Mga kalamangan at kahinaan ng tumutugon na layout
Mga Positibong:
- I-save ang lokasyon ng lahat ng elemento. Maginhawa ito kapag nasanay na ang user sa buong bersyon ng site.
- I-save ang mga domain at address.
- Buong pag-customize para sa iba pang mga format ng pahintulot.
Mga Negatibo:
- Nawala ang functional flexibility
- Anumang informative overloads ay puno ng mahabang paglulunsad ng web resource, na pumipilit sa maraming user na lumipat sa mas mabilis na opsyon.
Paggawa ng website
Ang istraktura ng site ay nahahati sa ilang mga seksyon at mga bloke. Ayon sa kaugalian, ang layout ay binubuo ng tuktok na bahagi ng site (header), logo, menu, block ng nilalaman at ang huling bahagi ng site (halimbawa, detalyadong impormasyon sa pakikipag-ugnayan). Tingnan natin kung paano gumawa ng tumutugon na disenyo ng website mula sa isang simpleng template.
Mga pantulong na tag para sa pagsulat:
- wrapper - tag na pinagsasama ang lahat ng elemento ng template;
- header h1 - logo;
- header - header para sa menu at iba pang mahahalagang elemento;
- content - block;
- colLeft - laki ng content;
- colRight - sidebar (side column);
- footer - ang huling bahagi ng site;
- media screen - mga setgustong resolution.
Kapag nagsusulat ng site, maaaring lumipat ang mga elementong ito sa ibang pagkakasunud-sunod, depende sa pangangailangan. Halimbawa, sa mga matataas na resolution, ang menu ay maaaring ipakita nang patayo. Sa mobile na bersyon, maaaring buuin ang layout sa paraang mag-slide palabas ang menu sa pahalang na posisyon.
- viewport - isang tag na nagbibigay-daan sa iyong i-save ang laki ng text sa mas maliit na bersyon ng disenyo. Ito ay matatagpuan sa pagitan ng mga tag.
- max-width - upang i-optimize ang site upang maiwasan ang pag-stretch sa mga resolution na higit sa 1000 pixels.
Kapag ipinapatupad ang layout, malaki ang naitutulong ng jQuery library kapag kailangan mong baguhin ang istilo at istraktura ng mga block.
Ano ang pagkakaiba sa pagitan ng tumutugon at mobile na disenyo
Para sa kumpletong pag-unawa, isaalang-alang ang ilang halimbawa ng paglalarawan, dahil karaniwan na ang pagkalito sa pagitan ng dalawang konseptong ito.
Kailangan mong maunawaan na ang mobile na bersyon ay isang analogue ng pangunahing site na may subdomain. Ang panlabas na presentasyon ng site ay ganap na inuulit ang istilo at functionality, habang ang istraktura at nilalaman nito ay maaaring mag-iba mula sa pangunahing bersyon, dahil ang bersyon ay pinutol sa mga kinakailangang elemento.
Ang tumutugon na disenyo ay pinakamainam para sa lahat ng resolution ng device. Ito ay nasusukat at nagre-render nang tama anuman ang mga kundisyon sa pagtingin.
Ito ang dalawang magkaibang presentasyon ng site, kung saan ang mga pagtatalo ay walang sawang nagagalit kung alin ang mas mahusay. Dapat tandaan na wala pang tiyak na desisyon ang naabot. Pinuri ng isang tao ang disenyo na ito, na itinuturo ang trend ng fashion at maraming mga pakinabang. Ang mobile na bersyon ay mayroon ding ilang mga pakinabang na wala sa tumutugon na disenyo. Samakatuwid, sa simula, dapat mong maunawaan ang mga pangunahing pangangailangan.
Mga Benepisyo
Paano mas mahusay ang tumutugon na disenyo kaysa sa mobile?
Versatility. Sa ating panahon, na may tulad na galit na paglago ng merkado, ito ay kinakailangan lamang upang ipakita ang impormasyon sa ibang paraan, na nagbibigay-kasiyahan sa mga kagustuhan ng mga mamimili. Malulutas ng tumutugon na disenyo ang problemang ito.
Epektibong promosyon sa mga search engine. Ano ang hindi maaaring maiugnay sa mga pangunahing bentahe ng isang adaptive device. Mas gusto ng mga search engine na bigyan ang mga user ng mga tumutugon na website.
Pagkakagamit. Ang tumutugon na disenyo ay karaniwang idinisenyo sa pinakamahusay na mga solusyon sa disenyo, na isang magandang regalo para sa visual na perception ng mga user.
Kadalian at pagiging simple sa pagpapatupad ng proyekto at sa paggamit nito.
Magandang mga rate ng conversion. Dahil sa adaptive na disenyo mayroong higit pang mga pagkakataon para sa pagpapakita, ang conversion mismo ay tumataas.
Ekonomya. Ito ay medyo mas mura kaysa sa paggawa at pag-promote ng hiwalay na mobile na bersyon.
Mga kalamangan at kahinaan ng mobile na bersyon
Ang paggawa ng tumutugon na disenyo ng mobile ay nangangailangan ng versatility at consistency. Una sa lahat, inirerekumenda na isulat ang mga tuntunin ng sanggunian nang detalyado, na, siyempre, ay makakatulong upang maiwasan ang hindi kinakailangang trabaho at makatipid ng oras, pati na rin isaalang-alang ang mga tampok ng server kung saan mai-host ang site..
May ilang partikular na pakinabang at disadvantage sa mobile responsive na disenyo.
Pros:
- Kung mayroon kang yari na site, hindi na kailangang bumuo ng disenyo para sa mobile na bersyon mula sa simula. Ilang pagbabago lang ang magagawa, na nagpapalaya sa layout na ito mula sa hindi kinakailangang functionality.
- Dahil sa lahat ng uri ng pagpapasimple, ang mobile na bersyon ay itinuturing na mas mabilis kapag nagda-download.
- Nakikita ng user ang pinakamahalagang piraso ng impormasyon sa lahat ng content.
- Mabilis na pagpapatupad. May mga plugin kung saan maaari mong ipatupad ang mobile adaptation, kahit na hindi mo alam ang mga tag at code.
- Pinapaboran ng mga pagpipilian sa search engine ang mga adaptive na bersyon dahil mas kaunting oras ang pag-aanalisa ng mga ito.
Cons:
- Hindi lahat ng bersyon ng mobile ay maaaring tumugma sa mga resolusyon ng mobile device. Ang site, siyempre, ay magbubukas, ngunit ang resolution ng screen ay hindi palaging tumutugma sa layout. Minsan ang isang mahusay na disenyo ng smartphone ay maaaring magmukhang iba kapag binuksan bilang isang tablet.
- Ang mga mobile na bersyon ay nangangailangan ng hiwalay na bayad na mga domain.
- May ilang maliliit na isyu sa pag-post ng nilalaman. Kung mayroong ilang mga bersyon nang sabay-sabay, dapat isaayos ang nilalaman para sa lahat ng mga format nang sabay-sabay. Ang pagsusumite ng bagong materyal sa pangunahing site at pagkopya nito sa mobile na bersyon ay maaaring ituring na pagnanakaw. Upang maiwasan ang problemang ito, maaaring kailanganin mong patunayan ang koneksyon ng mga mapagkukunan.
Mga paraan ng pagpapatupad
Mga pangunahing paraan ng pagpapatupad:
- Pagkatapos gawin ang disenyo ng mga layout at layout, ito ay na-load sa mga kinakailangang dimensyon gamit angsite ng operator at pangunahing code. Isa itong klasikong paraan na ginagamit kapag gumagawa ng katamtaman at maliliit na bersyon (mga tablet, smartphone, atbp.).
- Ang BootStrap ay isang simple at malinaw na hanay ng mga adaptation tool. Angkop para sa paglikha ng mga bersyon para sa Landing Page at iba pang hindi masyadong kumplikadong mga proyekto sa web. Nagbibigay ito ng magandang pagkakataon na maglapat ng maraming iba't ibang istilo sa mga function ng interface.
- Ang Responsive Grid System ay isang sikat na hanay ng maraming gamit. Madaling ilapat at hindi nangangailangan ng malalim na kaalaman. May kasamang malawak na uri ng infographics.
- GUMBY - Isang CSS framework na ipinagmamalaki ang kakayahang tumugon at mahusay na tooling.
- Cookies - nagbibigay-daan sa iyong ipatupad ang mga tumutugong larawan. Awtomatikong sinasamahan ang mga file na hiniling ng browser.
- Ang ExpressionEngine ay isa pang paraan para gumawa ng mga tumutugong larawan. Tinutukoy kung mobile ang device, na may kakayahang baguhin ang mga larawan sa kinakailangang resolution.
- ProtoFluid - Nagbibigay ng mabilis na prototyping. Angkop para sa lahat ng uri ng device.
