Responsive design 2013

Tahun lepas, saya dah pun pos pasal trend web menjadi ‘responsive design’.  Lihat post saya lalu » disini . Ok! Tetapi mengapa saya belum buat web saya menjadi responsive? Apakah susah sangat nak buat? Baik, saya jelaskan…

Tablet Phone

*kredit gambar asal dari Android for the world babeh!

Pertama-tamanya (bahse bende nih?)… adalah sebab aku malas hehe… tak la malas sangat. Sebelum tuh kita berbalik kepada pemahaman basic. Baca dulu link aku bagi atas tuh utk paham sket.

Ok! Listing please! Mengapa perlu responsive web layout?

  • Gajet atau device hari ini punyai paparan yang berbeza.
  • Ini bukan saja saiz ukuran lebar darab tinggi, tapi juga pixel resolusinya
  • Jadi, cabarannya adalah untuk buat web kelihatan sempurna pada apa2 jua saiz dan resolution

 

Dengan ini juga, diberitahulah juga, ada beberapa cara untuk menjadikan web anda boleh dilihat dengan sempurna pada apa jua device (apa aku nak letak dalam bm nih?…. alat? ) :

  1. Detect jenis device atau User Agent, dan arahkan pilih template tertentu. Ini dalam programing, php, asp what ever…. Termasuk panggil CSS yang berbeza bagi setiap template.
  2. Buat design dengan coding yang khusus. Ia kembali kepada trend lama yang ditinggalkan atau jarang guna iaitu dengan kiraan % / percent / peratusan. Cuma bezanya dengan tambahan kod2 yang lebih terkini yang hebat biasanya CSS3

 

Saya akan cuba buat post yang detail pasal senarai di atas, rajin2 la check web nih, book mark sekali pun lagi ok.

Mengapa saya belum buat web jadi responsive?

  1. Sebab trend international, dia awal, local scene? lambat, slow, delay. Tapi pun web international pun belum ramai yang buat.
  2. Sebab tak mudah, agak pening kepala kalau tak biasa. Tambahan CSS3 agak baru
  3. Sebab BROWSER war masih ada. Seperti di ketahui umum, ada browser lambat support CSS3. IE tentunya…
  4. Sumber pemahaman masih terbatas, bahkan sejujurnya, ada pemahaman pada masa lalu berbeza apa yang aku faham sekarang.

 

Berikut adalah contoh web responsive yang hebat setakat ini, bagi saya ia benchmark terbaik! : Mashable.com 

Boleh test dengan tablet, phone, pc, laptop anda, tengok perbezaannya. Atau resize browser untuk lihat perubahan paparan web tersebut.

Tunnguuu… saya punya theme responsive on the way 😉