Stylesheet အပြင်ဘာတွေရှိအုံးမလဲ။
Stylesheet အပြင်တခြား mobile feature တွေလည်း mark-up ကနေ ထပ်ထည့်လို့ရပါသေးတယ်။
Clickable Phone Numbers
Handheld device အများစုက ဖုန်းတွေများပါတယ်။ ဒါကြောင့် ဖုန်းနံပါတ်ကို နှိပ်လိုက်တာနဲ့ ဖုန်းခေါ်တာမျိုးလုပ်လို့ ရပါတယ်။
1 | <a href=”tel:15032084566” class=”phone-link”>(530) 208-4566</a> |
ဒီလိုမျိုး link လုပ်ထားမယ်ဆိုရင် mobile user တွေအနေနဲ့ click လုပ်ပြီး ဖုန်းခေါ်လို့ရပါပြီ။ ဒီနေရာမှာ တစ်ခုမှတ်ထားရမှာက web က international ဖြစ်တဲ့အတွက် link ပေးတဲ့အခါ country code ပါထည့်ပေးဖို့လိုပါမယ်။ (အပေါ်က example မှာ 1 က US country code ပါ။)
နောက်တစ်ခုက ဒီ link ကို mobile user မဟုတ်လဲ click လုပ်လို့ရနေမှာဖြစ်တဲ့အတွက် CSS နဲ့ screen stylesheet မှာ link ကို disable လုပ်ထားပြီး mobile stylesheet ကျမှ click လုပ်လို့ရအောင်လုပ်ပေးထားရင် ပိုကောင်းပါတယ်။
နောက်တစ်ခုက ဒီ link ကို mobile user မဟုတ်လဲ click လုပ်လို့ရနေမှာဖြစ်တဲ့အတွက် CSS နဲ့ screen stylesheet မှာ link ကို disable လုပ်ထားပြီး mobile stylesheet ကျမှ click လုပ်လို့ရအောင်လုပ်ပေးထားရင် ပိုကောင်းပါတယ်။
Special Input Types
Mobile နဲ့ browsing လုပ်တဲ့အခါကျရင် နောက်ထပ်တွေ့ရတဲ့ အခက်အခဲတစ်ခုက သာမန် standard full-sized keyboard တွေနဲ့ ယှဉ်ရင် စာရိုက်ရတာ ခက်ခဲပါတယ်။ ဒါပေမယ့် HTML 5 ရဲ့ input types တွေကို သုံးမယ်ဆိုရင်တော့ user အတွက် အနည်းငယ် အဆင်ပြေအောင်လုပ်ပေးနိုင်ပါမယ်။
1 2 | <input type=”tel” /><input type=”email” /> |
ဒီ input type တွေက iPhone အစရှိတဲ့ device တွေမှာ input type နဲ့ သက်ဆိုင် တဲ့ keyboard ကို ပြပေးမှာပါ။ အပေါ်ကပုံမှာ ဆိုရင် type=”tel” မှာ phone number ရိုက်ဖို့အတွက် numeric keypad ကိုပြပေးမှာပါ။ ထိုနည်းတူပဲ type=”email” မှာလည်း @ နဲ့ . button တွေပါတဲ့ keypad ကို ပြပေးမှာပါ။
HTML5 input type တွေမှာ mobile ရော non-mobile ရော အဆင်ပြေတဲ့ in-browser validation နဲ့ special input menus တွေပါရပါတယ်။ ဒါ့အပြင် support မလုပ်တဲ့ browser တွေအနေနဲ့လည်း ဒီ special input type တွေကို input type text အနေနဲ့ သိမှာပါ။ ဒါကြောင့် ဒီ HTML5 input type ကို သုံးမယ်ဆို အရှုံးမရှိပါဘူး။
HTML5 input type အားလုံးရဲ့ list ကိုတော့ ဒီမှာကြည့်လို့ရပါတယ်။ Browser support နဲ့ attributes တွေအကြောင်းကိုတော့ ဒီမှာ ကြည့်လို့ရပါတယ်။
HTML5 input type အားလုံးရဲ့ list ကိုတော့ ဒီမှာကြည့်လို့ရပါတယ်။ Browser support နဲ့ attributes တွေအကြောင်းကိုတော့ ဒီမှာ ကြည့်လို့ရပါတယ်။
Viewport Dimensions & Orientation
ခုနောက်ပိုင်း mobile devices တွေမှာ web page တစ်ခုကို render လုပ်မယ်ဆိုရင် page content တွေအားလုံးကို viewport ထဲမှာ ဝင်အောင် ချုံ့ လိုက်ပါတယ်။ default viewport dimensions က layout တော်တော်များများမှာ အဆင်ပြေပါတယ်။ တစ်ခါတစ်ရံမှာ viewport dimension ကိုပြောင်းတာကလည်း အသုံးဝင်ပါတယ်။ ဒါကို Apple က မိတ်ဆက်ပေးခဲ့တဲ့ meta tag ကို သုံးပြီးလုပ်လို့ရပါတယ်။ နောက်ပိုင်းမှာ တစ်ခြားထုတ်လုပ်သူ တွေကလည်း ဒီ နည်းကို သုံးလာကြပါတယ်။ အောက်က code ကို head tag ထဲမှာထည့်ပေးလိုက်ပါ။
1 | <meta name="viewport" content="width=320" /> |
ဒီ ဥပမာမှာဆိုရင် viewport ကို 320 ထားထားတဲ့အတွက် page ရဲ့ 320 px အထိ device ရဲ့ width မှာမြင်ရမှာဖြစ်ပါတယ်။ viewport meta tag ကနေပြီး page ကို resize လုပ်တာကို disable လုပ်ထားလို့လည်း ရပါတယ်။
1 | <meta name="viewport" content="width=320, user-scalable=false" /> |
ဒါပေမယ့် အဲလိုလုပ်လိုက်တဲ့အခါကျတော့ user ကသူ့စိတ်ကြိုက် scale လုပ်ပြီးသုံးလို့မရတော့ဘူးပေါ့။ ဒါကြောင့် ဒါကို တော့မလိုအပ်ရင် မသုံးတာ ကောင်းပါတယ်။
နောက်တစ်ခုက device အနေအထားပေါ်မူတည်ပြီး လိုချင်တဲ့ style ကိုသတ်မှတ် ပေးထားလို့ရပါတယ်။ ဆိုလိုတာကတော့ user က device ကို ဘယ်လိုကိုင်ထားလဲ .. အလျားလိုက်လား။ ဒေါင်လိုက်လား ပေါ်မူတည်ပြီး မတူတဲ့ style တွေပေးထားလို့ရပါတယ်။
ဒီတော့ device orientation ကို detect လုပ်ဖို့အတွက် ရှေ့မှာ ပြောခဲ့တဲ့ clientside detection ဖြစ်တဲ့ media query ကိုပဲသုံးပါမယ်။ သင့်ရဲ့ stylesheet ထဲမှာ အောက်က code ကိုထည့်လိုက်ပါ။
နောက်တစ်ခုက device အနေအထားပေါ်မူတည်ပြီး လိုချင်တဲ့ style ကိုသတ်မှတ် ပေးထားလို့ရပါတယ်။ ဆိုလိုတာကတော့ user က device ကို ဘယ်လိုကိုင်ထားလဲ .. အလျားလိုက်လား။ ဒေါင်လိုက်လား ပေါ်မူတည်ပြီး မတူတဲ့ style တွေပေးထားလို့ရပါတယ်။
ဒီတော့ device orientation ကို detect လုပ်ဖို့အတွက် ရှေ့မှာ ပြောခဲ့တဲ့ clientside detection ဖြစ်တဲ့ media query ကိုပဲသုံးပါမယ်။ သင့်ရဲ့ stylesheet ထဲမှာ အောက်က code ကိုထည့်လိုက်ပါ။
1 2 | @import url(“portrait.css”) all and (orientation:portrait);@import url(“landscape.css”) all and (orientation:landscape); |
ဒီမှာ portrait.css က ဒေါင်လိုက်အနေအထားအတွက်ဖြစ်ပြီး landscape.css ကတော့ အလျားလိုက် အနေအထား အတွက်ဖြစ်ပါတယ်။
ဒါပေမယ့် media query ရဲ့ orientation က devices အားလုံးက detect မသိပါဘူး။ ဒါကြောင့် media query မှာ max-width ကိုသုံးတာ ပိုပြီး ထိရောက်ပါတယ်။ မတူတဲ့ orientation အတွက် သူ့ width အသီးသီးနဲ့ သတ်မှတ်ပေးလိုက်ပြီး အဲဒီအတွက် style တွေရေးပေးလိုက်ရုံပါပဲ။
ဒါပေမယ့် media query ရဲ့ orientation က devices အားလုံးက detect မသိပါဘူး။ ဒါကြောင့် media query မှာ max-width ကိုသုံးတာ ပိုပြီး ထိရောက်ပါတယ်။ မတူတဲ့ orientation အတွက် သူ့ width အသီးသီးနဲ့ သတ်မှတ်ပေးလိုက်ပြီး အဲဒီအတွက် style တွေရေးပေးလိုက်ရုံပါပဲ။
Special Concerns for iPhone/iPad
Market ရဲ့ ၂၈ ရာခိုင်နှုန်း နဲ့ ခန့်မှန်းချေအရ mobile ကနေ browsing လုပ်တာရဲ့ ၅၀ ရာခိုင်နှုန်းက iPhone ကနေလာတာကို တွေ့ရပါတယ်။ ဒါကြောင့် လည်း developer တွေက iPhone အတွက် အရေးပေးပြီးလုပ်တာ မဆန်းပါဘူး။
No Flash
iOS တွေမှာ Jailbreak မလုပ်ထားဘဲနဲ့ Flash တွေကို play လို့မရပါဘူး။ ဒါပေမယ့်လည်း ကံကောင်း ထောက်မစွာနဲ့ Flash နေရာမှာ အစားထိုးသုံးဖို့ alternatives တွေအများကြီးရှိလာတဲ့အတွက် ဒီ issues ကို လွယ်လွယ်နဲ့ ကျော်ဖြတ်လို့ရပါတယ်။
jQuery အစရှိတဲ့ Javascript libraries တွေက လွယ်လွယ်ကူကူနဲ့ အဆင့်မြင့် interactive application တွေကို Flash မပါပဲရေးလို့ရပါတယ်။ သင့် website ကို iPhone မှာ support လုပ်ချင်တဲ့ ဆန္ဒ မရှိဘူးဆိုရင်တောင်မှ Javascript applications တွေမှာ တခြား Flash alternatives တွေထက်စာရင် အားသာချက်တွေ အများကြီးရှိပါသေးတယ်။
ဒါပေမယ့် ရှိသမျှ application တွေအားလုံးကို HTML5, Javascript နဲ့ပြန်ရေးဖို့ဆိုတာ သိပ်မလွယ်ကူပါဘူး။ ဒီလိုဆိုရင်တော့ iPhone user တွေအတွက် Flash နေရာမှာ တခြား သင့် လျှော်တဲ့ content တွေထည့်ထားဖို့တော့လိုပါလိမ့်မယ်။
jQuery အစရှိတဲ့ Javascript libraries တွေက လွယ်လွယ်ကူကူနဲ့ အဆင့်မြင့် interactive application တွေကို Flash မပါပဲရေးလို့ရပါတယ်။ သင့် website ကို iPhone မှာ support လုပ်ချင်တဲ့ ဆန္ဒ မရှိဘူးဆိုရင်တောင်မှ Javascript applications တွေမှာ တခြား Flash alternatives တွေထက်စာရင် အားသာချက်တွေ အများကြီးရှိပါသေးတယ်။
ဒါပေမယ့် ရှိသမျှ application တွေအားလုံးကို HTML5, Javascript နဲ့ပြန်ရေးဖို့ဆိုတာ သိပ်မလွယ်ကူပါဘူး။ ဒီလိုဆိုရင်တော့ iPhone user တွေအတွက် Flash နေရာမှာ တခြား သင့် လျှော်တဲ့ content တွေထည့်ထားဖို့တော့လိုပါလိမ့်မယ်။
တခြားအားနည်းချက်များ
iPhones နဲ့ iPads မှာ support လုပ်ဖို့အတွက် Flash အပြင်တခြား ကန့်သတ်ချက်တွေလည်းရှိပါသေးတယ်။
iPhones မှာ <input type=”file” /> ဆိုတာကို internal file structure တွေကို access လုပ်ခွင့်မပေးတဲ့အတွက် support မလုပ်ပါဘူး။ တခြား mobile devices တွေက computer နဲ့ ချိတ်တဲ့အခါမှာ external storage device အနေနဲ့ ချိတ်လို့ရပေမယ့် Apple ကတော့ သူ့ device တွေရဲ့ File structure ကိုနည်းနည်းရှုပ်ထွေးအောင်လုပ်ထားပါတယ်။
နောက်တစ်ခုကတော့ iPhone မှာ 25kb သို့မဟုတ် ဒီထက်နည်းတဲ့ assets တွေကို ပဲ cache လုပ်ပါတယ်။ ဒါကြောင့် ပြန်သုံးဖို့လိုမယ့် file တွေကို ဒီ limit အတွင်းဝင်အောင်လုပ်ဖို့ လိုပါလိမ့်မယ်။ ဒီလိုလုပ်ဖို့အတွက် image အကြီးတွေကိုဆို အပိုင်းပိုင်းဖြတ်ဖို့လိုပါမယ်။ Javascript file တွေလည်းတူတူပါပဲ file size သေးသေးလေးတွေ အပိုင်းလိုက်ခွဲပြီး ပြန်ချိတ်ပေးရပါလိမ့်မယ်။ ဒါပေမယ့် ဒါတွေကို iPhone အတွက်ပဲသုံးတာကောင်းပါတယ်။ မဟုတ်ရင် တခြား browser တွေမှာ HTTP request ပိုများစေပါတယ်။
နောက်ဆုံးတစ်ချက်ကတော့ @font-face နဲ့ font embedding လုပ်တဲ့ကိစ္စပါပဲ။ iPhone Mobile Safari က ဒါကို အပြည့်အဝ support မလုပ်ပါဘူး။ သူက SVG format ကိုပဲ support လုပ်ပါတယ်။ ဒါပေမယ့် SVG font တွေကို Chrome, Opera နဲ့ iPhone ကပဲ support လုပ်ပါတယ်။ ဒါကြောင့် တခြား browser တွေအားလုံးမှာလည်း ရအောင် တစ်ခုခုတော့ထပ်လုပ်ဖို့လိုပါလိမ့်မယ်။ SVG အပြင် Firefox နဲ့ Safari အတွက် .otf သို့မဟုတ် .ttf, IE အတွက် Embedded Open Type (EOT) လိုပါလိမ့်မယ်။ (ယုံမလားတော့မသိဘူး IE က @font-face ကို IE4 ကတည်းက support လုပ်ပါတယ်။)
လိုအပ်တဲ့ file တွေရပြီဆိုရင်တော့ အားလုံးကို CSS နဲ့ အောက်ကအတိုင်းရေးလိုက်ပါမယ်။
iPhones မှာ <input type=”file” /> ဆိုတာကို internal file structure တွေကို access လုပ်ခွင့်မပေးတဲ့အတွက် support မလုပ်ပါဘူး။ တခြား mobile devices တွေက computer နဲ့ ချိတ်တဲ့အခါမှာ external storage device အနေနဲ့ ချိတ်လို့ရပေမယ့် Apple ကတော့ သူ့ device တွေရဲ့ File structure ကိုနည်းနည်းရှုပ်ထွေးအောင်လုပ်ထားပါတယ်။
နောက်တစ်ခုကတော့ iPhone မှာ 25kb သို့မဟုတ် ဒီထက်နည်းတဲ့ assets တွေကို ပဲ cache လုပ်ပါတယ်။ ဒါကြောင့် ပြန်သုံးဖို့လိုမယ့် file တွေကို ဒီ limit အတွင်းဝင်အောင်လုပ်ဖို့ လိုပါလိမ့်မယ်။ ဒီလိုလုပ်ဖို့အတွက် image အကြီးတွေကိုဆို အပိုင်းပိုင်းဖြတ်ဖို့လိုပါမယ်။ Javascript file တွေလည်းတူတူပါပဲ file size သေးသေးလေးတွေ အပိုင်းလိုက်ခွဲပြီး ပြန်ချိတ်ပေးရပါလိမ့်မယ်။ ဒါပေမယ့် ဒါတွေကို iPhone အတွက်ပဲသုံးတာကောင်းပါတယ်။ မဟုတ်ရင် တခြား browser တွေမှာ HTTP request ပိုများစေပါတယ်။
နောက်ဆုံးတစ်ချက်ကတော့ @font-face နဲ့ font embedding လုပ်တဲ့ကိစ္စပါပဲ။ iPhone Mobile Safari က ဒါကို အပြည့်အဝ support မလုပ်ပါဘူး။ သူက SVG format ကိုပဲ support လုပ်ပါတယ်။ ဒါပေမယ့် SVG font တွေကို Chrome, Opera နဲ့ iPhone ကပဲ support လုပ်ပါတယ်။ ဒါကြောင့် တခြား browser တွေအားလုံးမှာလည်း ရအောင် တစ်ခုခုတော့ထပ်လုပ်ဖို့လိုပါလိမ့်မယ်။ SVG အပြင် Firefox နဲ့ Safari အတွက် .otf သို့မဟုတ် .ttf, IE အတွက် Embedded Open Type (EOT) လိုပါလိမ့်မယ်။ (ယုံမလားတော့မသိဘူး IE က @font-face ကို IE4 ကတည်းက support လုပ်ပါတယ်။)
လိုအပ်တဲ့ file တွေရပြီဆိုရင်တော့ အားလုံးကို CSS နဲ့ အောက်ကအတိုင်းရေးလိုက်ပါမယ်။
1 2 3 4 5 6 7 8 | @font-face{ font-family: ‘Comfortaa Regular’; src: url(‘Comfortaa.eot’); src: local(‘Comfortaa Regular’), local (‘Comfortaa’), url(‘Comfortaa.ttf’) format(‘truetype’), url(‘Comfortaa.svg#font’) format(‘svg’);} |
Special iPhone/ iPad Enhancements
ဘယ်လောက်ပဲအားနည်းချက်တွေရှိရှိ iPhone ကတော့ developer တွေအနေနဲ့ တခြား old model mobile ဖုန်း တွေမပေးနိုင်တဲ့ user experience တွေကို ပေးနိုင်ပါတယ်။
iPhone မှာ ဒီထက်ပိုပြီး advanced ဖြစ်တဲ့ functionality တွေကို ထပ်လုပ်လို့ရတဲ့ Javascript libraries တွေရှိပါတယ်။Sencha Touch, jQTouch နဲ့ iui ကို တစ်ချက်ကြည့်ကြည့်လိုက်ပါ။ အဲဒီ Library သုံးခုက သင့် mobile website အတွက် ပိုကောင်းတဲ့ interface ကိုပေးနိုင်မှာပါ။ Android မှာလည်းလုပ်ပါတယ်။ jQuery Mobile ကိုလည်းကြည့်ထားသင့်ပါတယ်။
နောက်တစ်ခုက User ရဲ့ iPhone မှာ Icon နေရာလေးတစ်ခုရဖို့ အတွက်နေရာက App Store တစ်ခုတည်းမဟုတ်ပါဘူး။ သင့် ဆိုဒ်ရဲ့ Bookmark လေးရှိနေပြီဆိုရပါတယ်။ ဒါပေမယ့် default bookmark icon ကတော့ page ရဲ့ screenshot ချုံ့ ပြီး icon လုပ်လိုက်တဲ့အတွက် သိပ်ပြီး ကြည့်မလှပါဘူး။ ဒါကြောင့် iPhone အတွက် icon လေးလုပ်မယ်ဆိုရင် tag ထဲမှာ အောက်ကအတိုင်းရေးပေးလိုက်ပါ။
iPhone မှာ ဒီထက်ပိုပြီး advanced ဖြစ်တဲ့ functionality တွေကို ထပ်လုပ်လို့ရတဲ့ Javascript libraries တွေရှိပါတယ်။Sencha Touch, jQTouch နဲ့ iui ကို တစ်ချက်ကြည့်ကြည့်လိုက်ပါ။ အဲဒီ Library သုံးခုက သင့် mobile website အတွက် ပိုကောင်းတဲ့ interface ကိုပေးနိုင်မှာပါ။ Android မှာလည်းလုပ်ပါတယ်။ jQuery Mobile ကိုလည်းကြည့်ထားသင့်ပါတယ်။
နောက်တစ်ခုက User ရဲ့ iPhone မှာ Icon နေရာလေးတစ်ခုရဖို့ အတွက်နေရာက App Store တစ်ခုတည်းမဟုတ်ပါဘူး။ သင့် ဆိုဒ်ရဲ့ Bookmark လေးရှိနေပြီဆိုရပါတယ်။ ဒါပေမယ့် default bookmark icon ကတော့ page ရဲ့ screenshot ချုံ့ ပြီး icon လုပ်လိုက်တဲ့အတွက် သိပ်ပြီး ကြည့်မလှပါဘူး။ ဒါကြောင့် iPhone အတွက် icon လေးလုပ်မယ်ဆိုရင် tag ထဲမှာ အောက်ကအတိုင်းရေးပေးလိုက်ပါ။
1 | <link rel=”apple-touch-icon” href=”/customIcon.png” /> |
ပုံရဲ့ size က 57 x 57 pixel PNG ဖြစ်ရပါမယ်။ rounded corner နဲ့ glossy effect အတွက်တော့မပူပါနဲ့ iPhone ကသူ့ပါသူ ထည့်ပေးပါလိမ့်မယ်။
Mobile ဘက်ကို ပြောင်းလဲလာတာတွေက ကမ္ဘာ တစ်ဝန်းမှာ တိုးပွားလာတာကြောင့် website တွေကို handheld device တွေမှာ support လုပ်ဖို့ က အရေးကြီးလာပါပြီ။ mobile က global web browsing ရဲ့ အရေးကြီးတဲ့ အပိုင်းမှာ ပါဝင်လာပေမယ့် သူ့ အတွက် technology တွေကတော့ နုနယ်သေးပါတယ်။ Desktop browsing မှာ စံသတ်မှတ်ချက်တွေ ထွက်လာခဲ့တုန်းကလိုပါပဲ။ အခု mobile browser တွေမှာလည်း တူညီတဲ့ စံသတ်မှတ်ချက်အသစ်တွေ ထပ်ထွက်လာအုံးမှာပါပဲ။ အဲဒီအခါကျရင် အပေါ်မှာ ပြောခဲ့တဲ့ အချက်တွေက အသုံးဝင်ချင်မှာ ဝင်တော့မှာပါ။ Web Development မှာ မပြောင်းလဲတာ တစ်ခုပဲရှိပါတယ် အဲဒါကတော့ ပြောင်းလဲနေတဲ့ technology အလိုက် လေ့လာနေရမယ်ဆိုတာပါပဲ။ 
အားလုံးကိုကျေးဇူးတင်ပါတယ် ..
မှတ်ချက်။ ။ Smashing Magazine မှထုတ်သော Mobile Design စာအုပ်မှ How to build a mobile website ကို နားလည်သလို ဘာသာပြန်ထားခြင်းဖြစ်ပါသည်။