ကျွန်တော့် အနေနဲ့ Website တွေ ရေးတဲ့နေရာမှာ Fixed Width Layout တွေကို ပိုပြီး သဘောကျ နှစ်သက်မိပါတယ်။ အဲဒီလို ဘာကြောင့် ကြိုက်ရတာလဲ ဆိုရင် Pixel Perfect ဖြစ်တာကြောင့်ပါ။ Pixel တွေကို အသေးစိတ် တိတိကျကျ ချလို့ရတဲ့အတွက် Site ဒီဇိုင်းကို စိတ်ကြိုက်ပုံဖော်လို့ ရစေပါတယ်။ အဲဒါကြောင့် Fluid Layout တွေထက်စာရင် Fixed Width Layout တွေနဲ့ ပိုပြီး ရင်းနှီးကျွမ်းဝင်တယ်လို့ ဆိုနိုင်ပါတယ်။

ဒါပေမယ့် ခုနောက်ပိုင်းမှာ Browser ဆိုတာတွေက အရမ်းကို ထွေပြားလာတယ်လို့ ဆိုနိုင်ပါတယ်။ ရိုးရိုး ကွန်ပျူတာတွေမှာ 1024 x 768 ကို အခြေခံတဲ့ 960px fixed width က အဆင်ပြေတယ်ဆိုပေမယ့် နောက်ပိုင်းမှာ Mobile Browser, Tablet Browser စသည်ဖြင့် Screen Size မျိုးစုံ  ဖြစ်လာတဲ့အခါ ဘယ်ဟာကို စံထားရမှန်းကို မသိတော့တဲ့ အနေအထား ဖြစ်လာပါတယ်။ အဲဒီအတွက် အကောင်းဆုံး အနေအထားကို ရှာတော့ Adaptive Fluid Layout ဆိုတာကို သွားတွေ့ပါတယ်။

Adaptive Fluid Layout

အပေါ်မှာ ပြထားတဲ့ CSS Tricks ဆိုတဲ့ Website မှာ Adaptive Fluid Layout ကို သုံးထားတာ တွေ့နိုင်ပါတယ်။ ကျွန်တော်ပြထားတာက ပုံမှန် 1280 x 800 မှာ ကြည့်တာပါ။ Column ကို သုံးခု ခွဲထားတာ တွေ့ရပါလိမ့်မယ်။ အဲဒီနေ တစ်ဆင့် ကျွန်တော်တို့ ပုံမှန် သုံးနေကြ 960 based အတွက် လာပါတယ်။ Column နှစ်ခုတည်း ဖြစ်သွားပါတယ်။

အဲဒီကနေ တစ်ဆင့် Mobile တွေအတွက် ရည်ရွယ်ပုံရတဲ့ Column တစ်ခုတည်းပုံစံကို ပြောင်းသွားပါတယ်။

အဲဒီလို Adaptive Fluid Layout ပုံစံတွေကို net.tutplus တို့ Web Designer Wall တို့မှာလဲ သုံးလာတာ တွေ့ရပါတယ်။ အဲဒီလို Adaptive Fluid Layout ကို Responsive Web Design လို့လဲ ခေါ်တာ တွေ့ရပါတယ်။

Adaptive Fluid Layout က ဘာတွေကောင်းလဲ

