Mayroon ka bang " tumutugon na website "? Ito ay isang site na may isang layout na nagbabago batay sa device ng bisita at laki ng screen. Ang tumutugon sa disenyo ng web ay isang praktikal na kasanayan sa industriya. Inirerekomenda ito ng Google at natagpuan sa milyun-milyong mga site sa buong Web. Gayunman, mayroong isang malaking pagkakaiba sa pagitan ng pagkakaroon ng isang website na "angkop" lamang sa iba't ibang laki ng screen at pagkakaroon ng isang site na tunay na tumutugon.
Regular kong nakikita ang mga kumpanya na muling idisenyo ang kanilang website at itulak ang isang pahayag na nagpapalaki sa mga katangian ng kanilang bagong disenyo ng mobile-friendly. Kapag binisita ko ang mga site na iyon, kung ano ang madalas kong makita ay isang layout na talaga scale at baguhin upang magkasya sa iba't ibang mga screen, ngunit iyon ay hangga't sila ay kumuha ng ideya ng kakayahang tumugon. Ito ay hindi sapat. Ang isang tunay na tumutugon website ay higit pa sa scale upang magkasya sa isang mas maliit o mas malaking screen. Sa mga site na ito, makikita mo rin ang mga sumusunod na mahalagang katangian.
1. Na-optimize na Pagganap
Walang nagnanais na maghintay para mag-load ang isang website, at kapag ang isang tao ay gumagamit ng isang mobile na aparato na may isang koneksyon na maaaring mas mababa kaysa sa perpektong, ang pangangailangan para sa isang site upang i-load nang mabilis ay mas mahalaga.
Kaya paano mo i-optimize ang pagganap ng iyong site? Kung nagsisimula ka sa isang bagong site bilang bahagi ng muling pagdidisenyo, dapat mo itong gawing isang punto upang lumikha ng isang badyet sa pagganap bilang bahagi ng proyektong iyon. Kung nagtatrabaho ka sa isang umiiral nang site at hindi nagsisimula sa scratch, ang unang hakbang ay upang masubukan ang pagganap ng iyong site upang makita kung saan ka tumayo ngayon.
Sa sandaling mayroon ka ng isang baseline kung saan nakatayo ang iyong site ng pagganap-matalino, maaari mong simulan upang gawin ang mga kinakailangang mga pagpapabuti upang madagdagan ang bilis ng pag-download. Ang isang mahusay na lugar upang magsimula ay marahil sa mga imahe ng iyong site. Masyadong malaki ang mga imahe ay ang # 1 salarin pagdating sa mabagal na paglo-load ng mga site, kaya ang pag- optimize ng iyong mga imahe para sa paghahatid ng web ay maaaring talagang matulungan ang iyong site mula sa isang kinatatayuan ng pagganap.
Ang katotohanan ay ang pinabuting pagganap ng website at mabilis na bilis ng pag-download ay isang benepisyo na mapapahalagahan ng lahat ng mga bisita. Pagkatapos ng lahat, walang sinuman ang nagreklamo na ang isang site ay na-load na "masyadong mabilis", ngunit kung ang isang site ay tumatagal ng masyadong mahaba upang i-load, ito ay ganap na i-off ang mga tao ang layo kung ito responsively "akma" sa kanilang screen o hindi.
2. Smart Content Hierarchy
Kapag ang isang website ay ipinapakita sa isang malaking screen, maaari mong ilagay ang nilalaman sa isang iba't ibang mga paraan dahil sa malaking screen real estate magagamit. Maaari mong madalas na magkasya ang mga mahahalagang mensahe at imahe, mga update sa balita, impormasyon sa kaganapan, at pag-navigate sa site nang sabay-sabay sa screen. Pinapayagan nito ang isang bisita na madali at mabilis na i-scan ang nilalaman ng buong pahina at magpasya kung ano ang mahalaga sa kanila.
Ang senaryo na ito ay nagbabago ng medyo kapansin-pansing kapag tinanggap mo ang disenyo ng site na iyon at binago ito para sa mga maliliit na screen device, tulad ng isang cell phone. Biglang nagtatrabaho ka sa isang maliit na bahagi ng screen real estate na mayroon ka bago. Ang ibig sabihin nito ay kailangan mong magpasiya kung ano ang lilitaw muna sa site, kung ano ang susundan nito, at iba pa. Sa halip ng lahat ng bagay na nakikita nang sabay-sabay, malamang na mayroon ka lamang ng espasyo upang ipakita ang isa o dalawang bagay (ang isa ay malamang nabigasyon). Ito ay nangangahulugan na ang mga desisyon ng hierarchy ay kailangang gawin. Sa kasamaang palad, kung ano ang madalas na tumutukoy kung ano ang unang dumating sa screen, at pagkatapos ay pangalawang, atbp ay ang paraan na ang pahina mismo ay naka-code. Ito ay pinakamadaling, kapag nagtatayo ng isang tumutugon na site, upang ipakita ang una sa unang code sa screen, na sinusundan ng ikalawang item sa code at iba pa. Sa kasamaang palad, kung ano ang maaaring pinaka-mahalaga sa isang aparato ay maaaring hindi bilang kritikal sa iba. Naiintindihan ng isang tunay na tumutugon na site na dapat baguhin ang hierarchy ng nilalaman depende sa iba't ibang sitwasyon at dapat itong maging matalino tungkol sa kung ano ang ipinapakita nito kung saan.
Ang mga pagpapabuti sa mga diskarte sa layout ng CSS, kabilang ang CSS Grid Layout, Flexbox, at higit pa, ay nagbibigay-daan sa mga designer at mga developer ng web ng higit pang mga pagpipilian pagdating sa maingat na pagtula ng nilalaman, sa halip na hamstrung sa eksaktong pagkakasunud-sunod ng mga lugar ng nilalaman sa HTML code. Ang pagkuha ng mga bentahe ng mga bagong diskarte sa layout ay magiging mas mahalaga dahil ang landscape ng aparato, at ang mga pangangailangan ng mga gumagamit ng aming site, ay patuloy na nagbabago.
3. Mga Karanasan na Dalhin Sa Account ng Mga Lakas at Kahinaan ng Device
Pagpapatuloy sa paksa ng mga device - ang bawat aparato na magagamit ng isang tao upang bisitahin ang iyong site ay may parehong mga lakas at kahinaan na likas sa platform na iyon. Naiintindihan ng isang mahusay na tumutugon na site ang mga kakayahan at limitasyon ng iba't ibang mga device at ginagamit ang mga ito upang lumikha ng mga na-customize na karanasan na pinakaangkop sa anumang aparato na maaaring gamitin ng isang bisita sa sandaling iyon.
Halimbawa, ang isang cell phone ay nagsasama ng isang bilang ng mga tampok na hindi mo mahanap sa isang tradisyonal na desktop computer. Ang GPS ay isang halimbawa ng isang tampok na mobile-centric (oo, maaari kang makakuha ng pangkalahatang impormasyon sa lokasyon sa mga desktop pati na rin, ngunit ang GPS ng aparato ay mas tumpak). Ang iyong site ay maaaring gumamit ng impormasyon ng GPS upang makapag-pinong magpadala ng isang tao ng napaka detalyadong at tukoy na impormasyon sa direksyon ng step-by-step o mga espesyal na alok batay sa eksakto kung nasaan sila sa sandaling iyon.
Ang isa pang halimbawa ng punong-guro na ito sa pagsasanay ay isang site na nauunawaan kung anong uri ng display screen ang iyong ginagamit at nagpapadala ng mga larawan na pinakaangkop sa display na iyon. Kung mayroon kang screen na may mataas na densidad ng pixel, maaari kang magpasiya na magpadala ng mas mataas na mga larawan ng kalidad sa screen na iyon. Ang parehong mga imahe ay walang kabuluhan sa isang mas mababa screen na may kakayahang, gayunpaman, at ang dagdag na kalidad ay mawawala habang ang dagdag na laki ng file ay ma-download para sa walang aktwal na dahilan.
Ang mga tunay na mahusay na tumutugon na mga site ay isaalang-alang ang buong karanasan ng gumagamit at gumagana upang maiangkop ang karanasan na batay hindi lamang isang uri ng aparato o laki ng screen nito, ngunit iba pang mga mahalagang aspeto ng hardware pati na rin.
4. Nilalaman na may Konteksto
Sa una, ang tumutugon sa disenyo ng web ay natanggap ang pangalan nito dahil sa ideya ng layout ng isang site na tumutugon sa iba't ibang mga laki ng screen, ngunit maaari kang tumugon nang higit pa sa sukat ng screen. Pagbuo sa nakaraang halimbawa ng paggamit ng mga lakas at kahinaan ng isang aparato, maaari mong gamitin ang mga iyon, pati na rin ang iba pang data tulad ng petsa at oras, upang talagang i-customize ang isang karanasan sa website.
Isipin ang isang website para sa isang malaking kaganapan sa trade show. Habang ang isang tumutugon na website ay magbabago ang layout ng mga pahina ng site upang masukat sa iba't ibang mga screen, maaari mo ring gamitin ang petsa upang matukoy kung anong nilalaman ang pinakamahalaga upang maipakita. Kung ito ang tagal ng panahon bago ang kaganapan, malamang na nais mong ipakita ang impormasyon ng pagpaparehistro. Kung, gayunpaman, ang kaganapan ay aktwal na nangyayari sa sandaling iyon, ang pagpaparehistro ay maaaring hindi ang pinakamahalagang nilalaman. Sa halip, maaari mong ipasiya ang iskedyul ng araw ng mga kaganapan ay mas kritikal dahil ito ay mas may kaugnayan sa agarang pangangailangan ng gumagamit.
Ang pagkuha ng mga bagay nang higit pa sa isang hakbang, maaari kang mag-tap sa GPS ng isang aparato upang matukoy kung saan talaga sila nasa trade show. Maaari kang magbigay sa kanila ng interactive na nilalaman batay sa kanilang lokasyon, na nagpapakita sa kanila ng malapit na booths o mga sesyon tungkol sa upang makapagsimula.
5. Accessibility
Ang pangwakas na halimbawa ay titingnan natin kung paano ang isang site ay maaaring tunay na tumugon sa mga pangangailangan ng isang bisita ay mag-isip tungkol sa accessibility ng website . Ang mga website ay dapat magamit ng maraming tao hangga't maaari, kabilang ang mga may kapansanan. Ang iyong website ay dapat magamit ng isang tao na nangangailangan ng isang screen reader o iba pang tinulungan software upang ma-access ang nilalaman nito. Sa ganitong paraan, ang iyong site ay tumutugon sa kanilang mga pangangailangan dahil natiyak mo na ang karanasan, habang naiiba para sa mga hindi pinagana ng mga bisita, ay angkop pa rin.
Sa pamamagitan ng pagtugon sa maraming mga punto ng data hangga't maaari, at hindi lamang laki ng screen, ang isang website ay maaaring maging higit pa sa "mobile friendly". Maaari itong maging isang tunay na tumutugon karanasan sa bawat kahulugan ng parirala.