Paano gawing tumutugon ang isang website?

Sa demokratisasyon ng mga smartphone at tablet, paggawa ng website nakikiramay naging mahalaga. Ang isang tumutugon na site ay awtomatikong makakaangkop sa iba't ibang mga device sa pagba-browse - desktop, mobile, tablet – upang magbigay ng pinakamainam na karanasan ng user. Ang isang tumutugon na website ay mainam din para sa pagtukoy sa web.

Ayon sa Google, higit sa 60% ng mga paghahanap ay ngayon isinasagawa mula sa isang mobile. Samakatuwid, kinakailangang i-optimize ang iyong site para sa mga device na ito, kung hindi ay bababa ang iyong trapiko. Gayunpaman maraming mga site ay hindi pa rin idinisenyo nang adaptive.

Sa ngayon, ang disenyo ng tinatawag na "mga web site"nakikiramay” (o madaling ibagay) ay naging mahalaga. Ngunit ano nga ba ang ibig sabihin nito? Paano mo talaga gagawin ang isang website na na-optimize para sa lahat ng laki ng screen?

Ang tumutugon na disenyo ay binubuo ng paglikha ng isang site na may kakayahang awtomatikong umangkop sa mga tuntunin ng layout at mga sukat upang mag-alok ng pinakamainam na karanasan ng user sa lahat ng device: mga desktop 🖥️, mga tablet 💻, mga smartphone 📱.

Narito ang mga pangunahing pinakamahuhusay na kagawian na ilalagay upang lumikha ng perpektong tumutugon na site:

🚀 Gumamit ng mga kaugnay na unit (%, em, rem) sa halip na mga pixel sa CSS

Upang payagan ang ganap na kakayahang umangkop ng mga elemento, inirerekumenda na gumamit ng mga kamag-anak na yunit ng pagsukat tulad ng %, em o rem sa halip na mga nakapirming pixel sa iyong mga panuntunan sa CSS. Ang mga porsyento ay nagbibigay-daan sa awtomatikong pagbabago ng laki batay sa laki ng screen.

Isa sa mga pangunahing pinakamahusay na kagawian para sa ang paglikha ng tumutugon na site ay upang maiwasan upang gumamit ng mga nakapirming pixel sa iyong mga panuntunan sa CSS. Sa katunayan, hindi pinapayagan ng mga pixel ang laki ng mga elemento na iakma depende sa device.

Inirerekomenda na paboran ang tinatawag na relative units like mga porsyento (%), em o rem sa lugar. Ang % sa partikular ay magbibigay-daan sa awtomatikong pagbabago ng laki ng mga kahon, teksto, margin, atbp. depende sa laki ng screen.

Halimbawa, isang lapad na nakatakda sa 50% sa CSS titiyakin na ang elemento ay palaging kukuha ng 50% ng magagamit na lapad, kung sa isang PC, tablet o smartphone screen. Ang tuluy-tuloy na diskarte na ito ay perpekto para sa paglikha ng mga nababaluktot na layout na perpektong umaangkop.

🚀 Tukuyin ang mga query sa media sa CSS style sheet

Ang mga query sa media ng CSS ay mahahalagang tagubilin para sa lumikha ng tumutugon na website. Nagbibigay-daan sa iyo ang mga ito na tukuyin ang mga partikular na panuntunan ng CSS na ilalapat depende sa lapad ng display window (viewport).

Madali mong matukoy ang mga layout, font, margin, atbp. iba depende sa kung ang user ay nasa desktop computer, tablet o smartphone. Halimbawa, maaari nating tukuyin iyon sa mas mababa sa 768px ang lapad, mga pagbabago sa nabigasyon sa menu ng hamburger.

Nagbibigay-daan sa iyo ang mga query sa media na maayos na iakma ang pag-render at pag-aayos ng mga elemento depende sa laki ng screen. Kasama ng mga flexible na CSS unit, mahalaga ang mga ito para sa lumikha ng isang perpektong site tumutugon at nagbibigay ng pinakamahusay na karanasan ng user.

🚀 Gawing tumutugon ang mga larawan

Ang mga imahe ay dapat din ibagay upang pigilan ang mga ito mula sa pag-unat nang hindi katumbas sa ilang partikular na device. Dapat samakatuwid i-optimize ang iyong mga larawan para sa SEO. Ang isang simpleng pinakamahusay na kasanayan ay upang itakda ang kanilang lapad bilang isang porsyento sa HTML code o sa pamamagitan ng CSS.

Magagamit din natin ang CSS property "max-width: 100%" upang ang imahe ay umangkop sa lalagyan nito habang pinapanatili ang mga proporsyon nito. Inirerekomenda din na tukuyin ang ilang mga bersyon ng parehong imahe sa iba't ibang mga resolusyon at upang ipahiwatig sa browser kung aling bersyon ang ihahatid depende sa laki ng screen sa pamamagitan ng "attribute".srcset".

Bilang tumutugon, ang mga imahe ay dapat na awtomatikong baguhin ang laki sa halip na lumalawak, upang matiyak ang pinakamainam na kalidad sa lahat ng mga device.

🚀 Gumamit ng tumutugon na CSS framework

Ang paggamit ng tumutugong CSS framework ay isa sa mga pinakamahusay na kagawian para sa paggawa ng isang website na tumutugon. Ang mga CSS framework tulad ng Bootstrap, Foundation, Bulma, at Materialize ay nag-aalok ng mga paunang natukoy na layout grid at tumutugon na mga bahagi na nagpapadali sa paggawa ng tumutugon na website.

Nagbibigay ang mga framework na ito ng mga class na CSS na handa nang gamitin na nagbibigay-daan sa iyong lumikha ng mga layout nababaluktot at tumutugon na pahina. Gumagamit sila ng mga diskarte tulad ng mga query sa media upang awtomatikong ayusin ang layout at istilo batay sa laki ng screen ng device na ginamit upang tingnan ang site.

Sa pamamagitan ng paggamit ng tumutugong CSS framework, mabilis kang makakapag-set up ng pangunahing istraktura para sa iyong website na maayos na umaangkop sa iba't ibang device at laki ng screen. Madali mong maisaayos ang mga elemento ng iyong site gamit ang mga grids na ibinigay ng framework, na nagbibigay-daan para sa pare-parehong layout sa lahat ng device.

🚀 Pagsubok sa pag-render sa lahat ng device

Mahalagang subukan ang pagpapakita ng iyong website sa mga computer, tablet at smartphone upang matiyak na perpektong umaangkop ito sa bawat lapad ng screen.

Karamihan sa mga modernong browser, tulad ng Google Chrome at Mozilla Firefox, nag-aalok ng pinagsamang mga tool sa pag-unlad. Nagbibigay-daan sa iyo ang mga tool na ito na gayahin ang iba't ibang mga device at laki ng screen upang mailarawan ang pag-render ng website. Maa-access mo ang mga tool na ito sa pamamagitan ng pag-right click sa page at pagkatapos ay piliin ang “siyasatin"o"Suriin ang elemento".

May mga libreng online na serbisyo tulad ng BrowserStack at CrossBrowserTesting na nagbibigay-daan sa iyong subukan ang pag-render ng isang website sa iba't ibang uri ng mga device at browser. Binibigyang-daan ka ng mga serbisyong ito na tingnan ang iyong website sa iba't ibang virtual o pisikal na device, na nagbibigay sa iyo ng malinaw na ideya kung ano ang magiging hitsura nito sa bawat device.

Ang mga emulator at simulator ng device ay software na ginagaya ang mga katangian at gawi ng mga tunay na device. Halimbawa, upang subukan sa iOS, maaari mong gamitin ang Xcode emulator para sa mga Apple device.

Para sa Android, available ang Android Studio emulator. Nagbibigay-daan sa iyo ang mga tool na ito na subukan ang iyong website sa mga virtual na device na may iba't ibang resolution ng screen.

🚀 Iwasan ang mga elemento ng fixed size

Upang gawing tumutugon ang isang website, mahalagang maiwasan ang mga elementong nakapirming laki. Narito ang ilang mga tip upang makamit ito:

