Ang unang bagay na itinuturing ng karamihan sa mga taga-disenyo kapag ang pagtatayo ng kanilang web page ay kung ano ang disenyo para sa disenyo. Ang tunay na halaga nito ay ang pagpapasya kung gaano kalaki ang dapat mong disenyo. Wala nang gayong bagay bilang isang karaniwang lapad ng website.
Bakit Isaalang-alang ang Resolusyon
Noong 1995, ang standard 640x480 na sinusubaybayan ang resolusyon ay ang pinakamalaking at pinakamahusay na sinusubaybayan na magagamit. Nangangahulugan ito na ang mga taga-disenyo ng web ay nakatutok sa paggawa ng mga pahina na mukhang maganda sa mga web browser na napakinabangan sa isang 12-inch sa 14-inch monitor sa resolusyon na iyon.
Ang mga araw na ito, ang resolution ng 640x480 ay bumubuo ng mas mababa sa 1 porsiyento ng karamihan sa trapiko ng website. Gumagamit ang mga tao ng mga computer na may mas mataas na resolusyon kabilang ang 1366x768, 1600x900 at 5120x2880. Sa maraming mga kaso, ang pagdidisenyo para sa isang 1366x768 resolution screen ay gumagana.
Kami ay sa isang punto sa kasaysayan ng disenyo ng web kung saan hindi namin mag-alala magkano ang tungkol sa resolution. Karamihan sa mga tao ay may malalaking, malawak na screen monitor at hindi nila pinalaki ang kanilang browser window. Kaya kung nagpasya kang mag-disenyo ng isang pahina na hindi hihigit sa 1366 na mga pixel ang lapad, ang iyong pahina ay maaaring magmukhang maganda sa karamihan sa mga window ng browser kahit na sa mga malalaking monitor na may mas mataas na resolution.
Lapad ng Browser
Bago ka umalis na nag-iisip "okay, kukunin ko ang aking mga pahina ng 1366 na pixel ang lapad," may higit sa kuwentong ito. Ang isang madalas na overlooked isyu kapag nagpasya ang lapad ng isang pahina ng web ay kung gaano kalaki ang iyong mga customer panatilihin ang kanilang mga browser. Sa partikular, pinalaki ba nila ang kanilang mga browser sa isang full-screen size o ginagawa ba nila itong mas maliit kaysa sa buong screen?
Sa isang di-pormal na surbey ng mga katrabaho na lahat ay gumamit ng laptop na resolusyon ng kumpanya na may standard na 1024x768, pinananatili ng dalawa ang lahat ng kanilang mga application na pinalaki. Ang iba ay may iba't ibang laki ng mga bintana na bukas para sa iba't ibang mga kadahilanan. Ipinakikita nito na kung ikaw ay nagdidisenyo ng intranet ng kumpanya sa malawak na 1024 pixel, 85 porsiyento ng mga gumagamit ay kailangang mag-scroll nang pahalang upang makita ang buong pahina.
Pagkatapos mong i-account para sa mga customer na maximize o hindi, isipin ang tungkol sa mga border ng browser. Ang bawat web browser ay may scroll bar at hangganan sa mga gilid na pag-urong ang magagamit na espasyo mula sa 800 hanggang sa paligid ng 740 pixels o mas kaunti sa mga resolution ng 800x600 at sa paligid ng 980 na pixel sa mga na-maximize na mga bintana sa 1024x768 na resolution. Ito ay tinatawag na browser na "chrome" at maaaring tumagal ang layo mula sa magagamit na espasyo para sa iyong disenyo ng pahina.
Mga Fixed o Liquid Width Pages
Ang aktwal na lapad ng numero ay hindi ang tanging bagay na kailangan mong isipin ang tungkol sa pagdidisenyo ng lapad ng iyong website. Kailangan mo ring magpasya kung magkakaroon ka ng isang nakapirming lapad o lapad ng likido . Sa ibang salita, itatakda mo ba ang lapad sa isang tiyak na bilang (fixed) o sa isang porsyento (likido)?
Fixed Width
Ang mga nakapirming lapad na pahina ay eksakto tulad ng tunog nila. Ang lapad ay naayos sa isang partikular na numero at hindi nagbabago kahit paano malaki o maliit ang browser. Ito ay maaaring maging mabuti kung kailangan mo ang iyong disenyo upang tumingin nang eksakto pareho kahit gaano kalawak o paliitin ang mga browser ng iyong mga mambabasa, ngunit ang paraan na ito ay hindi isinasaalang-alang ang iyong mga mambabasa. Ang mga taong may mga browser ay mas makitid kaysa sa iyong disenyo ay kailangang mag-scroll nang pahalang, at ang mga taong may malawak na mga browser ay magkakaroon ng maraming walang laman na puwang sa screen.
Upang lumikha ng mga nakapirming lapad na pahina, gamitin lamang ang mga tukoy na numero ng pixel para sa mga lapad ng mga dibisyon ng iyong pahina.
Liquid Lap
Ang mga pahina ng lapad ng likido (kung minsan ay tinatawag na mga pahina ng lapad ng flexible) ay nagbabago sa lapad depende sa kung gaano kalawak ang window ng browser. Pinapayagan ka nito na mag-disenyo ng mga pahina na higit na nakatuon sa iyong mga customer. Ang problema sa mga pahina ng lapad na likido ay maaaring mahirap basahin. Kung ang haba ng pag- scan ng isang linya ng teksto ay mas mahaba kaysa sa 10 hanggang 12 salita o mas maikli kaysa sa 4 hanggang 5 na salita, maaaring mahirap basahin. Nangangahulugan ito na may mga problema sa mga mambabasa na may malalaki o maliit na window ng browser.
Upang lumikha ng mga pahina ng lapad na nababaluktot, gamitin lamang ang mga porsyento o em para sa mga lapad ng mga dibisyon ng iyong pahina. Dapat mo ring pamilyar ang iyong sarili sa CSS max-width property. Ang property na ito ay nagpapahintulot sa iyo na magtakda ng isang lapad sa mga porsyento, ngunit pagkatapos ay limitahan ito upang hindi ito makakuha ng kaya malaki na ang mga tao ay hindi maaaring basahin ito.
At ang Nagwagi Ay: CSS Media Query
Ang pinakamahusay na solusyon sa mga araw na ito ay ang paggamit ng mga query sa media ng media at tumutugon na disenyo upang lumikha ng isang pahina na nag-aayos sa lapad ng browser na tinitingnan ito. Ang isang tumutugon disenyo ng web ay gumagamit ng parehong nilalaman upang lumikha ng isang web page na gumagana kung tinitingnan mo ito sa lapad ng 5120 pixel o 320 pixel ang lapad. Iba't ibang mga pahina ang iba't ibang laki, ngunit naglalaman ang parehong nilalaman. Gamit ang media query sa CSS3, ang bawat tumatanggap na aparato ay sumasagot sa query sa laki nito, at ang estilo ng sheet ay nag-aayos sa partikular na laki.