Design Responsive Websites

Rabu, Januari 16, 2013

Responsive design, mungkin bahasan ini bagi sebagian blogger sudah sangat mengetahui seluk beluknya. Namun untuk Blogger Sragen sendiri belum kepingin mencobanya. Responsive theme adalah sebuah template yang dilengkapi dengan style dimana akan mengatur tampilan sesuai dengan ukuran browser yang membuka.

Beberapa teman mungkin sudah menggambarkan bagaimana responsive blogger template ini. Sangat tertarik sekali ingin menggunakan konsep responsive design dalam blog ini. Namun sampai sekarang belum bisa di laksanakan.

Ada beberapa hal yang mungkin membuat saya sedikit mengurungkan niat untuk melakukan perubahan responsive web design. Sudah banyak tutorial yang saya dapat dan sudah sedikit mengerti bagaimana konsepnya bekerja. Namun ketertarikan itu akhirnya sedikit di tunda.

Banyak desain responsive blogspot template yang sudah beredar dan gratis tapi kemungkinan tidak sebanyak wordpress. Mungkin ada yang tidak menyadari untuk urusan desain yang SEO fiendly secara teknis di blogger hanya ada 2 Content Type. Yaitu desain template blogger untuk desktop dan desain template mobile. Nah keterbatasan ini lah yang membuat saya sedikit malas mengembangkan template responsive.

Berbeda sekali jika kita memakai cms open source semisal wp. Responsive wordpress theme akan lebih mudah menentukan area mana yang tidak perlu dan area mana yang perlu di tampilkan. Kita tinggal mendeteksi screen device dan kemudian memprosesnya di server dan tinggalah menambahkan style untuk merespon desain ketika ada action di browser.

Untuk blogger matre mungkin desain responsive akan sangat mengganggu, akan semakin susah menempatkan iklan di posisi yang tepat. Mungkin jika pengguna opensource akan lebih mudah mengaturnya sangat berbeda ketika memakai blogspot.

Design Responsive Websites

Mungkin masih ada kesalahpahaman memahami konsep responsive dengan content type. Bagi saya responsive template tidak lebih hanyalah client side. Tidak ada yang spesial. Kalau untuk program desktop dia hanyalah sebagai Form Resize. Sangat fatal ketika Responsive di bandingkan dengan mobile. Dengan anggapan desain responsive sudah mewakili desain mobile. Alasan sangat fatal untuk sekarang menurut saya karena client side di bandingkan dengan server side.

Lanjut lagi, saya merasakan ada lagi salah pemahaman tentang responsive design ini tentang device. Menurut saya responsive design bukan membaca device namun hanya membaca ukuran browser yang digunakan dalam device. Kesalahan inilah yang membuat pemikiran tentang mobile sudah digantikan dengan responsive design.

Coba anda bayangkan, ketika anda membuka sebuah halaman yang di peruntukkan dalam tipe web desktop dengan berbagai jqury, javascript, media full dengan ukuran yang cukup besar harus di load dalam sebuah browser mobile, dan itupun pasti tidak akan penuh di tampilkan jika memakai desain responsive. Bayangkan saja berapa bandwaith dan resource yang boros digunakan? Terus coba bayangkan lagi dengan koneksi Indonesia yang rata rata HSDPA rasa GPRS :v, Apa yang terjadi dengan pengunjung?

Itu hanya sebuah bayangan untuk anda yang terlalu mengandalkan design responsive tanpa memikirkan segi teknis lain. Jika saya salah memahami tolong ingatkan ;). Mari belajar bersama.

Komentar Design Responsive Websites

Jangan menaruh live link dikomentar dan sampai saat ini baru 11 komentar untuk update Design Responsive Websites dengan id 9010587427562952528.

YOUSHIE NET

Mantep mbah Bowo iki...

17/1/13 03:17
Bowo Ekowidodo Sragen

Mung uneg uneg mbah :p

17/1/13 11:59
Tips Trik SEO Blogger Pemula

keren emang kalau website Responsive

17/1/13 15:16
Fauzi Ramadhan

info yang sangat berguna mas

14/3/13 22:30
Agit Anugrah

salah nya satu gan..
kalau pengunjungnya dari Indonesia mungkin benar pengunjungnya bakal kabur duluan karna koneksi yang lamban..
tapi kalau pengunjungnya dari luar Indonesia saya rasa tidak ada masalah karna koneksi yg di gunakan mereka jauh lebih cepat dari koneksi yang ada di negeri tercinta ini. untuk penempatan posisi iklan saya rasa tidak ada masalah karena google sudah mengijinkan untuk menambah script yang bisa menyesuaikan ukuran iklan. 1 lagi nih..
kalau ukuran template nya kecil dan tidak terlalu banyak memakai gambar atau javascript, saya rasa tidak ada masalah jika di akses menggunakan mobile browser.
mohon di koreksi kalau ada yg salah :D