Gumamit ng mga nababaluktot na yunit ng pagsukat: Sa halip na gumamit ng mga pixel (px) upang tukuyin ang laki ng mga elemento, sa halip ay gumamit ng mga flexible na unit ng pagsukat gaya ng mga porsyento (%) o viewport unit (vh, vw). Nagbibigay-daan ito sa mga elemento na mag-scale nang proporsyonal sa laki ng screen.

Gumamit ng mga nababaluktot na rack: Ang mga flexible grids, tulad ng mga ibinigay ng tumutugon na CSS frameworks, ay nagbibigay-daan sa iyong lumikha ng mga adaptive na layout gamit ang mga flexible na column at row. Nagbibigay-daan ito sa mga elemento na awtomatikong muling ayusin ang kanilang mga sarili batay sa laki ng screen, na nagbibigay ng pare-parehong karanasan ng user sa lahat ng device.

Iwasan ang mga nakapirming lapad para sa mga larawan: Sa halip na tumukoy ng nakapirming lapad para sa mga larawan, gamitin ang CSS property na "max-width: 100%;" upang payagan ang mga larawan na mag-resize nang proporsyonal sa laki ng kanilang lalagyan. Tinitiyak nito na ang mga imahe ay umaangkop nang tama sa iba't ibang mga aparato nang hindi umaapaw o nakakadistort.

Gamitin ang mga query sa media: Ang mga query sa media ay mga panuntunan ng CSS na nagbibigay-daan sa iyong maglapat ng iba't ibang istilo depende sa laki ng screen. Gamitin ang mga ito para isaayos ang istilo ng mga elemento para sa iba't ibang resolution ng screen para ma-optimize ang pagtingin sa bawat device.

🚀 Pasimplehin ang mobile navigation

Upang gawing simple ang mobile navigation at magbigay ng mas magandang karanasan ng user, narito ang ilang tip na dapat sundin:

Gumamit ng mobile navigation menu: Palitan ang tradisyonal na menu ng nabigasyon ng isang menu ng mobile nabigasyon, gaya ng menu ng hamburger. Nakakatulong ang ganitong uri ng menu na bawasan ang kalat ng screen at ginagawang mas madaling maunawaan ang nabigasyon para sa mga mobile user.

Limitahan ang bilang ng mga elemento ng nabigasyon: Bawasan ang bilang ng mga item sa nabigasyon na ipinapakita sa menu ng mobile. Tukuyin ang pinakamahalagang elemento at tumuon sa mga ito para sa mas madaling pag-navigate. Maaari ka ring magpangkat ng mga katulad na item sa ilalim ng mga kategorya upang maiwasan ang mahabang menu.

Gumamit ng single-level navigation : Iwasan ang mga kumplikadong drop-down na menu na may maraming antas ng submenus sa mga mobile device. Sa halip, mag-opt para sa single-level navigation, kung saan ang mga user ay maaaring direktang mag-navigate sa mga pangunahing seksyon ng site nang hindi kinakailangang mag-navigate sa maraming antas.

Gumamit ng malinaw na mga pindutan ng pagkilos: Gumamit ng malinaw, madaling naki-click na mga button ng pagkilos upang gabayan ang mga user sa mga partikular na pagkilos, tulad ng pagdaragdag ng produkto sa cart o pagsusumite ng form. Tiyaking sapat ang laki ng mga button para madaling ma-tap gamit ang iyong daliri.

Gumamit ng mga intuitive na icon: Gumamit ng mga nakikilalang icon upang kumatawan sa mga aksyon o kategorya sa menu ng mobile navigation. Ang mga icon na mahusay na idinisenyo ay makakatulong sa mga user na mabilis na maunawaan ang kahulugan ng mga elemento ng nabigasyon nang hindi kinakailangang magbasa ng mahahabang label.

🚀 Pagsasara

Ang disenyo ng Ang mga tumutugon na site ay naging isang pangangailangan upang magbigay ng kalidad na karanasan ng user sa lahat ng device.