• Fluid Layout တွေရဲ့ ထုံးစံအတိုင်း Flexible ဖြစ်သွားတဲ့ အကျိုးကျေးဇူးတွေ ရလာပါတယ်။
• တစ်ခုခုအပေါ် အခြေတည်လိုက်တဲ့အခါ (ဥပမာ – 960 အပေါ် အခြေတည်လိုက်တဲ့အခါ) ဖြစ်လာတတ်တဲ့ White Space တွေကို ရှောင်ရှားနိုင်ပါလိမ့်မယ်။ အသုံးပြုသူရဲ့ Screen မျက်နှာပြင်ကို အပြည့်အဝ အသုံးချနိုင်စွမ်း ရှိလာမှာ ဖြစ်ပါတယ်။
• Absolute Fluid Layout ပုံစံမျိုး မဟုတ်ပဲ Fixed Width ဖြစ်သင့်တဲ့ဟာကို Fixed Width ထား Fluid ဖြစ်သင့်တာကို Fluid ထားတဲ့အတွက် Pixel Perfect (Pixel တစ်ခုခြင်းစီကို အသေးစိတ်တွက်ချက်ပြီး ပုံစံချနိုင်ခြင်း) လည်း အတန်အသင့် ဖြစ်သွားစေပါတယ်။
• Mobile Version အတွက် သီးသန့် ရေးပေနေစရာ မလိုတော့ပဲ Screen အပေါ်မှာ မူတည်ပြီး ပြောင်းလဲ သွားစေပါတယ်။
• အသုံးပြုသူတွေကို စိတ်ကြိုက် ရွေးချယ်ခွင့် ပေးလိုက်တဲ့အတွက် အသုံးပြုသူတွေရဲ့ စိတ်ကျေနပ်မှုကိုလဲ ရရှိစေမှာ ဖြစ်ပါတယ်။

Adaptive Fluid Layout က ဘာတွေ မကောင်းဘူးလဲ

• Adaptive Fluid Layout တွေက JavaScript လိုပါတယ်။ အဲဒီအတွက် JavaScript ကို Enable မပေးထားတဲ့ Browser တွေမှာ အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။
• Menu တွေကို ရေးဆွဲတဲ့ နေရာမှာ လိုသလို လိုက်ပါ ပြောင်းလဲပေးဖို့ လိုတဲ့အတွက် အခက်အခဲတွေ ရှိလာမှာ ဖြစ်ါတယ်။
• Skill လိုအပ်ချက် Learning Curve အနည်းငယ် မြင့်သွားမှာ ဖြစ်ပါတယ်။
• ပုံတွေကိုလဲ လိုသလို လိုက်ပါ ပြောင်းလဲပေးဖို့ လိုမှာ ဖြစ်တဲ့အတွက် ပုံတွေနဲ့ ပတ်သက်တဲ့ Pixel Perfect ဖြစ်မှု လျော့ကျသွားနိုင်ပါတယ်။

ဒါပေမယ့် Adaptive Fluid Layout တွေကတော့ Fixed Width Layout တွေရဲ့ အားသာချက်တွေကိုလဲ အသုံးချပြီး ဖြစ်သလို Fluid Layout တွေရဲ့ အားသာချက်တွေကိုလဲ အသုံးချပြီးသား ဖြစ်စေပါတယ်။ အဲဒါကြောင့်လဲ နာမည်ကြီး Website အတော်များများမှာ အသုံးပြုလာကြတာ တွေ့ရပါတယ်။Next Big Trend လို့တောင် သတ်မှတ်လို့ ရနိုင်မယ် ထင်ပါတယ်။

အားလုံးပဲ ရွှင်လန်းချမ်းမြေ့ပါစေ …

သီဟ (Myanmar Links)

3 Responses

1. junemoe says:

   March 15, 2011 at 5:00 PM

   so thanks bro…

   Reply
2. ဟိန်းဇော်ထက် says:

   March 15, 2011 at 7:36 PM

   Fixed Layout က အကောင်းတယ် ။
   Fluid က Screen resolution ကွဲရင် မလှပဲနေ ဦး မယ်။

   Reply
3. YAR ZAR AUNG says:

   March 15, 2011 at 9:59 PM

   @HEIN ZAW HTET : Read carefully. You better check webdesignerwall(dot)com for demonstration what this post really means to. You should resize your browser to 1280px, 980px n iphone n android browser dimension. Then feel the magic. This new trend will be popular in very soon with its friends html5 n css3.

   Reply