လွပေသာ..Web Design ၿဖစ္ဖို့ရာ..

Web Design တစ္ခုကို Table Less Design ဆြဲတတ္မယ္.. Animation ေတြကို Flash အစား Jquery အသံုးျပဳျပီးသံုးတတ္မယ္ဆိုရင္ Professional Web designer တစ္ေယာက္အေနနဲ႔ စတင္ရပ္တည္နုိင္ျပီလို႔သတ္မွတ္  လို႔ရပါတယ္..

Table Less Design ဆုိတာကို ေအာက္မွာ ထပ္ရွင္းျပေပးပါ႔မယ္.. တကယ္ေတာ႔ Web designer တစ္ေယာက္ျဖစ္ဖို႔ဆိုတာ ထင္သေလာက္မလြယ္ပါဘူး… ကိုယ္ေရးတဲ႔ ဒီဇိုင္းက သံုးတဲ႔လူေတြနဲ႔အဆင္ေျပ မလား (Usability)  လူတိုင္းေကာ ကိုယ္ေရးတဲ႔ ဆိုဒ္ကိုၾကည္႔လို႔ရပါ႔မလားဆိုတာ

ေတြ(Accessibility) ကို ေတြးရပါမယ္.. ေနာက္ျပီး အမ်ားသိတဲ႔အတုိင္း အေရာင္စပ္ပံုစပ္နည္းကလဲ အေရးၾကီးတဲ႔အပိုင္းမွာပါပါတယ္..

 ေနာက္ ခုေခတ္ပိုင္းမွာေပၚလာတဲ႔ Chrome / Opera အစရွိတဲ႔ဲ႔ web browser ေတြအမ်ိဳးမ်ိဳးမွာေကာ Compatiable ျဖစ္ရဲ႔လား..ဒါေတြကို အားလံုးနဲ႔ကိုက္ညီေအာင္ စဥ္းစားျပီးDesign ေရးဆြဲရမွာျဖစ္ပါတယ္..

ဥပမာ IE ကိုလူေတြအသံုးမ်ားတဲ႔အတြက္ Designer ေတြဟာ IE နဲ႔ဘဲ Test လုပ္ၾကပါတယ္.. Firefox , (Chrome , Opera in Macintosh) ေတြမွာေကာ ၾကည္႔လို႔အဆင္ေျပရဲ႔လားဆိုတာပါ ထည့္သြင္႔စဥ္းစားေပးရမွာျဖစ္ပါတယ္.. Browser တခုမွာ ဒီဇိုင္းကတမ်ိဳးစီျဖစ္မေနသင္႔ပါဘူး.. အဲဒါေၾကာင္႔ Browser compatibility ဟာ ဒီဇိုင္နာတေယာက္ရဲ႕ အေရးၾကီးတဲ႔ အခ်က္အလက္ထဲက တခုအပါအ၀င္ျဖစ္ပါတယ္..

အဲဒိအတုိင္းပဲ  Accessibility ဟာလဲ အလြန္အေရးၾကီးပါတယ္..  Accessibiltiy ဆိုတာ ကိုယ္ ၀က္ဘ္ဆိုဒ္ကို လူေတြလြယ္ကူစြာနဲ႔ၾကည္႔လို႔ရနိင္ေအာင္ ဒီဇိုင္းေရးဆြဲျခင္းျဖစ္ပါတယ္..
 ဒီလိုျဖစ္ဖို႔ဆို Clean Layout ျဖစ္ဖုိ႔လည္းလိုအပ္ပါတယ္.. ၾကည့္လိုက္တာနဲ႔ ဘယ္ Link ကုိနွိပ္ရင္ဘယ္ေရာက္မယ္ဆုိတဲ႔ ရွင္းလင္းေနတဲ႔ လမ္းညႊန္ေျမပံုတခုလို ျဖစ္ေနရမွာပါ..
 ဒါမွလဲ ကိုယ္႔၀ဘ္ဆုိဒ္ရဲ႔ User ေတြကုိ ကုိယ္ေပးခ်င္တဲ႔ Information ကုိထိထိေရာက္ေရာက္ေပးႏုိင္သလုိ.. user တေယာက္အေနနဲ႔လဲ သူလုိခ်င္တဲ႔ information ကုိလြယ္လင္႔တကူ ရွာေတြ႔ႏိုင္မွာျဖစ္ပါတယ္..  ဒီဇိုင္းေရးဆြဲရာမွာ ဒီလုိမ်ိဳးအဘက္ဘက္ကစဥ္းစားျပီးေရးဆြဲရမွာျဖစ္ပါတယ္..

