#Info : Rekaan Web 2012 – Susun Atur Responsif
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
27 Komen
Tinggalkan Komen Anda
nice information…thanks
disebabkan css3 masuk tak support sepenuhnya oleh makhluk2 bumi, maka aku tulis dua kaedah
1. css3 media queries
2. js
so paling tak akan bantu mana2 makhluk yang tak dapat nak baca css3. tapi masalah pula kerana, orang support css3 akan ter-run sekali script tu.
emm macam mana kau nak detect css3-able browser?
ps. bar tatal tu menda?
oh ada tulis atas sekali. terlalu asyik tengok gambar.
Dah tak perlu support user yang guna browser lama. The opportunity cost is much higher.
tapi bang….. tengok skop juga. kalau skop user kita adalah pengguna moden tak de hal. kalau skop kita adalah orang ehem gomen ehem yang guna IE (tak semua gomen guna IE) akan ada masalah.
kita guna 1200 paling kecik, dia tetiba bukak guna 800. mampus~
Doesn’t matter. Kalau mindset kena tunggu orang yang memang tak nak move on.
Memang akan maju ke depan. Bukan government dan stop procure monitor bawah 17″ kebawah?
Rasanya paling minimum sekarang pun 1200 width.
ada bro. ada
sebab aku pernah nampak haha. mungkin diorang tak sampai bajet nak tukar lagi kot.
tak payah support. stop caring about them.
kalau mampu kata gitu memang dah buat hahaha
bar tatal tuh ‘scrollbar’. aku #facedesk berkali2 bila nk tulis ‘bar tatal’ tuh. nmpk sngat awkward
rasanya semua latest browser sekarang support responsive ni, malahan phone pun dah support. jadi kalau penguna tu guna yang baru, tiada masalah, main browser akan support selagi mereka guna yang terbaru.
kalau masih guna ie 6,7, buat apa, diorang yang tak nak update, jadi diorang yang ada masalah.
aku dulu pernah intern kat satu developer portal, cost beribu client terpaksa bayar semata-mata mereka nak support penguna ie yang lama. bagi developer takpelah untung, tapi bagi client bukan ke membazir?
sebab tu sekarang, memang orang tak ambil tahu dah pasal ie yang lama. micrsoft sendiri pun sekarang paksa update ie, kerana mereka dah bazir banyak duit nak support orang yang guna ie lama.
kekadang kita perlu mengajar orang yang ignorant, bukan ikut diorang.
yap, saya suka ayat ni:
“kekadang kita perlu mengajar orang yang ignorant, bukan ikut diorang.”
teurtama gomen, pi mai pi mai dok tang tu jugak
+1
Aku orang gomen. Sebenarnya nak beli pc baru kat gomen ni payah. PC lama masih ok, kenapa nak bazirkan duit beli yang baru. Tu yang sebahagian besar masih pakai pc lama p3, p4. Lagi pun kerjanya cuma untuk taip surat2 je. Facebook, twetter, youtube apa semua dah disekat dan tak dibenarkan..
Duit rakyat juga yang dapat dijimatkan… Kat ofis aku, ada boss aku minta aku salinkan fail kat dalam disket… pening kepala woo… Ada lagi ke jual disket ni… Kalau aku email kan je lagi mudah…
eik.. Pentium 3 & Pentium 4 dah tak boleh pakai Google Chrome, Firefox & Safari ke? lolololololol
apa kaitan dengan akses disekat dengan responsive web? ahahah
mungkin maksud dia, dia tak masuk internet pun so tak perlu.
tapi tu la. kalau orang yang genre gini aku tak kisah sebab dia memang tak masuk web.
ni yang jenis masuk ke web
alang2 disket. baik bagi fail guna kad tebuk. baru la old skoler
tapi serius. disket? mahal woi!
kalau ie6/7 memang patut tukar. obsolete dah tu. haha
moga aku diberi kekuatan untuk mengajar mereka2 itu
aku punya theme pun responsive rupanya.. patut la ada tulis resize kat bottom right blog..
<– noob css
nice info.
Sekarang smartphone dengan tablet ada pelbagai saiz pelayar. Jika buat sistem developer kena fokus pada CSS untuk memudahkan pengguna. Terima kasih kerana kongsi info berguna
Tak faham
info yg berguna,thanks!!
Time to transform my blog!
Tu la pasal gomen kena pencen awal.. kah3
ramai yang fokus teknologi lama pada gomen je. sedar atau tak sbnrnya banyak lagi agensi besar2 macam bank pon pakai pc tahap lama. dan biasa yg cakap “jangan layan org macam ni” tak pernah berkerja utk buat spesifik projek yg client macam ni. Ikut pengalaman aku, dkt pc org lain cantik, kena kat pc bos dia yg bercabuk gila babi tu tak cantik, 2-3 jam aku kena maki dgn bos dia. tambah pulak kena maki lagi 4-5 jam dgn project manager sbb dia pon kena maki. dah tu tambah lagi kena maki dgn bos sendiri lepas tu. Keje programmer dkt development house ni mmg makan maki je. kenyang. tak yah makan kfc.
Aku harap dah tak masuk ke dunia tu lagi. Tapi byk juga aku belajar dari situ. belajar mcm mana nak bagi support teknologi baru + lama. cuma apa yg aku belajar tu dah tak berapa relaven dgn teknologi2 baru mcm responsif ni.
/ typical \