Paano Gumawa ng Multi-Page Responsive Website

Pagpapaliwanag kung ano ang isang responsive website, at kung paano ka makakagawa nito gamit ang Dazzly.


Update - 07/12/2022 -

Mayroon na kaming karagdagang video resource na pinamagatang "Service Website - Single Service Page (Under 10 Minutes) [2022]" na isang walk-through tutorial kung paano gumawa ng multi-page responsive website, pakitingnan ang resource na ito sa ibaba:



Inaasahan naming magiging kapaki-pakinabang ang video na ito bilang pangunahing resource sa iyong pag-aaral kung paano gumawa ng multi-page responsive website. Hinihikayat ka naming ibahagi ito sa iba pang interesado.


Ano ang isang responsive website?

Sa kasalukuyan, kapag kailangan mong magkaroon ng website, maaaring magulat ka na kailangan mo ng kasiguraduhan kung paano ito magmumukha at gagana sa iba't ibang computer devices. Tulad ng alam mo, kailangang maging flexible ang mga website at kayang mag-adjust ng kanilang hitsura upang mag-match sa device ng viewer. Kung gumagamit ka ng napakaliit na screen ng mobile device, kailangang maipakita ng iyong website ang condensed view ng iyong mga heading, larawan at magkaroon pa rin ng malinaw na ruta papunta sa iyong mas detalyadong mga pahina. Kaya kapag nagbabalak kang gumawa ng website o naghahanap ng website designer, kailangang tiyakin mong makakakuha ka ng responsive website – o isang website na magre-respond sa iba't ibang laki ng screen at modelo ng computer o mobile device.

Ang Merriam-Webster ay naglalarawan ng responsive bilang – “nagbibigay ng tugon: bumubuo ng tugon” ang depinisyong ito ay malamang na nauna pa sa modernong pangangailangan para sa responsive website design, ngunit idinagdag din nila ang “mabilis tumugon o mag-react nang naaangkop o may simpatiya” at “gumagamit ng mga tugon” na tila akma sa konteksto [1].

Ang karaniwang laki ng screen para sa desktop computer ay 1920x1080, madalas na may maraming monitor ang mga desktop sa bahay at negosyo (sa kabutihang-palad, hindi pa natin kailangang madalas isaalang-alang ito). Sa mga tablet, maaari mong asahan ang mga screen resolution tulad ng 768x1024 at sa iba pang mobile devices maaari kang makakuha ng resolution na kasing liit ng 414x896 [2]

Ang methodology ng responsive website design ay tinutukoy bilang pagsasama ng kaalaman at karanasan sa responsive sa mga pangunahing desisyon sa disenyo ng website mula sa simula ng proseso. Ang resulta ay isang komprehensibo, adaptable na disenyo ng website na magre-respond at mag-aakomoda sa karamihan ng mga mobile device na maaaring gamitin ng iyong mga bisita sa website.

Kapag nagse-set up ng landing pages (home page) kailangang isaalang-alang ang bawat elemento – paano ito ilalagay sa malaking PC screen at paano natin magagawa ang minimal na bersyon ng elementong ito na gagana pa rin sa mobile screen. Anong mga elemento ang hindi kailangang agad makita? Anong mga elemento ang maaari nating ilipat sa menu upang makatipid ng mahalagang screen space? Ito ang mga uri ng tanong na tinatanong ng mga propesyonal na user interface (UI) designers sa kanilang sarili at eksaktong ito rin ang iniisip ng mga software at website designers.

Kapag gumagawa ka ng bagong seksyon sa website, maaaring mayroon kang maayos na function na magiging maganda para sa mga desktop user, ngunit kung ito ay umaasa sa isang interface element tulad ng drag-and-drop element, hindi ito gagana sa mga mobile device. Kaya, mula sa simula kailangan mong isaalang-alang kung maaari kang gumamit ng alternatibong mga elemento upang makamit ang parehong karanasan ngunit gagana rin sa lahat ng karaniwang device.


Bakit kailangan mong tiyakin na ang iyong website ay nagre-respond at gumagana sa maraming device?

Ang dahilan nito ay simple – nais mong magkaroon ng mas maraming tao ng magandang karanasan sa paggamit (UX) sa iyong website at nais mong bumalik sila at ideal na makipag-ugnayan sa iyo tungkol sa iyong mga serbisyo o bumili ng produkto. Ang mas maraming tao na makaka-access sa iyong website, dahil sa pagiging responsive nito, mas malaki ang potensyal na direktang consumer orders na maaari mong maibigay. Tradisyonal, ang mga eksperto na may karanasan sa paggawa ng multi-page responsive website ay kailangang panatilihin ang mga nabanggit na konsiderasyon sa unahan ng kanilang isipan upang matiyak na gumagana ang lahat nang maayos at nagbibigay ito ng mahusay na karanasan sa gumagamit. Gayunpaman, tulad ng makikita mo ngayon, mayroong ilang responsive website builders na mag-aalis ng lahat ng teknikal na kaalaman at abala mula sa iyong mga kamay.


Kailangan mo ba ng responsive website upang maging kompetitibo online sa 2022?

Hindi alintana ang antas ng kompetisyon sa merkado na iyong pinaglilingkuran, kakailanganin mo ng responsive website builder software upang makagawa ng responsive website upang mauna ka. Walang tanong na ang pagkuha ng visibility, impressions at clicks para sa iyong website sa iyong lokal na lugar ay palaging isang hamon sa modernong panahon, ngunit sa paggamit ng Dazzly, tinitiyak mong ang iyong website ay pre-made na at patuloy na ina-update upang matiyak na ito ay nagre-respond sa karamihan ng consumer devices sa buong mundo.

