ဒီနှစ်ပိုင်းမှာ Mobile Web အသုံးပြုမှုက တော်တော်လေးကို များလာတဲ့ အတွက် Developer တွေ Designer တွေ အနေနဲ့ လျှစ်လျူ ရှုလို့ မရတော့တဲ့ အနေအထားကိုရောက်လာပါပြီ။
ချမ်းသာတဲ့ နိုင်ငံတွေမှာ ပြောင်းလဲမှုတွေကို ပိုမြန်တဲ့ mobile broadband connection တွေနဲ့ သက်သာတဲ့ data service တွေက ပိုမို လှုံဆော်နေပါတယ်။ ဘယ်လိုပဲဖြစ်ဖြစ် ဖွံ့ဖြိုးဆဲ နိုင်ငံတွေအနေနဲ့က PC အဆင့်ကိုကျော်ပြီး တခါတည်း mobile ဘက်ကို ကူးပြောင်း လာတာတွေ့ရပါတယ်။
Mobile နယ်ပယ်က Developer တွေအနေနဲ့ အနည်းငယ်အခက်တွေ့ကောင်းတွေ့နိုင်ပါတယ်။ Mobile Developement က Cross-browser တင်မဟုတ်ပါဘူး။ Cross-Platform လည်းဖြစ်ရပါမယ်။ Cross-Platform တင်မကသေးပါဘူး။ Device တစ်ခုစီမှာ တောင် browser အမျိုးမျိုးသုံးကြအုန်းမှာပါ။ ဥပမာ – Android user တစ်ယောက်က နဂိုပါတဲ့ browser ကိုသုံးရင်သုံးမယ် ဒါမှမဟုတ် Opera mini (သို့မဟုတ်) Firefox Mobile အစရှိတဲ့ browser တွေကိုသုံးချင်လည်းသုံးမယ်။
ဒါ့အပြင် mobile web ဟာ ဒီနောက်ပိုင်းမှာ လျစ်လျှူရှုထားတဲ့ အချက်တော်တော်များများကို ပြန်လည်အသက်ဝင်လာစေပါတယ်။ ပထမဆုံးအနေနဲ့ 4G network သုံးရင်တောင်မှ bandwidth က mobile အသုံးပြုသူတွေအတွက် အရေးကြီးတဲ့အချက်တစ်ချက် ဖြစ်လာပါပြီ။ နောက်တစ်ချက်ကတော့ mobile device တွေရဲ့ screen size ပါ။ Projection Monitors ဖြစ်လာပြီးနောက်ပိုင်းမှာမတွေ့ရတော့တဲ့အချက်တစ်ချက်ပေါ့။
ဒီအချက်တွေနဲ့ cross-platform ပြဿနာတွေပေါင်းလိုက်ရင် mobile development က ခေတ်နောက်ပြန်ဆွဲတာနဲ့တောင်တူနေပါတယ်။ ဒီအချက်တွေကို mobile development အတွက်တစ်ချက်ခြင်း ဖြေရှင်းသွားပါမယ်။
- Mobile Stylesheet တွေကို ဘယ်လို implement လုပ်မလဲ။
- Mobile Stylesheet တွေမှာ ဘာတွေ ပြောင်းလဲရမလဲ။
- Stylesheet အပြင်ဘာတွေရှိအုံးမလဲ။
- iPhone / iPad တွေအတွက် အထူး အလေးထားရမည့်အကြောင်းအရာများ
Mobile Stylesheet တွေကို ဘယ်လို implement လုပ်မလဲ။
Website တစ်ခုကို Mobile support ရဖို့အတွက် ပထမဦးဆုံးလုပ်ရမှာကတော့ Mobile Devices တွေအတွက် အဆင်ပြေအောင်လုပ်ထားတဲ့ CSS stylesheet တွေထည့်ရမှာပါပဲ။
Server-side Methods & The UA String
Mobile Stylesheet တွေထည့်သွင်းဖို့အတွက် ချဉ်းကပ်နည်းတစ်နည်းကတော့ PHP အစရှိတဲ့ server-side language တစ်ခုခုနဲ့ user agent ကို စစ်ပြီး ထည့်တာပဲဖြစ်ပါတယ်။ ဒီနည်းမှာဆိုရင် moblie device ကို detect လုပ်ပြီး သူနဲ့ သက်ဆိုင်တဲ့ stylesheet ကိုထုတ်ပေးမယ် ဒါမှမဟုတ် mobile subdomain တစ်ခုကို redirect လုပ်ပေးပါမယ်။ ဥပမာ Facebook ဆိုရင် m.facebook.com ဆိုတာမျိုးပေါ့။
Server-side method မှာ အားသာချက်တွေအများကြီးရှိပါတယ်။ compatibility ကို အမြင့်ဆုံးထိ အာမခံနိုင်ပါတယ်။ နောက်ပြီး website တွေအတွက် special mark-up/content တွေကို mobile user တွေအတွက်ထုတ်ပေးမှာပါ။
ဒီနည်းက enterprise level websites တွေအတွက်တော့ ပြီးပြည့်စုံတယ်လို့ပြောလို့ရပါတယ်။ ဒါပေမယ့် တကယ်တမ်းလက်တွေ့မှာ website တော်တော်များများမှာ implement လုပ်ဖို့ခက်ခဲတာတွေ့ရပါတယ်။
User-agent String အသစ်တွေကနေ့တိုင်းလိုလိုထွက်နေတာတွေ့ရပါတယ်။ ဒါကြောင့် current UA list ဆိုတာထားဖို့မဖြစ်နိုင်ပါဘူး။ ဒါ့အပြင် ဒီနည်းက device တွေရဲ့ true user agent ပေါ်မှာ မူတည်ပါတယ်။ ဘယ်လိုပဲဖြစ်ဖြစ် အရင်တုန်းက browser တွေက ဒီလိုနည်းတွေကိုဖြေရှင်းဖို့ အခြား browser တစ်ခုအနေနဲ့ သူတို့ရဲ့ UA string မှာပြလေ့ရှိပါတယ်။ ဥပမာ – Mozilla ဆိုရင် 90′s ဝန်းကျင်လောက်ကသုံးခဲ့တဲ့ Netscape အနေနဲ့ပြပြီး Opera က နှစ်တော်တော်များများ အထိ IE အနေနဲ့ပဲပြလေ့ရှိပါတယ်။
Clientside Methods & Media Queries
Clientside Methods တွေထဲက အလွယ်ဆုံးနည်းတစ်နည်းကတော့ stylesheet’s media type ကိုသုံးတာပါ။
1 2 | <link rel="stylesheet" href="site.css" media="screen" /><link rel="stylesheet" href="mobile.css" media="handheld" /> |
ဒီနေရာမှာ site.css နဲ့ mobile.css ဆိုပြီး stylesheet နှစ်ခုပါပါတယ်။ ပထမ site.css က desktop တွေ Laptop တွေ အတွက် screen media type ကို သုံးထားပါတယ်။
နောက်ဒုတိယတစ်ခု mobile.css ကတော့ mobile device တွေအတွက် handheld ဆိုတဲ့ media type ကို သုံးထားပါတယ်။
အရင်တုန်းက mobile device အဟောင်း တွေက handheld media type ကို support လုပ်ပါတယ်။ ဒါပေမယ့် သူ့ implementaion ပေါ်မူတည်ပြီး တစ်ခုနဲ့တစ်ခုမတူပါဘူး။ တစ်ချို့တွေက screen stylesheet တွေကို disable လုပ်ပြီး handheld stylesheet ကိုပဲ load လုပ်ပါတယ်။ တစ်ချို့ device တွေကတော့ နှစ်ခုလုံးကို load လုပ်ပါတယ်။
နောက်ပိုင်းထွက်တဲ့ mobile device အသစ် တွေမှာတော့ website တွေရဲ့ feature အပြည့်အစုံကို မြင်ရအောင် handheld media type ကို ကျော်သွားလေ့ရှိပါတယ်။
ဒါကြောင့် mobiel device အသစ်တွေမှာ support လုပ်ဖို့ style တွေကို device ရဲ့ width ပေါ်မူတည်ပြီး လုပ်လို့ရတဲ့ media queries ကိုသုံးဖို့ လိုပါလိမ့်မယ်။ mobile device အများစုမှာ screen size က သေးတာကြောင့် handheld device တွေရဲ့ screen ကို detect လုပ်ဖို့ ဆိုရင် 480px နဲ့အောက် ဆိုရင် အဆင်ပြေပါလိမ့်မယ်။
1 | <link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)" /> |
ဒီနည်းက mobile device အသစ်တွေကို ဦးတည်တဲ့အတွက် device အဟောင်းတွေမှာ media queries ကို support လုပ်မှာ တော့ မဟုတ်ပါဘူး။ ဒါကြောင့် device အဟောင်းတွေမှာ support လုပ်မယ့် နောက်ထပ်နည်းတစ်ခုကို ထပ်ပြီးလုပ်ပေးရပါလိမ့်မယ်။
ပထမဆုံး screen.css နဲ့ antiscreen.css ဆိုပြီး stylesheet နှစ်ခု ရှိပါလိမ့်မယ်။ screen.css ကတော့ normal browser တွေအတွက်ပါ။ antiscreen.css က တော့ mobile device တွေမှာ မလိုချင်တဲ့ style တွေကို overwirte လုပ်မယ့်ဟာပါ။ ပြီးရင်တော့ stylesheet နှစ်ခုလုံးကို ပေါင်းပြီး core.css ထဲမှာ အောက်ကအတိုင်းထည့်ပါမယ်။
1 2 3 4 5 | @import url("screen.css");@import url("antiscreen.css") handheld;@import url("anitscreen.css") only screen and (max-device-width:480px); |
နောက်ဆုံးအနေနဲ့ handheld.css ဆိုပြီး နောက်ထပ် stylesheet တစ်ခုထပ်လုပ်ပါမယ်။ ဒီ handheld.css မှာတော့ mobile browser တွေအတွက် style တွေပါပါမယ်။ ပြီးရင်တော့ page မှာ အောက်ကအတိုင်း link ချိတ်ပါမယ်။
1 2 | <link rel="stylesheet" href="core.css" media="screen" /><link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)" /> |
ဒီနည်းနဲ့ဆိုရင်တော့ market ထဲက mobile device တော်တော်များများအတွက် အဆင်ပြေသွားပါပြီ။ ဒါပေမယ့် perfect ဖြစ်တယ်လို့တော့ပြောလို့မရပါဘူး။ iPad လို တစ်ချို့ mobile device တွေမှာ screen width က 480px ထက်ကြီးပါတယ်။ ဒါကြောင့် ဒီနည်းနဲ့ အဆင်မပြေနိုင်ပါဘူး။ ဒါပေမယ့် ဘယ်လိုပဲဖြစ်ဖြစ် ဒီလို device အကြီး တွေအတွက် ကတော့ mobile layout ဆိုတာ မလိုလောက်တော့ပါဘူး။
Media query က device detection တင်မကပါဘူး တခြားအချက်တွေလည်းရှိပါသေးတယ်။ အထူးသဖြင့် Media queries က content တွေကို ပုံစံအမျိုးမျိုး ချပေးလိုက်တာပါပဲ။ content delivery မှာ ထိန်းချုပ်မှုမရှိပါဘူး။ ဥပမာ – Media Query က sidebar content တွေကို hide လုပ်ပေးထားတာပဲရှိမယ်။ Mark-up တွေကို user တွေ download ချတာကနေတော့ ကာကွယ်မပေးနိုင်ပါဘူး။
User Initiated Method
အပေါ်မှာပြောခဲ့တဲ့ UA detection နဲ့ media queries ရဲ့အားနည်းချက်တွေအရ တစ်ချို့website တွေမှာ mobile version website ကို ကြည့်မကြည့် ဆိုတာကို user ကိုဆုံးဖြတ်ခိုင်းလိုက်ပါတယ်။ မကောင်းတဲ့အချက်ကတော့ mobile website ကိုကြည့်ရဖို့ user ရဲ့လုပ်ဆောင်ချက်လိုအပ်တဲ့ အပြင် misused ဖြစ်နိုင်ပါတယ်။ site မှာ ”Vist our mobile site” ဆိုတဲ့ mobile subdomain ကို ပို့ဆောင်ပေးမယ့် link တစ်ခုပါပါမယ်။ ဒီနည်းမှာ မကောင်းတဲ့အချက်ကတော့ တစ်ချို့ mobile user တွေက Link ကို မတွေ့တာလည်းဖြစ်နိုင်တယ် နောက်ပြီး ဘယ် device ကနေပဲသုံးသုံး ဒီ link ကိုမြင်နေရမှာဖြစ်တဲ့အတွက် non-mobile user တွေကလည်း အဲဒီ link ကို click လုပ်နိုင်တယ်။ ဒါပေမယ့် user ကို ဆုံးဖြတ်ခိုင်းတဲ့အတွက် သူတို့စိတ်ကြိုက်လုပ်လို့ရတာပေါ့ .. အချို့လူတွေက mobile layout နဲ့ ရှင်းရှင်းလင်းလင်း ကြည့်ချင်ရင်ကြည့်ချင်မယ် ဒါမှမဟုတ် feature အပြည့်အစုံပါတဲ့ သာမန် website ပုံစံကိုကြည့်ရင်လည်းကြည့်မယ်။ အားလုံးက user ပေါ်မှာပဲမူတည်သွားပြီ။
Mobile Stylesheet တွေမှာ ဘာတွေ ပြောင်းလဲရမလဲ။
အခုဆိုရင် mobile stylesheet ကိုထည့်ပြီးသွားပြီ။ အဲဒီ mobile stylesheet မှာဘာတွေ ပြုပြင်ပြောင်းလဲရမလဲ။
အဓိကလုပ်ရမှာကတော့ screen သေးသေးလေးမှာ website ကိုကြည့်ရတာ အဆင်ပြေအောင်လုပ်ရမှာပါပဲ။ ပထမဆုံးဘာကိုဆိုလိုလဲဆိုတော့ multi-column တွေကို single column ပြောင်းရမှာပါ။ Mobile screen အများစုက အရှည်လိုက်ဖြစ်တဲ့အတွက် ဘေးဘက်ကို space များများမရပါဘူး။ mobile layout တွေမှာ content တွေကို one column ထားတာအကောင်းဆုံးပါပဲ။
နောက်တစ်ခုကတော့ screen သေးသေးလေးမှာ content တွေ ပြည့်ကျပ်မနေအောင် သိပ်အရေးမကြီးတဲ့ content တွေကို display:none; လုပ်ထားတာကောင်းပါတယ်။
နောက်ဆုံးတစ်ခုကတော့ ကျစ်လစ်တဲ့ layout တစ်ခုဖြစ်အောင် သာမန် layout ထက် margin တွေ padding တွေကို နည်းနည်းလျော့ရပါမယ်။
Reduce Bandwidth
mobile stylesheet မှာ နောက်တစ်ခုလုပ်ရမှာက အနည်းငယ်နှေးတဲ့ mobile network အတွက် bandwidth ကိုလျော့ချဖို့ပါပဲ။ ပထမဆုံး background image အကြီးကြီးတွေကိုဖယ်ပြစ်ပြီး အစားထိုးရမှာပါ။ အထူးသဖြင့် site တစ်ခုလုံးအပြည့်သုံးထားတဲ့ ပုံတွေပေါ့။ နောက်ပြီး မလိုအပ်တဲ့ content image တွေကိုလည်း display:none; လုပ်ထားသင့်ပါတယ်။
အကယ်လို့ site မှာ button, navigation တွေအတွက်ပုံတွေသုံးထားတယ်ဆိုရင် plain-text တွေပြောင်းသင့်ပါတယ်။ တကယ်လို့ image တွေ နေရာမှာ alternate text တွေပြချင်တယ်ဆိုရင် အောက်ကအတိုင်းရေးလို့ရပါတယ်။ (javascript နဲ့ as-text ဆိုတဲ့ class ကို img မှာထည့်ပေးလိုက်ပါ။ သတိပြုရမှာက img တွေမှာ alt-attributes ကိုသေချာသတ်မှတ်ပေးထားဖို့ပါပဲ။)
1 | img.as-text{content:attr(alt);} |
တခြားပြောင်းလဲမှုများ
screen-size နဲ့ bandwidth အပြင်တခြားပြောင်းလဲစရာအနည်းငယ်ရှိပါသေးတယ်။ ပထမဆုံးအနေနဲ့ screen သေးသေးမှာ ဖတ်ရလွယ်ကူအောင် font size ကို သာမန်ထက်နည်းနည်းကြီးဖို့လိုပါလိမ့်မယ်။ နောက်ပြီး heading test တွေက mobile screen တွေမှာဆိုရင် အရမ်းကိုထူနေတတ်ပါတယ်။ ဒါကြောင့် font weight ကိုလျော့ဖို့လိုပါလိမ့်မယ်။
1 2 3 | h1,h2 { font-weight:normal;} |
နောက်တစ်ချက်ကတော့ mobile ပေါ်မှာ click လုပ်ရတာနည်းနည်းခက်ခဲပါလိမ့်မယ်။ ဒါကြောင့် click လုပ်ရမယ့် အရေးကြီးတဲ့ button တွေနဲ့ link တွေကို နှိပ်ရလွယ်ကူအောင် area ပိုပေးထားသင့်ပါတယ်။
နောက်ထပ်သတိထားရမယ့်တစ်ခုက floated elements တွေပါပဲ။ floated elements တွေက mobile layout မှာဆိုရင် ပြဿနာနည်းနည်းရှိနိုင်ပါတယ်။ ဒါကြောင့် မလိုအပ်ဘူးဆိုရင် float လုပ်ထားတာတွေကို ဖြုတ်သင့်ပါတယ်။ mobile website မှာ content တွေကို ဘေးကို ထပ်တိုးဖို့ထက်စာရင် user ကို အောက်ဖက်ကို scroll ဆွဲပြီး ကြည့်စေတာက ပိုပြီး အဆင်ပြေပါလိမ့်မယ်။
နောက်ဆုံးသိထားရမှာကတော့ moblie မှာ mouseover states ဆိုတာ မရှိပါဘူး။ ဒါကြောင့် active states ဆိုတာရှိဖို့လိုအပ်ပါတယ်။ တစ်ခါတစ်ရံ ပုံမှန် website ရဲ့ :hover state မှာပေးထားတဲ့ style တွေကို mobile stylesheet မှာ :active state အတွက်ထားပေးလိုက်ရင် လည်းအဆင်ပြေပါတယ်။ နောက်တစ်ခုက dropdown navigation တွေပါပဲ။ mobile website မှာ dropdown တွေထားတာထက်စာရင် link တွေအားလုံးကို ပြထားတာက ပိုပြီးကောင်းပါလိမ့်မယ်။
နောက်ထပ်နှစ်ချက် ကိုတော့ အပိုင်း၂ မှာ ဆက်ရေးသွားပါမယ် …
အားလုံးကိုကျေးဇူးတင်ပါတယ် ..
မှတ်ချက်။ ။ Smashing Magazine မှထုတ်သော Mobile Design စာအုပ်မှ How to build a mobile website ကို နားလည်သလို ဘာသာပြန်ထားခြင်းဖြစ်ပါသည်။