Sa pamamagitan ng pagsunod sa pinakamahuhusay na kagawian gaya ng paggamit ng mga flexible na unit ng CSS, pagpapatupad ng mga query sa media o pag-optimize ng mga larawan, ang anumang website ay maaaring ganap na maiangkop.

Salamat sa ilang simpleng panuntunang ito, magagarantiyahan mo ang pinakamainam na pagpapakita ng iyong website sa mga desktop computer, tablet at smartphone. Wala nang pag-zoom in at out para sa kumportableng nabigasyon!

Upang pumunta pa, inirerekomenda ko ang paggamit ang makapangyarihang WP Rocket plugin sa WordPress. Papayagan ka nitong mag-optimize hangga't maaari ang bilis ng paglo-load ng iyong site tumutugon. Ang isang site na parehong adaptive at napakabilis ay ang susi sa karanasan ng gumagamit hindi nagkakamali!

FAQ

Q: Ano ang tumutugon na disenyo?

A: Ang nakikiramay disenyo ay isang web design approach na naglalayong gumawa ng website adaptive at functional sa lahat ng device at laki ng screen. Nagbibigay-daan ito sa content at layout na awtomatikong mag-adjust para makapagbigay ng pinakamainam na karanasan ng user, sa desktop man, tablet o smartphone.

T: Bakit mahalagang gawing tumutugon ang isang website?

A: Ang paggawa ng isang website na tumutugon ay mahalaga sa pagbibigay ng pare-pareho, de-kalidad na karanasan ng user sa lahat ng device. Sa pagtaas ng paggamit ng mga mobile device, mahalagang iangkop ang iyong website upang matugunan ang mga inaasahan ng user at mapabuti ang iyong mga ranggo sa search engine.

T: Ano ang mga pangunahing prinsipyo ng tumutugon sa pagbuo ng web?

A: Kasama sa mga pangunahing prinsipyo ng tumutugon na web development ang paggamit ng mga flexible grids, pag-iwas sa mga elementong nakapirming laki, pag-adapt ng mga larawan, paggamit ng mga query sa media upang maglapat ng iba't ibang istilo depende sa laki ng larawan. screen, at ang pagpapasimple ng nabigasyon sa mobile.

Q: Ano ang tumutugon na CSS framework?

A: A Balangkas ng CSS Ang tumutugon ay isang hanay ng mga paunang ginawang istilo ng CSS at tumutugon na mga bahagi na nagpapadali sa paggawa ng tumutugon na website. Ang mga framework na ito, gaya ng Bootstrap, Foundation, at Bulma, ay nagbibigay ng mga flexible na layout grids, ready-to-use na CSS classes, at tumutugon na mga bahagi upang mapabilis ang proseso ng pag-develop.

T: Paano ko susuriin kung paano nagre-render ang isang website sa iba't ibang device?

A: Upang subukan kung paano nagre-render ang isang website sa iba't ibang device, maaari mong gamitin ang mga tool ng developer ng browser na nagbibigay-daan sa iyong gayahin ang iba't ibang laki ng screen. Maaari ka ring gumamit ng mga online na serbisyo, mga emulator ng device o simulator, o pagsubok sa mga totoong pisikal na device.

Q: Ano ang mga pinakamahusay na kagawian para sa pagpapasimple ng mobile navigation?

A: Para gawing simple ang mobile navigation, gumamit ng mobile navigation menu gaya ng hamburger menu, limitahan ang bilang ng mga navigation item, gumamit ng single-level navigation, gumamit ng malinaw na action button, mag-optimize para sa bilis ng pag-load, gumamit ng intuitive na mga icon at regular na subukan ang navigation sa iba't ibang mga device.

Q: Paano ko gagawing tumutugon ang aking kasalukuyang website?

A: Upang gawing tumutugon ang iyong kasalukuyang website, maaari kang gumamit ng tumutugon na CSS framework upang gawing mas madali ang pag-set up ng adaptive na istraktura. Kakailanganin mo ring baguhin ang umiiral nang CSS code upang gumamit ng mga flexible na unit ng pagsukat, maiwasan ang mga elementong nakapirming laki, at maglapat ng mga partikular na istilo sa iba't ibang laki ng screen gamit ang mga query sa media.