Ano ang Disenyong Tumutugon? (Paliwanag ng Video at Infographic)

tumutugon sa disenyo ng web

Tumagal ng isang dekada para sa tumutugon sa disenyo ng web (RWD) upang maging mainstream mula noon Cameron Adams unang ipinakilala ang konsepto. Ang ideya ay mapanlikha - bakit hindi namin mai-disenyo ang mga site na umangkop sa viewport ng aparato kung saan ito tiningnan?

Ano ang Disenyong Tumutugon?

Ang tumutugong disenyo ng web (RWD) ay isang diskarte sa disenyo ng web na naglalayon sa paggawa ng mga site upang makapagbigay ng isang pinakamainam na karanasan sa pagtingin - madaling pagbabasa at pag-navigate na may isang minimum na pagbabago ng laki, pag-pan, at pag-scroll sa buong malawak na hanay ng mga aparato (mula sa mga mobile phone hanggang sa desktop computer mga monitor). Ang isang site na dinisenyo kasama ang RWD ay umaangkop sa layout sa pagtingin sa kapaligiran sa pamamagitan ng paggamit ng likido, mga proporsyon na batay sa proporsyon, mga kakayahang umangkop na mga imahe, at mga query sa media ng CSS3, isang extension ng panuntunan sa @media.

Wikipedia

Sa madaling salita, ang mga elemento tulad ng mga imahe ay maaaring ayusin pati na rin ang layout ng mga elementong iyon. Narito ang isang video na nagpapaliwanag kung ano ang tumutugong disenyo pati na rin kung bakit dapat itong ipatupad ng iyong kumpanya. Kamakailan-lamang na binuo namin ang Highbridge site na maging tumutugon at ngayon ay gumagana Martech Zone upang gawin ang parehong!

Ang pamamaraan ng pagbuo ng isang tumutugon sa isang site ay medyo nakakapagod dahil kailangan mong magkaroon ng isang hierarchy sa iyong mga istilo na naayos batay sa laki ng viewport.

May kamalayan ang mga browser sa kanilang laki, kaya't ikinakarga nila ang styleheet mula sa itaas hanggang sa ibaba, na hinihiling ang mga naaangkop na estilo para sa laki ng screen. Hindi ito nangangahulugan na kailangan mong mag-disenyo ng iba't ibang mga styleheet para sa bawat laki ng screen, kailangan mo lamang ilipat ang mga kinakailangang elemento.

Ang pagpapatakbo na may isang pang-mobile na kaisipan ay ang batayan sa ngayon. Ang mga tatak na pinakamahusay na klase ay iniisip hindi lamang tungkol sa kung ang kanilang site ay mobile-friendly ngunit tungkol sa buong karanasan sa customer.

Lucinda Duncalfe, Monetate CEO

Narito ang isang infographic mula sa Monetate na naglalarawan ng mga potensyal na benepisyo ng paglikha ng isang tumutugong disenyo para sa maraming mga aparato:

Tumutugon sa Infographic ng Disenyo sa Web

Kung nais mong makita ang isang tumutugong site sa pagkilos, ituro ang iyong Google Chrome browser (naniniwala akong may parehong tampok ang Firefox) upang Highbridge. Piliin ngayon Tingnan> Developer> Mga Tool ng Developer mula sa menu. Maglo-load ito ng isang pangkat ng mga tool sa ilalim ng browser. Mag-click sa maliit na icon ng mobile sa kaliwang bahagi ng menu ng Mga Tool ng Developer.

tumutugon-pagsubok-chrome

Maaari mong gamitin ang mga pagpipilian sa nabigasyon sa itaas upang baguhin ang view mula sa tanawin patungo sa portrait, o pumili pa ng anumang bilang ng mga naka-preprogram na laki ng viewport. Maaaring kailanganin mong i-reload ang pahina, ngunit ito ang pinaka-cool na tool sa mundo para sa pag-verify ng iyong mga tumutugong setting at tiyaking maganda ang hitsura ng iyong site sa lahat ng mga aparato!

3 Comments

  1. 1
  2. 2

    Maraming salamat Douglas para sa mahusay na ipinaliwanag na artikulong ito. Dapat akong sumasang-ayon dito sa bahagi ng nilalaman ng mga bagay. Para sa karamihan ng mga site na gumawa kami ng isang tumutugong layout ay hindi sapat. Kailangan namin ng tumutugong nilalaman. Ngunit para sa mas pangunahing mga website sigurado kaming gagamitin namin ang iyong dokumentadong mabuti sa kung paano ito hawakan!

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.