ဒီလို Website ကို Accessibility Standard ျဖစ္ဖို႔ The W3C (World Wide Web Consortium) က international Standard အျဖစ္  Web Accessibility Initiative (WAI) ဆိုျပီး level လိုက္ခြဲျခမ္းထားရွိပါေသးတယ္..အဲဒါေတြကုိ ေနာက္ထပ္ web design အပုိင္း(၂)မွာ ထပ္ေဖာ္ျပေပးပါ႔မယ္။ ဒါေတြကိုသိဖို႔ဆိုရင္ Persona /Wireframe စသည္ေတြကို ေကာင္းေကာင္းအသံုးခ်ျပီးစဥ္းစားရပါတယ္.. ထို႔ျပင္ ခုေခတ္မွာ Website Design ကို အရင္လို Table ေတြသံုးျပီး မေရးသားၾကေတာ႔ပါဘူး ..

Website Design တစ္ခုလံုးကို CSS တစ္ခုတည္းအသံုးျပဳျပီးေရးသားေနၾကပါျပီ… ျမန္မာျပည္မွာလည္း ဆိုဒ္တစ္ခ်ိဳ႔က ဒီလုိနည္းနဲ႔ေရးေနၾကပါတယ္..
ျပီးေတာ႔ ေရးနုိင္တဲ႔လူအနည္းအက်ဥ္းေတာ႔ရွိၾကပါတယ္..  ဒါေပမယ္႔ ဒီလုိမ်ိဳးေရးတတ္ေအာင္ Training ေပးတဲ႔သင္တန္းမ်ိဳးကိုေတာ႔ မေတြ႔မိေသးပါဘူး..

ဒီေနရာမွာ တကယ္႔ Professional Web designer နဲ႔ သာမန္ Web designer ကြာတာေတြ႔ရပါလိမ္႔မယ္… သာမန္ Web design မ်ားစြာကို အခ်ိန္တိုအတြင္းသင္ယူနုိင္ ၊ ေရးဆြဲနုိင္ေပမယ္႔ ဒီ  Tabless ဒီဇိုင္းကက်ေတာ႔ အခ်ိန္ေပးရပါတယ္.. ေနာက္ျပီး CSS ကို browser တမ်ိဳးနဲ႔တမ်ိဳး သတ္မွာထားတာခ်င္းမတူလို႔ browser အားလံုးနဲ႔ အဆင္ေျပေအာင္ လုပ္ရတဲ႔အပိုင္းမွာလည္း အခ်ိန္ေပးရပါတယ္…

CSS ဆိုတာ Cascading style sheet လို႔ေခၚျပီး  html ကို ဒီဇိုင္းလုပ္ေပးတဲ႔အခါမွာသံုးပါတယ္..
Html file မွာ Content ေတြကို အေသးစိတ္ ဘယ္လို Format/Design လုပ္ရမယ္ဆိုတာေတြြမပါတဲ႔ အတြက္ေၾကာင္႔ WWW က CSS ကို တီထြင္ခဲ႔ၾကပါတယ္…
CSS ကို ေနာက္တစ္မ်ိဳးအေနနဲ႔ေခၚနိုင္တာကေတာ႔ html ဖိုင္ရဲ႔အခြဲတစ္ခုအေနနဲ႔လည္းယူဆနုိင္ပါတယ္…
HTML ဖိုင္တစ္ခုရဲ႔ Content ေတြကို ဘယ္လို အေနအထားေတြ၊ ပံုစံေတြထားမလဲ၊ စာလံုးအရြယ္ေတြ အေရာင္ေတြပံုစံေတြ ဘယ္လိုထားမလဲဆိုတာေတြကို ေရးထားနုိင္ပါတယ္…
ဒါေပမယ္႔ သူ႔မွာက html Content ေတြမပါဘဲ ဒီ Content ေတြကို ပံုစံအမ်ိဳးမ်ိဳးလုပ္ေပးနိင္မယ္႔ Tags ေတြဘဲ ပါပါတယ္…

 CSS ရဲ႔အားသာခ်က္ေတြကေတာ႔

Making changes to the layout

CSS က webpage တခုရဲ႕ ဒီဇုိင္းကုိေျပာင္းလဲဖို႔ အရမး္လြယ္ကူပါတယ္.. တကယ္လို႔ page တခုမွာရွိတဲ႔ ပံုတပံုကုိ Pageရဲ႔ ညဘက္ 10 pixle ေလာက္ေရြ႔ခ်င္တယ္ဆုိပါဆုိ႔.. ဒါေပမဲ႔ အဲဒိpageမွာ css နဲ႔
control မလုပ္ပဲ table ေတြအသံုးျပဳထားတယ္ဆုိရင္ အဲလိုေျပာင္းခ်င္တဲ႔ page တုိင္းကိုဖြင္႔ျပီး table ရဲ႕ width ကုိ လုိက္ျပင္ေပးရပါလိမ္႔မယ္..

တကယ္လို႔သာ CSS နဲ႔ control လုပ္ထားခဲ႔မယ္၊ အသံုးျပဳထားမယ္ဆိုရင္ေတာ႔ CSS တဖုိင္ကုိသာဖြင္႔ျပီး ျပင္ရံုပါပဲဲ.. ဒါဆုိရင္ေတာ႔ ဆုိဒ္တခုလံုးမွာရွိတဲ႔ ျပင္ခ်င္တဲ႔ေနရာမွန္သမွ် ကုိ CSS တဖုိင္ထဲမွာဖြင္႔ျပီး
သက္ဆုိင္တဲ႔ေနရာမွာ ျပင္လို္က္ရံုနဲ႔ ဆုိဒ္တခုလံုး အလုိလုိေျပာင္းျပီးသားျဖစ္ပါလိမ္႔မယ္..

CSS ဖုိင္တခုကုိေျပာင္းလဲအသံုးျပဳရံုနဲ႔ ၀ဘ္ဆုိဒ္တခုလံုးရဲ႕ ဒီဇိုင္းကုိေျပာင္းလဲျပစ္လုိ႔ရပါတယ္.. အဲဒါေတြကေတာ႔ တကယ္ၾကီးတဲ႔ ၀ဘ္ဆုိဒ္ေတြမွာ မရွိမျဖစ္ အသံုးျပဳသင္႔႔ပါတယ္..

File Size

CSSရဲ႕ အသံုးမ်ားတဲ႔ feature ထဲမွာ

CSS ရဲ႔ အသံုးအ၀င္ဆံုးအခ်က္တစ္ခ်က္ကေတာ႔ html file ကေန Style ေတြ Layout ေတြကို Format ထားတဲ႔ Code ေတြကို ဖယ္ထုတ္ျပီး သပ္သပ္ ဖိုင္တစ္ဖိုင္ခြဲလိုက္နုိင္ျခင္းအားျဖင္႔ Html file size ဟာ
အမ်ားၾကီး ငယ္သြားနုိင္ပါတယ္။ေနာက္ျပီး CSSကို user/visitor ရဲ႕ browser ေတြမွာ တၾကိမ္တခါပဲေဒါင္းလုပ္လုပ္ရသလို ျမန္ျမန္ဆန္ဆန္လဲေဒါင္းလုပ္လုပ္လို႔ရပါတယ္.. ထို႔ျပင္ ဒီဖုိင္ကုိပဲ တျခားစာမ်က္နွာေတြမွာ
ျပန္လည္အသံုးျပဳထားတဲ႔အတြက္ စာမ်က္နွာတခါေခၚတုိင္း အဲဒိcss ဖုိင္ကိုိထပ္ခါတလဲလဲေဒါင္းေနစရာမလုိပါဘူး..အဲဒါေၾကာင္႔ server တခုရဲ႕ bandwidth ကိုေလ်ာ႔ခ်ေပးႏုိင္သလို website ရဲ႕ performance
ကုိလဲျမန္ေစတဲ႔အတြက္ users/visitors ေတြကုိ စိတ္ခ်မ္းသာမႈေပးႏုိင္မွာျဖစ္ပါတယ္။

Search Engines

ပံုမွန္အားျဖင္႔ေတာ႔ search engine ေတြက၀က္ဘ္ဆိုဒ္တစ္ခုလံုးက Content စာသားကေန ပထမဆံုးအပိုဒ္ စာသားေတြကို ပိုအေရးၾကီးတယ္လို႔သတ္မွတ္ပါတယ္..
ဒါေၾကာင္႔ search engine ကေနကိုယ္႔၀က္ဘ္ဆိုဒ္ကို ရွာတဲ႔အခါမွာလည္း ကိုယ္ဆိုဒ္က Content စာသားေတြရဲ႔ ပထမဆံုးစာသားေတြကို အရင္ဆံုး ဦးစားေပးရွာေဖြပါတယ္..

Search Engine မ်ားအတြက္ေတာ႔ Table မ်ားနဲ႔ ဒီဇိုင္းဆင္ထားတဲ႔ ၀က္ဆိုဒ္ေတြရဲ႔စာမ်က္နွာမ်ားမွာ Link မ်ားေရးသားထားေသာ Navigation Bar ဟာပံုမွန္အားျဖင္႔ စာမ်က္နွာရဲ႔ပထမပိုင္း(ထိပ္ပိုင္း)မွာ စာမ်က္နွာရဲ႔ အေၾကာင္းအရာအျဖစ္ပါရွိေနပါလိမ္႔မယ္..
ဒါေၾကာင္႔ Search Engine အေနနဲ႔ စာမ်က္နွာမွာပါတဲ႔ အျခားေသာ ပိုျပီးအေရးပါတဲ႔စာကိုယ္(BOdy Text) မ်ားကို ေနာက္မွရွာေဖြေတြ႔ရွိနိုင္လို႔ ကိုယ္႔၀က္ဆိုဒ္ဟာ တျခားေသာ၀က္ဆိုဒ္မ်ားထက္ Search Engine Ranking မေကာင္းတဲ႔အက်ိဴးသက္ေရာက္မွုရရွိနုိင္ပါတယ္..
CSS နဲ႔ ဒီဇိုင္းဆင္ထားတဲ႔ စာမ်က္နွာေတြမွာေတာ႔ ဒီ Link မ်ားပါရွိတဲ႔ Navigation Bar ဟာ စာမ်က္နွာရဲ႔ေအာက္ဆံုးမွာေရာက္ရွိသြားလို႔ Search Engine မ်ားအေနနဲ႔ စာမ်က္နွာရဲ႔ အဓိကစာသားမ်ား၊ အေၾကာင္းအရာမ်ားကို အလြယ္တကူရွာေဖြေတြ႔ရွိနုိင္ပါတယ္..

Accessibility

Html ရဲ႕ content ကေန style တစ္ခုကိုခြဲထုတ္လုိက္ျခင္းအားျဖင္႔ ၀ဘ္ဆုိဒ္ရဲ႕content ေတြကုိ ရွင္းလင္းစြာျမင္ရမယ္။ ျပီးေတာ႔ ျပင္ဖို႔လဲ လြယ္ကူတယ္..


ေနာက္တစ္ခုကေတာ႔ Flash အစား Jquery ကို အစားထိုးအသံုးျပဳလာၾကပါတယ္.. Jquery ဟာ Light formatted ျဖစ္တဲ႔အတြက္  Loading Speed ကို Flash သံုးတာထက္ျမန္ေစပါတယ္..
ထို႔ျပင္ Jquery ဟာ Plugin မ်ားစြာကို Support လုပ္ေပးျပီးျဖစ္တဲ႔အတြက္ အလြယ္တကူဘဲယူျပီးသံုးနုိင္ပါတယ္..

ဒီလို Professional Table less Design with CSS နဲ႔ Jquery ေတြတတ္ေျမာက္နုိင္ဖို႔ Persona, Wireframe ေတြကို အျခခံက်က်ေလ႔လာနုိင္ဖို႔ကို သင္ၾကားေပးဖို႔ info knowledge house က အစီအစဥ္တစ္ခုကိုေရးဆြဲထားပါတယ္..

စိတ္ပါ၀င္စားသူမ်ား 09 73075641၊ 09 5065513 (သုိ႔မဟုတ္) info@infoknowledgehouse.com သုိ႔ အေသးစိတ္ဆက္သြယ္ေမးျမန္းစံုစမ္းႏုိင္ပါသည္။