Ang kasalukuyang mga pagtatantya ay nagpapakita na ang malaking bahagi ng mga gumagamit ng website sa Pilipinas ay nagba-browse gamit ang kanilang mga mobile device [2], kaya't napakahalaga na ang iyong website ay kayang mag-respond sa lahat ng laki ng screen na maaaring gamitin ng mga bisita. Kamakailan lamang noong 2021, isang survey ng Pew Research Centre ang nagpapakita na 15% ng lahat ay walang broadband internet sa bahay at gumagamit ng kanilang mobile device sa halip [3]. Pinaghihinalaan namin na ang mga tao sa mga residential homes ay magkakaroon ng broadband at mobile internet options, partikular sa mga apartment o condominium residences.

 

8 Hakbang sa Paggawa ng Multi-Page Responsive Website

Para sa mas komprehensibong outline ng mga hakbang sa paglulunsad ng responsive, multi-page website, mangyaring sumangguni sa aming mobile website builder guide.

 

1.      Mag-sign up para sa libreng trial ng Dazzly

2.      Piliin ang ‘Service Warrior 2’ website template

3.      Ilagay ang iyong logo, at mga kulay ng brand

4.      Maglagay ng ilang mga larawan

a.      Maaaring gawin ito nang direkta mula sa iyong Android o iPhone mobile device para sa karagdagang kaginhawaan.

5.      Mag-type ng kaunting teksto

6.      Pindutin ang ‘Publish’

7.      Maghintay at tingnan ang iyong ‘Preview Website’

8.      I-load ang iyong Preview Website URL sa iyong Desktop PC, Laptop at mga mobile device.

a.      Tiyakin na ang website ay mukhang maayos sa lahat ng device

b.      Tiyakin na ang mga pangunahing contact elements ay nananatiling nakikita/madaling ma-access

c.      Subukan ang ilang bagay upang makasiguro (sanity check)


Kung ayaw mong isagawa ang mga hakbang na ito kaagad, mangyaring magpatuloy sa pagbabasa para sa mga halimbawa ng screenshot na nagpapakita ng responsive capabilities ng mga website na ito.


Tulad ng makikita mo sa mga sumusunod na larawan, ang kaalaman kung paano gumawa ng multi-page responsive website ay na-capture at na-embed sa Dazzly website creation system upang awtomatiko mong ma-enjoy ang mga benepisyo nang hindi kinakailangang mag-invest ng taon ng karanasan sa pag-aaral ng teknikal na kahirapan at nuances. Ang Dazzly ay labis na ipinagmamalaki ang katotohanang ito at nais gamitin ang software na ito upang matulungan ang maraming negosyo sa Pilipinas hangga't maaari!


Figure #1 - Halimbawa ng isang construction website na ginawa sa Dazzly – ipinakita para sa PC/Desktop resolution

 

Figure #2 - Ang parehong construction website na ipinakita sa isang Tablet (iPad Air). Pansinin kung paano nagre-respond ang mga elemento sa pagbabago ng screen resolution

 

Figure #3 - Ang parehong construction website na ipinakita sa isang Mobile Device (iPhone SE)

a.      Pansinin ang responsiveness properties ng website at kung paano ang ilang mga elemento ay nakatago mula sa agarang view upang mapanatili at magamit nang husto ang limitadong bilang ng pixels na magagamit sa screen.

b.      Pansinin ang karagdagang response ng website sa pagbabago ng ilang functionality tulad ng pag-disable ng overlaying call-to-action prompt na magiging napaka-distracting, tatakpan ang dating usable space ng website at lubos na makakabawas sa user experience mula sa kasiyahang gamitin ang website na ito.


Ipinapakita nito na, sa loob lamang ng ilang minuto, maaari kang gumawa ng multi-page website na nagre-respond sa iba't ibang screen ng mobile device gamit ang aming no-code website maker solution. Kahit na kailangan mo ng isang ecommerce website o isang multi-page service website upang i-highlight ang hanay ng trabaho na maaari mong gawin, mayroon nang mga responsive website builder options na magagamit.


Sa konklusyon, kahit nasaan ka man sa Pilipinas, nararapat kang magkaroon ng isang kamangha-manghang website, at ngayon maaari kang magkaroon ng kumpiyansa na alam mo kung paano gumawa ng multi-page responsive website. Ang Dazzly ang pinakamahusay na responsive website builder – bawat template ay optimized at regular na ina-update upang pinakamahusay na mag-respond sa pinakabagong laki ng screen ng device sa merkado. Kung sakaling makita mong hindi gumagana ang iyong website para sa isang partikular na device, hinihikayat ka naming i-report ito sa support@dazzly.co at maglalabas kami ng update sa tamang panahon upang mapabuti ang responsiveness ng website. Ang aming development team ay napakaseryoso at mapagbantay tungkol sa mga ganitong update.


Mga Sanggunian


[1]        Merriam-Webster – ‘Responsive Definition & Meaning’ (https://www.merriam-webster.com/dictionary/responsive).


[2]        statcounter –‘Desktop Screen Resolution Stats United States of America’ – ‘May 2021 - May 2022’ (https://gs.statcounter.com/screen-resolution-stats/desktop/united-states-of-america).


[3]        Pew Research Centre – ‘Mobile Fact Sheet’ (https://www.pewresearch.org/internet/fact-sheet/mobile/).   Published 7th April 2021. Accessed 18th June 2022.