4/4/13 14:23
Bowo Ekowidodo Sragen

1. Setuju pengunjung kabur
2. Penempatan iklan. Saya contohkan misalnya di header, membutuhkan iklan 728x90 .. kalau di responsive gimana penempatannya kalau misal browser di geser 700px saja :D .. iklan hilang atau di overflow hidden ( ngelanggar TOS) / ngilangin responsivenya?
Misal iklan di bagian posting saya berikan 300x250 .. versi mobile sangat bagus ketika di setting fixed, misal 320px lebarnya. Nah karena responsive, misal di buka dengan screen 420. Bagaimana bentuk iklan? masih bisa blanding ? :D
3. Ukuran kecil bagaimana? rata rata untuk template desktop blogspot para desainer menggunakan jquery. mungkin hanya saya yang sedikit melupakan jquery dalam coding karena memang menyesuaikan koneksi saya sendiri :v :v ...

4/4/13 23:20
Tiyo Kamtiyono

Kalau untuk iklan biar tetap tampil itu sebenarnya bisa diakali dengan men-setting width dari image yang bersangkutan. Selama output dari iklan masih gambar murni bisa, tapi kalau berupa animasi flash memang sepengatahuan saya belum bisa.

Kalau masalah pemborosan resource pada user yang mengunakan piranti mobile memang selama yang digunakan adalah media query masih belum teratasi nampaknya mas, tapi barusan baca katanya dengan AngularJS bisa melakukan filtering yang lebih bagus.

7/4/13 11:57
Bowo Ekowidodo Sragen

Kalau iklan masih inline maksudnya masih jadi satu dengan halaman mungkin bisa di setting lebar dan tingginya, kalau flash bisa di atur melalui object nya tetap di width dan hieightnya. Tapi masalahnya iklan sekarang kebanyakan memakai iframe, contoh saja klik saya, google adsense, adhitz,bidvertiser,innity,IDblognetwork. Sepertinya saya belum pernah menemukan cara mengatur halaman di iframe :D

Nah sepertinya disinilah yang saya maksudkan 2 Content Type sungguh sangat berperan di blogger. Setahu saya browser mobile belum begitu enak kalau make jquery. Dan kenapa tidak di hilangkan saja :D. Dan kembali lagi para desain responsive menganggap desain mobile itu tidak ada dan sudah terwakili.. dan menurut saya itu adalah salah untuk sekarang ;) dan itu juga yang saya bahas di atas ;-)

7/4/13 22:23
Bocah Poris blog's | Tips Trik Blogger

Belajar Responsive dimana yak mas..
kapan2 mau belajar nih biar bisa buat..

10/4/13 15:23
Jumardi Ramdani

ada benar nya juga si mas jika blog kita terpasang iklan,JS dan lain" harus di load di versi mobile bisa di bayang kan arus data yang di perlukan,terlebih lagi dengan koneksi indonesia yang masih HSDPA ( itu pun di wilayah tertentu ).
tapi bukan kah ada perintah dalam widget untuk memunculkan nya di versi mobile atau tidak???dan apakan itu pun ada untuk JS???

tapi saya terkejut saat saya mengganti template blog INFOdotCOM dengan JPstationBlue ( template responsive ) PV naik hingga rata" alhamdulillah 900++/day berbeda dengan template sebelum nya yang hanya valid HTML5 dan CSS3 PV tertinggi hanya sampai 800/day.

jadi yang lebih baik valid HTML5+CSS3 atau Responsive yang tidak valid HTML5+CSS3 atau Responsive yang valid HTML5+CSS3???

1/5/13 19:36
Bowo Ekowidodo Sragen

1. Muncul atau tidak itu tetap didownload cuman di browser di olah mana yang muncul mana yang tidak. Selama prosesnya masih client side ya tetep memberatkan di sisi pengunjung :D. bayangkan kalau yang masuk pengunjung dengan gadget spek rendah :D .. paling memori langsung full

2. Valid sama responsive tidak bisa di bandingkan, beda arah, valid condong ke server side responsive jelas client side. Responsive pun bisa juga valid, :D . Yang menjadi masalah kemungkinan adalah struktur dari kedua templatet tersebut. Walau valid mungkin struktur nya ancur, dari navigasi, heading, main content, sidebar dan lain lain :D.

1/5/13 19:44