#Info : Rekaan Web 2012 – Susun Atur Responsif

#Info : Rekaan Web 2012 – Susun Atur Responsif

Diterbitkan pada Feb 25, 2012 oleh .

Tahun 2012 merupakan tahun yang menyaksikan penggunaan susun atur rekaan web responsif di kalangan pembangun laman web. Tidak ketinggalan juga para penulis blog yang mengikuti perkembangan terkini dunia pembinaan laman web, mereka turut sama mengaplikasikan susun atur rekaan web responsif pada laman-laman mereka supaya lebih mesra pembaca dan peranti yang digunakan.

Pengertian : Apa itu susun atur rekaan responsif?

Sebelum diterangkan apa itu responsif, anda perlu mengetahui apakah dia susun atur lebar kekal (fixed width). Susun atur lebar kekal merujuk kepada penggunaan susun atur yang tidak akan berubah apabila saiz pelayar web berubah.

Susun atur tersebut dapat dikenal pasti apabila anda mengubah saiz pelayar anda daripada saiz penuh skrin (fullscreen) kepada yang lebih kecil sedikit. Anda akan mendapati wujud bar tatal (scrollbar) di bahagian bawahnya.

Jadi sekarang, apa pula maksud bagi responsif itu?

Ia merujuk kepada bagaimana kandungan laman web itu dipaparkan pada skrin. Tidak kiralah sama anda anda mempunyai skrin LED 32-inci ataupun skrin telefon pintar kecil seperti Xperia x10 Mini, kandungan laman web itu tetap ‘muat-muat’ pada paparan skrin tersebut tanpa wujud langsung sebarang bar tatal.


Contoh Laman Web Responsif [via]

Susun Atur Responsif : Apakah kelebihannya?

Kelebihan utama ialah ia menjadikan kandungan web sangat mesra pengguna. Sekarang ini, pengguna internet lebih suka menggunakan telefon pintar dan juga tablet untuk melayari kandungan pada laman web berbanding dengan komputer riba dan komputer peribadi.

Manfaat yang besar juga kepada para pembangun web terutama mereka yang menggunakan platform seperti WordPress yang dipasang pada pelayan sendiri kerana apabila mereka menggunakan susun atur responsif pada tema mereka, tidak perlu lagi bersusah-payah untuk memasang sebarang skrip tambahan seperti plugin untuk menjadikan kandungan mereka boleh dipapar dengan baik pada paparan yang lebih kecil seperti penggunaan plugin MobilePress dan WP Touch.

Mengaplikasikan Susun Atur Responsif, Apa Yang Perlu Diketahui?

Susun atur responsif yang berkesan dijana oleh penggunaan ‘peratusan’ berbanding pixels dalam penetapan lebar blok/grid ditambah pula dengan senjata terunggul yang dikenali sebagai CSS3 Media Queries.

Apa pula CSS3 Media Queries? Penjelasan termudah ialah :

Saya menyediakan tiga CSS Stylesheet iaitu ‘Stylesheet A’ untuk paparan 960 pixel dan ke atas, ‘stylesheet B’ iaitu untuk paparan 540 pixel dan ke atas manakala yang terakhir iaitu Stylesheet C’ untuk 540 pixel dan kebawah.

Apabila saiz pelayar dilebarkan secara skrin penuh (fullscreen) pada komputer riba yang mana lazimnya paparan melebihi 960 pixel, maka Stylsheet A akan digunakan. Perkara sama berlaku apabila paparan pelayar dikecilkan kurang daripada 960 pixel sama ada 720 pixel atau 640 pixel atau lain-lain, maka Stylesheet B digunakan.

Hal yang sama berlaku jika anda menggunakan telefon pintar untuk melayar web yang mana lazimnya paparan kurang daripada 540 pixel, maka stylesheet C yang akan digunakan.

Jelas? Tidak lain tidak bukan CSS3 Media Queries bertindak sebagai ‘penanda’ untuk memaparkan kandungan laman anda sesuai dengan pelantar yang memaparkannya.

Penutup dan kata-kata terakhir

Susun atur reponsif terlalu menjadi buah mulut pengguna internet terutama di kalangan pembangun web dan menjadi satu ikutan bermula akhir 2011. Harapannya moga artikel ini memberikan pemahaman umum tentang struktur dan seni unik yang ada pada susun atur responsif itu sendiri.

Jadi, apakah pendapat, dan komen anda berkaitan dengan susun atur responsif ini?

Oleh Aizan Fahri


TIPS & ULASAN