Ang mga web page na na-optimize para sa paggamit sa mga mobile device ay naiiba sa mga lumalabas sa mga desktop at laptop na computer. Ang huli ay idinisenyo para sa malalaking screen at tumpak na pag-click ng mouse, samantalang ang mga mobile web page ay sukat para sa mas maliliit na screen at hindi tumpak na pag-tap sa daliri.
- Idinisenyo para sa mas maliliit na screen at hindi tumpak na pag-tap sa daliri.
- Idinisenyo para sa malalaking screen na may tumpak na pag-click ng mouse.
Dahil karamihan sa mga pagbisita sa website ay nagmumula sa mga mobile device, ang mga taga-disenyo ng site ay may tungkuling magbigay ng mga bersyon na gumagana sa parehong mga mobile device at desktop computer. Ang pinakakaraniwang diskarte ay ang paggamit ng tumutugon na disenyo ng web, na awtomatikong naghahatid ng wastong bersyon batay sa device at laki ng screen ng user, gaya ng natukoy ng browser.
Sa anumang kaso, ang mga web page na madaling gamitin sa mobile ay naiiba sa mga bersyon ng desktop sa maraming paraan.
Disenyo ng Pahina: Mas Kaunting Space ang Mga Mobile Screen
- Ang mga display ng smartphone at tablet ay may sukat na 4 hanggang 10 pulgada nang pahilis.
-
Karaniwang pinapalitan ng mga nako-collapse o napapalawak na widget ng menu ang mga sidebar at malalaking header na menu.
- Full-width na graphics na may hudisyal na paggamit ng espasyo sa pagitan ng text.
- Karamihan sa mga desktop monitor ay may sukat na 19 pulgada hanggang 24 pulgada nang pahilis.
- Mas karaniwan ang mga naka-sponsor na link at malalaking banner ad.
- Mas siksik na text na may higit na pahinga para sa mga graphics.
Ang pinaka-halatang pagkakaiba sa pagitan ng desktop at mobile na mga web page ay ang screen real estate. Bagama't karamihan sa mga desktop monitor ay sumusukat ng hindi bababa sa 19 pulgada hanggang 24 pulgada nang pahilis, ang mga tablet ay karaniwang humigit-kumulang 10 pulgada. Ang mga smartphone ay humigit-kumulang 4 na pulgada sa pahilis. Ang simpleng pag-zoom out ay hindi matagumpay na na-convert ang isang web page sa isang mobile-friendly na bersyon dahil ginagawa nitong hindi nababasa ang teksto at nangangailangan ng karagdagang hakbang mula sa bisita ng site. Gayundin, nagiging imposible ang tumpak na pag-tap sa maliliit na elemento.
Upang ayusin ang isyu, maaaring alisin ng mga taga-disenyo ang mga sidebar at graphics na hindi mahigpit na kinakailangan. Sa halip, gumagamit sila ng mas maliliit na graphics, pinapataas ang laki ng font, at i-collapse ang content sa mga napapalawak na widget. Ang limitasyon sa real estate na ito ay nagtulak ng ibang uri ng pag-iisip sa mga web designer.
Gayundin, kadalasang pinapalitan ng mga nako-collapse o napapalawak na widget ng menu ang mga sidebar at malalaking header na menu. Sa kanilang pagsisikap na gawing bilang ang bawat milimetro ng espasyo sa screen, inaalis ng mga taga-disenyo ang labis na puting espasyo, habang binabantayang mabuti ang pagiging madaling mabasa.
Ang karamihan ng mga naka-sponsor na link at malalaking banner ad ay hindi gumagana sa isang telepono o maliit na tablet. Sa halip, mas karaniwan ang maliliit na pop-up ad sa mga mobile web page.
Ang mga layout na nagtatampok ng text na nakabalot sa isang graphic ay hindi nagpe-play nang maayos sa mga mobile device. Sa halip, kadalasang binibigyan ng mga designer ang mga graphics na iyon ng buong lapad ng screen at pinapatakbo ang teksto sa ibaba o sa itaas. Katulad nito, ang magandang disenyo ng web ay naghahati-hati ng teksto sa mga tipak para madaling mabasa; walang gustong magbasa ng mga solidong pader ng teksto. Ito ay nagiging mas mahalaga sa maliliit na screen. Napakahalaga ng paggamit ng white space nang matalino.
Page Controls: Desktop Precision vs. Mobile Blobs
- Malalaking tapping area o hotspot para sa mas tumpak na navigation.
- Different URL: idinaragdag ang titik na "m." Kadalasan ay isang opsyon upang tingnan ang desktop na bersyon ng isang site.
- Ang mga kredensyal sa pag-log in ay kadalasang may nakalaang espasyo, minsan ay may fingerprint accessibility.
- Higit pang tumpak na mga link at button na nakabatay sa cursor.
Hindi tulad ng isang tumpak na pointer ng mouse sa iyong desktop, ang daliri ng tao ay isang patak, at ang pag-tap ay nangangailangan ng malalaking target sa screen para sa mga hyperlink. Nag-aalok ang mga mobile-friendly na site ng malalaking tapping area (o mga hotspot) para mapadali ang tumpak na pag-navigate.
Mobile-friendly na mga web page ay karaniwang may kasamang titik m sa kanilang mga address; halimbawa, ang mobile address ng Facebook ay m.facebook.com. Ang mobile URL ay karaniwang pinipili para sa iyo kapag nag-surf ka gamit ang isang mobile na tablet o smartphone. Sa ilang sitwasyon, makakakita ka ng nata-tap na link na nagbibigay-daan sa iyong lumipat sa regular na desktop na bersyon ng page.
Ang mga field sa pag-log in at password para sa mga desktop at laptop ay nagiging maliliit at hindi na magagamit sa isang telepono, kaya pinalalaki ito ng mga web publisher, kung minsan ay binibigyan sila ng sarili nilang mga page para sa madaling paggamit. Ang pag-log in gamit ang fingerprint o ibang account, gaya ng Google o Facebook, ay nagiging pangkaraniwan habang nagbabago ang mga kakayahan ng device at serbisyo.
Bakit Ito Mahalaga?
Ang Mobile web page ay idinisenyo para sa mga handheld na device at medyo naiiba sa mga page na ginawa para sa desktop reading. Bagama't karaniwan mong matitingnan ang desktop na bersyon ng isang webpage sa isang mobile device, at vice versa, ang mga ito ay idinisenyo sa ibang paraan upang gawing mas madaling tingnan, basahin, at i-navigate ang content.
