Responsive Design

[mohdfadly 24]

 

Lepas berjaya siapkan 1st web responsive design di poskod.com, aku just nak kongsi sikit pengalaman kat sini, ini bukan tutorial lengkap untuk jadikan laman web responsif sepenuhnya, cuma bacaan ringan berdasarkan apa yg aku faham (masih bnyk lagi kena belajar).

 

Apa itu Responsive Design?
Reka bentuk web responsif (RWD) adalah satu pendekatan reka bentuk web yang bertujuan untuk menyediakan rekabentuk yang mudah dibaca dan dinavigasi dengan sekurang-kurangnya bersaiz semula, panning, dan menatal-seluruh pelbagai peranti (dari monitor komputer ke telefon mudah alih).

Responsive design ni sebenarnya direka membolehkan sesuatu laman web untuk mengenal saiz skrin yang digunakan dan kemudian mengubah bentuk halaman untuk lebih sesuai dengan skrin peranti yang digunakan samada desktop/phone/tablet. Advantage menggunakan responsive design ni kita cuma perlukan satu laman web dengan cth 3 bentuk design tanpa perlu membina 3 versi laman web yg berasingan. Dengan membuat 3 media query berasingan di CSS dan sedikit kod untuk membaca saiz skrin laman dengan mudah ia menjadi responsif.

 

Asas Responsive Design

Ada 2 komponen penting untuk membuat web yang responsif selain struktur HTML itu sendiri:

 

1) Meta tag

2) CSS

 

Meta

<meta name="viewport" content="width=device-width, initial-scale=1">

 

 

CSS

@media screen and (max-width: 720px) {}

Contoh set block of rule CSS di atas akan melebarkan viewport menjadi 720px atau kurang dari 720px.

 

Kalau dalam style biasa kita tulis:

 

#content { 
  width: auto; 
  float: none; 
}

dan untuk jadikannya responsive mengikut saiz 720px kita akan masukkan #content ke dalam media query, konsep dia lebih kurang macam if condition:

 

@media screen and (max-width: 720px) {
    #content { 
      width: auto; 
      float: none; 
    }
}

 

Dari research yang aku buat, walaupun terlalu banyak sangat jenis peranti/smartphone yang berbeza saiznya di pasaran, kebanyakan smartphone (android/blackberry) menggunakan saiz skrin kurang dari 960x640px, manakala tablet akan menggunakan saiz kurang dari 1024x768px. Memadai saja dengan membuat 2 atau 3 saiz media query berasingan.

 

Rujukan:

http://en.wikipedia.org/wiki/Responsive_web_design

http://www.copyblogger.com/mobile-responsive-design-101/

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

http://spirelightmedia.com/resources/responsive-design-device-resolution-reference

[ahaksz! 44]

Nice bro!  :3: Tak penah lagi try code responsive design nie from scratch. Selalu guna framework je. Baru godek website poskod.com tu. Mmg nice :)

[mohdfadly 24]

trimas bro.. memang best.. satu pengalaman baru.. guna framework pun ok jugak.. ada banyak framework yang boleh siap guna..

aku pun bukannya 100% buat from scratch, bnyk jugak yang copy dari code orang lain..  :3:

[KeH 15]

nice website poskod tu.

 

nak tambah skit, utk test/preview tgk website kita dekat phone macam mana rupa dia boleh guna website ni http://emulator.mobilewebsitesubmit.com/

[mohdfadly 24]

ha'a.. emulator ni pun penting utk testing

 

 

nak tambah skit, utk test/preview tgk website kita dekat phone macam mana rupa dia boleh guna website ni http://emulator.mobilewebsitesubmit.com/

 

 

Tambah lagi.. ni beberapa framework grid system yang kita boleh guna untuk web responsif.

 

960 - http://960.gs/‎ (antara yg famous)

Gumby - http://gumbyframework.com/

Responsive - http://responsive.gs/

RWD Grid - http://rwdgrid.com/

Simple Grid - http://thisisdallas.github.io/Simple-Grid/