Kapag nagdidisenyo ng iyong website, mahalagang tiyakin na maganda ang hitsura nito sa anumang aparato, anuman ang laki at hugis ng screen. Ang mga tumutugong website ay idinisenyo upang magmukhang maganda sa lahat ng uri ng mga modernong aparato tulad ng mga computer, telepono, tablet, TV, naisusuot, at maging mga screen ng kotse. Upang gawing tumutugon ang isang website, kakailanganin mong baguhin ang iyong CSS at HTML code upang awtomatikong baguhin ang laki ng mga elemento nito depende sa mga tukoy na kundisyon. Itinuturo sa iyo ng wikiHow na ito kung paano magplano at magpatupad ng pangunahing tumutugong disenyo ng web.
Mga hakbang
Paraan 1 ng 3: Pagpaplano ng tumutugong Disenyo
Hakbang 1. Alamin kung paano ginagamit ng iyong madla ang iyong website
Sa mga panahong ito, ang karamihan sa mga taong nagba-browse sa web ay ginagawa ito mula sa mga mobile phone at tablet. Upang maging isang tumutugon ang isang site, dapat mong tiyakin na nagpapakita ito ng maayos kahit saan ito tiningnan. Kung ang oras at pera ay may kakanyahan, tumuon sa mga uri ng mga aparato na pinaka-tanyag sa iyong mga gumagamit (kung magagamit ang impormasyong ito) at kung paano nila ginagamit ang iyong site. Gamit ang iyong analytics software o ilang iba pang uri ng pagsasaliksik, alamin:
- Anong mga uri ng mga aparato ang madalas nilang ginagamit upang tingnan ang website, na nagbibigay ng espesyal na pansin sa mga tatak ng mobile phone / tablet / computer at laki ng screen / resolusyon.
- Ano ang pinakapopular ng mga browser sa iyong mga gumagamit. Hanggang sa nababahala ang mga pandaigdigang istatistika, ang Google Chrome ay ang pinakatanyag na web browser sa buong mundo, ngunit ang Safari ay isang malapit na segundo.
- Paano ginagamit ng iyong mga bisita ang iyong website, tulad ng kung gaano karaming oras ang ginugugol nila sa pagtingin dito, kung saan nila ito tinitingnan, at aling nilalaman ang pinaka-tanyag. Matutulungan ka nitong matukoy kung aling uri ng nilalaman ang mahalagang isama at alin ang maaaring alisin.
Hakbang 2. Magdisenyo ng iba't ibang mga layout para sa iba't ibang mga aparato
Maaari mong gamitin ang isang kumbinasyon ng CSS at JavaScript upang makita ang aparato ng isang gumagamit, pati na rin ang mga kakayahan (kung sinusuportahan nito ang Java, Flash, atbp.) At ipakita ang isang partikular na bersyon ng iyong site nang naaayon. Ang CSS Media Queries ay partikular na kapaki-pakinabang para sa pagtukoy ng laki / resolusyon ng aparato.
Hakbang 3. Mag-account para sa iba't ibang mga uri ng pakikipag-ugnayan
Ang iyong bisita ay maaaring nakikipag-ugnay sa iyong website gamit ang isang mouse, isang keyboard, isang touchscreen, o kahit isang screen-reader para sa mga taong may kapansanan sa paningin. Isinasaalang-alang ito, dapat tumugon ang iyong website sa mga pag-click sa mouse, mga keyboard key (Tab, Enter, Return, atbp.) At mga touch-screen na daliri.
Ang mga hover-over effect ay hindi gagana sa anumang bagay maliban sa isang mouse. Sa halip na gamitin ang mga epektong ito, maaari mong gamitin ang hilingin sa bisita na mag-click sa isang pindutan o icon upang ipakita ang anumang dating naipakita sa isang mouse hover
Hakbang 4. Isaalang-alang ang paggamit ng isang Content Management System (CMS)
Ang isang madaling paraan upang matiyak na tumutugon ang disenyo ng iyong site ay ang paggamit ng isang CMS na may paunang built na tumutugong tema. Ang paggamit ng isang CMS tulad ng Joomla, Drupal, o Wordpress ay nagbibigay-daan sa iyo upang matiyak na ang iyong website ay mukhang mahusay sa lahat ng mga aparato nang hindi kinakailangang i-code ang mga tumutugong elemento mismo. Sumangguni sa iyong webhosting provider upang makita kung aling mga tool ng CMS ang magagamit sa iyong serbisyo.
Hakbang 5. Gumamit ng mga tool sa online upang subukan ang iyong website
Ngayon na ang tumugon na disenyo ng web ay tumaas sa kasikatan, mayroong iba't ibang mga libreng tool na maaari mong gamitin upang subukan ang iyong website. Kung na-code mo na ang iyong website, gamitin ang mga tool na ito upang subukan kung paano ito nakikita sa iba't ibang mga kundisyon upang malaman mo kung saan mo kailangang mapabuti ang kakayahang tumugon:
- Mobile-Friendly Test ng Google: Ipapaalam sa iyo kung gumagana rin ang iyong site sa mga mobile device tulad ng ginagawa nito sa mga computer screen.
- resizeMyBrowser: Hinahayaan kang matingnan ang iyong site sa iba't ibang mga resolusyon.
- Responsiator: Ipinapakita ang iyong site sa iba't ibang mga screen ng aparato sa iba't ibang mga layout (patagilid o kanang-gilid-up).
Paraan 2 ng 3: Ginagawang tumutugon ang Layout ng Pahina
Hakbang 1. Isaalang-alang ang isang libreng tumutugon sa estilo ng sheet sheet
Ang isang balangkas ay isang paunang nakasulat na hanay ng HTML, CSS, at / o JavaScript na maaari mong gamitin bilang isang balangkas para sa iyong site. Ang mga Framework ay sinusubukan at na-optimize upang gumana sa lahat ng mga browser, kaya ang kailangan mo lang gawin ay ipasok ang iyong nilalaman, idagdag ang iyong media at mga kagustuhan sa kulay, at mai-publish ang iyong site. Ang ilang mga tanyag na balangkas ay:
- Bootstrap
- Balangkas
- Foundation
Hakbang 2. Itakda ang viewport gamit ang isang meta tag
Kung hindi ka gumagamit ng isang balangkas, gugustuhin mong magsimula sa pinakamahalagang aspeto ng pag-coding ng isang tumutugong website: ang Viewport. Ang viewport ay bahagi ng website na nakikita ng gumagamit. Ang susi sa pagpapakita ng maayos ng iyong site anuman ang laki ng screen ay sukatin ang laki ng viewport sa META tag. Upang magawa ito, isama ang tag na ito sa tuktok ng bawat pahina sa site:
Hakbang 3. Tukuyin ang laki ng teksto na may kaugnayan sa viewport
Sa sandaling ang iyong viewport ay itinakda, ang teksto sa iyong pahina ay sukatin upang magkasya sa screen. Gayunpaman, ang mga font ay maaaring magpakita ng masyadong malaki o masyadong maliit kung ang kanilang mga laki ay hindi tinukoy na nauugnay sa viewport. Maaari mo itong gawin sa pamamagitan ng pagtukoy sa laki ng font bilang isang tukoy na porsyento ng viewport sa unit ng vw. Sinasabi ng halimbawang ito ang mga header ng H1 upang ipakita sa 10% ng lapad ng viewport, hindi mahalaga ang laki nito:
wikiPaano
Hakbang 4. Gumamit ng mga query sa media upang ipakita ang iba't ibang mga estilo para sa iba't ibang laki ng screen
Pinapayagan ka ng mga query ng media na pumili kung magpapakita ng ilang mga elemento ng CSS depende sa laki ng screen. Maaari mong tukuyin ang mga detalye ng iyong query sa media sa iyong CSS file. Sa halimbawang ito, ang kulay ng background ng katawan ay magiging pula kung ang laki ng screen ng gumagamit ay 480px o mas malaki:
wikiPaano
@media screen at (min-width: 480px) {body {background-color: aqua; }}
Paraan 3 ng 3: Paggawa ng Mga Larawan na tumutugon
Hakbang 1. Gamitin ang pag-aari ng lapad ng CSS upang sukatin ang mga imahe
Sa halip na itakda ang lapad ng imahe sa isang tukoy na halaga ng mga pixel (hal., 500px), gumamit ng isang porsyento (hal., 100%) upang ang imahe ay tumingin sa lapad ng magulang nito at ayusin nang naaayon. Ang pagtatakda ng lapad ng isang imahe sa 100% ay pinipilit ang imahe na sukatin pataas at pababa depende sa laki ng screen ng manonood. Upang gawin ito sa linya:
Hakbang 2. Gamitin ang max-width na pag-aari upang limitahan ang pag-scale ng aktwal na laki ng imahe
Kung gagamitin mo ang lapad na pag-aari sa nakaraang hakbang upang sukatin ang isang imahe sa 100%, ang imahe ay lalago o lumiit upang magkasya sa 100% ng lalagyan nito hindi mahalaga ang laki. Nangangahulugan ito na kung ang imahe ay nasa mas maliit na bahagi, susukat ito nang mas malaki kaysa sa orihinal na laki at hitsura ng mas mababang kalidad. Upang maiwasang mangyari ito, gumamit ng maximum na lapad upang itakda ang maximum na laki ng pag-scale sa imahe sa 100% (ang aktwal nitong laki). Narito kung paano:
Hakbang 3. Gamitin ang elemento ng larawan ng HTML upang ipakita ang iba't ibang mga imahe sa iba't ibang laki ng screen
Kung nais mong lumikha ng mga pasadyang laki ng mga imahe upang ipakita sa iba't ibang laki ng mga screen, maaari mong tukuyin kung aling mga larawan ang ipapakita sa iyong HTML code. Lumikha ng iba't ibang laki ng mga imahe, at pagkatapos ay gamitin ang code na ito bilang isang halimbawa para sa pagtukoy ng aling imahe ang gagamitin sa 600px at 1500px na mga lapad na screen:
