website တစ်ခုမှာ အရေးပါဆုံးက Content ပါ။ လူတွေ အဓိက ကြည့်ကြတာ ဖတ်ကြတာ content ပါ။ ဒါကတော့ လူတိုင်း နားလည်ပါတယ်။ ဒါပေမယ့် content က အရေးပါတယ်ဆိုပေမယ့် စာတွေကို ဖတ်ချင် စိတ်မရှိအောင် လုပ်ထားတဲ့ site တွေကို တွေ့ဖူးတယ်။ website တစ်ခုကို ကြည့်လိုက်တာနဲ့ အဲဒီလူတစ်ယောက် website design ကို လေ့လာတာ သို့မဟုတ် internet မှာ website တွေကို ဖတ်တာ ဘယ်လောက် အတွေ့အကြုံ ရှိပြီလဲဆိုတာကို သိနိုင်တယ်။

Beginners have same design

အခုမှ html website စလုပ်တဲ့သူတွေမှာ တူညီတဲ့ design ရှိတယ်။ အထူးသဖြင့် css မလေ့လာပဲ HTML စရေးတဲ့ Beginner တွေပေါ့။ Layout တစ်ခုလုံး ဆောက်ဖို့အတွက် Table ကို အဓိက သုံးတယ်။ နောက်ပြီး nested table တွေ သုံးတယ်။ CSS div သုံးထားတဲ့ layout နဲ့ table သုံးထားတဲ့ layout ယှဉ်ကြည့်ပါ။

<div id="col1">This is col1</div>
<div id="col2">This is col2</div>

<table>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</table>

အဲဒီ code ၂ ခုယှဉ်ကြည့်လိုက်ရင် css နဲ့ ရေးထားတာက ရှင်းရှင်းလေးပါပဲ။ နောက်ပြီး 2 column , 2 rows အတွက် div ၄ ခုနဲ့ CSS ကို ပေါင်းသုံးလိုက်ရုံပဲ။ Table မှာဆိုရင်တော့ နောက်ထပ် tr တစ်ခုထပ်ဖြည့်ရမယ်။ 2 col, 2 rows ကနေ 4 cols ပြောင်းမယ်ဆိုရင် html div ကို ပြင်စရာမလိုပဲ CSS ကို ပြင်လိုက်တာနဲ့ရတယ်။ table ဆိုရင်တော့ tr , td တွေ ပြန်ပြင်ရတာတွေ ရှိတယ်။

Clock , cursor ? နောက်တစ်ခုက မျက်စိနောက်စရာတွေ ပါတာပဲ။ စပြီး လေ့လာကာစလူတွေ နာရီတွေ ထည့်တယ်။ နောက်ပြီး mouse cursor နောက်မှာ စာတွေ လိုက်တာတွေ ထည့်တယ်။ အရမ်းကို မျက်စိနောက်တဲ့ အရာတွေပဲ။ တချက်စဉ်းစားကြည့်ရအောင်။ ဘာလို့ နာရီထည့်ဖို့လိုအပ်လဲ ? တကယ်ကော လိုအပ်ရဲ့လား။ ကျွန်တော့် အထင်တော့ သိပ်မလိုအပ်ဘူး။ နာရီတွေက တစ်နိုင်ငံ နဲ့ တစ်နိုင်ငံ အချိန် ကွာခြားချက်တွေ ပြတာကလွဲလို့ အလကားနေရင်း website ထဲမှာ ထည့်ဖို့ မလိုဘူးထင်တယ်။ ထည့်လိုက်တော့ လှသွားလားဆိုတော့ အဲလောက်ထိ မထူးခြားပါဘူး။ နောက်ပြီး site တက်တာ loading ပိုလေးသွားစေတယ်ဆိုတာကို သတိပြုသင့်တယ်။ pointer နောက်မှာ စာတွေ လိုက်ဖို့က ဘာတွေ အသုံးဝင်လဲတော့ မသိ။ ကျွန်တော့်အတွက်တော့ မျက်စိနောက်တာပဲလို့ ထင်တာပဲ။

Color ? နောက်တချက်က Color ပဲ။ တချို့ blog တွေက စာဖတ်ချင်ပေမယ့် ကြာကြာမဖတ်နိုင်ဘူး။ ဘာလို့လည်းဆိုတော့ အမည်းပေါ်မှာ အစိမ်းတွေနဲ့ ရေးထားတယ်။ ကြာကြာဖတ်ရင်း လူက မူးလာတယ်။ အဲလိုအခါတွေမှာ စာတွေကို copy paste လုပ်ပြီး ကြည့်ရတာ။ website မှာ အဆင်မပြေဘူးပေါ့။ hacker site တွေက အမည်းရောင်ပေါ်မှာ အစိမ်းရောင် အနီရောင်စာတွေနဲ့ ရေးထားတယ်။ တော်တော်လေးကို ဖတ်ရခက်တာ။ မြန်မာ hacker site အချို့လည်း ရောက်ဖူးတယ်။ အမည်းရောင်ပေါ်မှာ အစိမ်းရောင်စာလုံးတွေနဲ့ ။ စာဖတ်ရတာ မျက်စိ တော်တော်နောက်တယ်လို့ ဆိုရမယ်။

Animation GIF ? နောက်ပြီးရှိသေးတယ်။ gif တွေ ပြွတ်သိပ်ထည့်တာပဲ။ မလိုအပ်ပဲ gif တွေ ထည့်ထားတော့ တော်တော် မျက်စိနောက်တယ်။ အဲ.. background မှာလည်း gif တွေ ဖတ်ထားတော့ ရေးထားတဲ့ စာလုံးစီကို မျက်စိက မရောက်တော့ပဲ လှုပ်ရှားနေတဲ့ gif ပုံတွေဆီပဲ မျက်စိရောက်သွားတယ်။ sidebar တွေမှာ gif တွေ အများကြီးထည့်ထားတာတောင် တွေ့ဖူးသေးတယ်။ sidbar မှာ gif တွေ အများကြီးထည့်ဖို့ မလိုအပ်ဘူးလို့ထင်တယ်။

counter ? counter ဆိုတာက ကိုယ့် website ကို လူဘယ်လောက်ကြည့်လဲဆိုတာကို သိအောင် ထည့်ထားတာပါ။ ဒါပေမယ့် အဲဒါက page view ကို ပြတာ။ ကိုယ် refresh ၅ ခါ ချလိုက်ရင် counter က ၅ ခု တက်သွားမှာပဲ။ Page View ကိုပဲ ပြနိုင်တာ။ visitor ကို မပြနိုင်ဘူးဗျ။ အဲဒီအတွက် Google Analystic ကို သုံးတာ ပိုကောင်းတယ်။ ကိုယ့် site လူဘယ်လောက် ဝင်လဲဆိုတာထက် RSS ဘယ်နှစ်ခု subscribe လုပ်ထားလဲဆိုတာ ပြထားတာက ပိုကောင်းပါတယ်။ RSS အတွက် feedburner ကို သုံးတာ အကောင်းဆုံးပဲ။ မလိုအပ်ရင် counter မထည့်တာ အကောင်းဆုံးပဲ။ မျက်စိရှုပ်တယ်။ counter အများစုက site ရဲ့ design နဲ့ ကိုက်ဖို့ ခက်တယ်။

အဲဒီအပေါ်က အချက်တွေက html လေ့လာပြီးလို့ လုပ်တဲ့လူတော်တော်များများမှာ အဲဒီ အချက်ကို တွေ့ရတယ်။ စပြီးလေ့လာကာစလူတွေက ကိုယ့် site ကို အရမ်းလှချင်ကြတယ်။ နောက်ပြီး တွေ့တဲ့လူတွေက ဟာ … ခနဲ ဖြစ်သွားတာမျိုးလိုချင်ကြတယ်။ အဲဒီတော့ မပြင်တတ် ပြင်တတ်နဲ့ အလှဆုံးဖြစ်အောင် အရမ်းကို ပြင်ကြတယ်။ ဘာနဲ့သွားတူလဲဆိုတော့ အရမ်းလှချင်တဲ့ မိန်းကလေးတွေ နဲ့ သွားတူတယ်။ အလှအပ ပြင်ဖို့လည်း သေချာမလေ့လာထားပဲ အရမ်းအလှပြင်လိုက်တော့ နှုတ်ခမ်းနီက နီရဲရဲ… ပါးက နီရဲရဲ မျက်လုံးက မည်းမည်းကြီးတွေနဲ့ .. နောက်ဆုံး ဘာပုံထွက်သွားလဲဆိုတာ စဉ်းစားကြည့်ပေါ့။

ဘာတွေ လိုအပ်လဲ။

Webdeveloper ပဲ လုပ်ချင်ချင် Web Designer ပဲ လုပ်ချင်ချင် web basic ပိုင်းဖြစ်တဲ့ HTML , CSS , Javascript , jQuery တို့ကို တော့ လေ့လာရမှာပဲ။ HTML တစ်ခုတည်းနဲ့ မပြည့်စုံဘူး။ CSS တစ်ခုတတ်ရုံနဲ့ မပြည့်စုံဘူး။ web တစ်ခုလုံးရဲ့ အခြေခံဖြစ်တဲ့ HTML + CSS ကိုတော့ မဖြစ်မနေ တတ်ရမယ်။ ပြီးရင် javscript နဲ့ jquery တတ်ထားရင် အကောင်းဆုံးပဲ။

နောက်ပြီး website တွေ များများကြည့်ဖို့လိုတယ်။ အဲလို design တွေဖြစ်သွားတာ စိတ်ပျက်စရာမဟုတ်ဘူး။ အခြေခံ စတဲ့လူတိုင်း ဖြတ်ကျော်ခဲ့ရတဲ့ အဆင့်တွေပဲ။ နောက်ပြီး မြန်မာနိုင်ငံမှာ HTML + CSS စတာတွေကို သင်တန်းမှာ တတ်ထားပြီး website တွေ အများကြီး မကြည့်ဖူးတဲ့လူတွေ အများကြီးပဲ။ အများစုက မြန်မာ blog , forum လောက်ပဲ ဖတ်ဖူးကြတဲ့သူတွေ။ website နဲ့ ပတ်သတ်ရင် ဖတ်သင့်တဲ့ http://www.smashingmagazine.com/ တို့ နောက်ပြီး website gallery တွေစုထားတာတွေကို လိုက်မကြည့်ဖူးလို့ပါ။ အဲဒါကို တွေးမိတော့ လူပျိုကြီး ပြောတာ သွားသတိရတယ်။ ဂျပန်ကား တစ်ခုပါပဲ။ မင်းသားက သိုင်းသင်ပြီး သိုင်းကျင့်တာကျင့်နေတာ သူ့skill ဘယ်လောက်ရှိတယ်ဆိုတာ သူမသိဘူး။ တနေ့ လာစိန်ခေါ်တဲ့ လူနဲ့ တွေ့တော့ ကိုင်ပေါက်လိုက်တာ ဟိုလူက တစ်ခါတည်း သေသွားရောတဲ့။ အဲဒါနဲ့ မင်းသား စိတ်ဓာတ်ကျ ဝမ်းနည်းပြီး သင်တန်းကနေ ထွက်သွားတာရော။ ဒါက ဇာတ်လမ်းရဲ့တစ်ပိုင်းပါ။ website ပိုင်းမှာတော့ အိမ်မှာ ငုတ်တုတ်ထိုင်။ HTML + CSS ရေးနေရုံနဲ့ website ကြီးက လှလာမှာ လန်ပြန်ထွက်လာမှာမဟုတ်ဘူး။ သိုင်းမှာကတော့ အလေ့အကျင့်များဖို့လိုတယ်။ နောက်ပြီး ပြင်ပ ဗဟုသုတက ဘဝအတွက် အရေးပါတယ်ဆိုတာ အဲဒီ ဇာတ်လမ်းလေးမှာ ပြသွားတယ်။ လူဆိုတာ ကိုယ့် skill ကိုယ် သိအောင် အမြဲ ကြိုးစားသင့်တယ် ဆိုတာလေးကိုလည်း ပြသွားတယ်။ Beginner တော်တော်များများက skill မသိဘူး။ နောက်ပြီး ဘာတွေ ထပ်လေ့လာရမလဲဆိုတာ မသိဘူး။ နောက်ပြီး website တွေ မကြည့်ဖြစ်ဘူး။ အဲဒီတော့ ဒီ design တွေထဲကနေ မထွက်နိုင်ဘူးဖြစ်တတ်တယ်။

အပေါင်းအသင်းတွေထဲမှာ ကိုယ်ဘယ်လောက်ကြီးပဲ HTML + CSS တွေ ကျွမ်းနေပါစေ။ website တွေ များများကြည့်လိုက်ပါ။ http://www.smashingmagazine.com/ မှာ သူပြောထားတဲ့ site တွေကို ကြည့်လိုက်ပါ။ အဲဒါဆိုရင် ကိုယ် ဘယ်လောက် လိုအပ်လဲဆိုတာကို သဘောပေါက်သွားမယ်။ ကိုယ်က web design ဝါသနာမပါရင် အဲလောက်ကြီး ကောင်းဖို့ မလိုပါဘူး။ ဒါပေမယ့် ဘာတွေကို သုံးသင့် မသုံးသင့်ဆိုတာ နားလည်လာလိမ့်မယ်။

Color Pattern

နည်းနည်းပါးပါး သိပြီး ကိုယ့်ကိုယ် တတ်ပြီလို့ ထင်တဲ့ သင်တန်းဆင်းတွေ အပေါ်ကလို အချက်တွေမတွေ့ရပေမယ့် Color Pattern တွေ လွဲနေတာတွေ တွေ့ရတယ်။ တနည်းပြောရင် အရောင်မအပ်စပ်ဘူးပေါ့။ အဲဒီပိုင်းကိုတော့ ကျွန်တော်လည်း သေသေချာချာ မပြောတတ်ဘူး။ ကျွန်တော်က designer မဟုတ်ဘူး။ ဒါပေမယ့် အချို့ သင်တန်းပြီးခါစ လူတွေ ဆွဲထားတဲ့ site တွေဟာ မျက်စိနောက်တာတွေ ဘာတွေ မဖြစ်ပေမယ့် color တွေက မအပ်စပ်ဘူးဆိုတာ သိသာတယ်။ Color Theory က တကယ်လို အပ်တဲ့ အရာပါ။ ကျွန်တော်လည်း ကောင်းကောင်းမသိလို့ ဖြစ်နိုင်ရင် adobe kular လိုမျိုး site တွေကနေ color pattern ယူပြီး အဲဒီ pattern နဲ့ ပဲ သုံးတာ များပါတယ်။

Content က website တစ်ခုလုံးမှာ အရေးအပါဆုံးပါ။ ဒါပေမယ့် အဲဒီ content ကို စိတ်ကြည်ကြည်လင်လင် နဲ့ အေးအေးဆေးပဲ ဖတ်လို့ ရဖို့အဓိက ကျတယ်။ wikipedia ဆိုရင် ရှင်းတယ်။ စာဖတ်ရတာ အဆင်ပြေတယ်။ သုံးထားတဲ့ h1,h2 စတာတွေကလည်း စာဖတ်ရတာ ပိုအဆင်ပြေတယ်။ content တွေက ပြည့်စုံပေမယ့် အေးအေးဆေးဆေး ကောင်းကောင်းမွန်မွန် ဖတ်လို့ မရရင် content က ဘယ်လောက်ကောင်းကောင်း တော်ရုံတန်ရုံ ဖတ်ချင်ကြမှာ မဟုတ်တာတော့ သေချာတယ်။