Alhamdulillah kemarin tanggal 4 Agustus 2013 saya akhirnya sempet juga untuk nyobain otak-atik template saya yang satu ini C15 White V2 Black. Iyaa soalnya emang kemarin pas saya buatnya ini saya hanya memakai netbook. Jadi otomatis design yang saya buat pun hanyalah sebatas berdasarkan satu macam ukuran resolusi layar 1024×768 pixel. Makanya saya merasa agak khawatir bagi sahabat yang ingin berkunjung ke blog sederhana saya ini jika menggunakan ukuran layar yang lebih kecil dari itu tampilannya bisa-bisa jadi terlihat berantakan.

Sementara, kalau dipikir-pikir saat ini saja pengguna internet mobile sudah banyak sekali. Misalnya aja dari perangkat Smartphone, Handphone Android, Iphone, Tablet, ataupun Blackberry rasanya gadget yang seperti ini pun memang sudah gak asing lagi disekitar kita, kan? Saya yakin sahabat pasti sudah punya lah yaa dan bagi yang selalu update di dunia maya bisa jadi pun untuk mengakses informasi ke suatu blog sekarang bisa hanya dengan mengandalkan salah satu perangkat canggih tersebut.

Cuman salah satu faktor kenapa saya belum bisa sempet buat design yang lebih Responsive untuk perangkat Mobile seperti itu, dikarenakan saya sendiri masih belum punya, sob. T_T Huhuhu.. jadi curhat pulak nanti nih.

Tapi walau gimanapun saya tetep akan berusaha supaya para pengunjung setia bisa lebih nyaman dan betah berkunjung ke blog ini. Makanya kemarin saya bertekad untuk mencoba mempelajari agar bisa membuat tampilan template yang lebih Responsive. Saya kalau udah ngedit template untuk design tampilan itu bisa memakan waktu yang lama juga. Maklum lah saya bukan seorang web developer profesional pulak nya.

Jadi, rasa-rasanya emang butuh perjuangan waktu ekstra untuk itu. Hehehe..

Masalah berikutnya adalah terletak pada konsep template yang saya gunakan saat ini. Mungkin di tulisan Review Template C15 White V2 Black saya sudah jelaskan. Tampilan blog ini bisa dibilang memang banyak terinspirasi dari konsep Blogazine.

Kebetulan saya juga suka mengasah kreativitas saya dalam hal mendesign tampilan walaupun masih cuman tahu-tahu dikit doank sih. Jadi kalau dalam istilah Blogazine itu memang sudah tidak asing lagi kalau diantara halaman satu ke halaman yang lainnya memiliki style atau tampilan yang berbeda-beda. Makanya di template saya ini ada 4 (empat) macam style tampilan yang untuk masing-masing halaman berbeda yaitu Home, Index, Static dan Item.

Lalu masalahnya apa?? Masalahnya kalau saya mau buat tampilan yang lebih Responsive, itu artinya sama saja dengan saya harus bisa mendesign keempat tampilannya sekaligus. Coba saja sahabat bayangkan deh, sedangkan untuk membuat satu macam tampilan aja susah-susah gampang.

Membuat Responsive Web Design?

Btw, yang dimaksud tampilan Responsive Web Design itu yang seperti apa sih?? Kalau menurut sepengetahuan saya yang pas-pasan ini, suatu template itu bisa dikatakan responsive jika tampilannya bisa menyesuaikan diri dengan ukuran layar yang berbeda-beda sesuai dengan perangkat yang digunakan.

Misalnya blog dengan tampilan dua kolom yang saya pakai dihalaman artikel seperti ini, agar bisa dikatakan responsif saat diakses dengan ukuran layar yang kecil maka saya harus bisa membuat design tampilannya berubah otomatis menjadi satu kolom. Kalau sahabat mau tahu lebih banyak silahkan searching aja lewat Mbah Google.

Jadi, jelas untuk bisa membuat tampilan seperti itu pertama kita perlu mengetahui terlebih dahulu beberapa macam jenis ukuran layar yang biasa dan sering digunakan oleh pengunjung blog kita. Selanjutnya yang diperlukan lagi kita juga harus menguasai benar-benar seluruh komponen dan style CSS yang ada dalam template blog kita tersebut yang paling oenting sebenarnya adalah dalam hal ukuran dan tataletak komponen nya aja sih. Selebihnya yang dibutuhkan adalah sedikit pengetahuan dasar tentang coding HTML, CSS maupun Jquey.

Terakhir pastinya kita juga butuh imajinasi dan kreatifitas yang cukup memadai. Dengan keempat hal ini kalau waktunya sudah pas sudah bisa lah sahabat juga memulai memikirkan untuk membuat design tampilan yang Responsive itu.

Dan, berikut ini dia beberapa screenshot tampilan blog saya setelah kemarin saya coba untuk membuatnya agar lebih Responsive untuk perangkat Mobile. Saya menggunakan tools dari alamat responsive.chaidir.web.id mungkin ini bisa jadi referensi buat sahabat nanti ketika mau menge-check tampilan blog sahabat apakah sudah responsive atau belum. Bisa juga dari www.intikali.org/responsive-tools/ terserah sahabat mau pilih yang mana.

Contoh Aplikasi Responsive Web Design

NB: Silahkan klik saja pada gambar untuk melihat tampilan secara fullscreen.

1. Tampilan untuk Home Page (Beranda)
2. Tampilan Halaman Index (Pencarian)
3. Tampilan Halaman Artikel (Item)
4. Tampilan Halaman Statis (Laman)
Sebenarnya jujur tampilan ini belum saya uji coba sepenuhnya dan pasti masih banyak kesalahan maupun kekurangan. Oleh karena itu, Saya membuat tulisan ini pun juga sekalian supaya saya bisa minta bantuan sahabat untuk menguji tampilan Chaidir’s Web ini lewat perangkat mobile sahabat masing-masing. Maau yaaa?? Maauu yaaa?? Hehehe.. :-D Nanti kalau memang ada yang gak pas letak atau ukurannya boleh ingatkan saya sob dan bisa juga tinggalkan masukannya lewat kotak komentar dibawah tulisan ini.

Sebelumnya saya juga mau ngucapkan terima kasih deh buat para pengunjung blog Chaidir’s Web ini yang masih pada setia dan betah mau mampir kemari. Saya sangat mengharapkan kritik, masukan dan saran dari sahabat semuanya. Akhirnya, semoga tulisan ini juga bisa bermanfaat buat sahabat yang mungkin lagi pengen atau masih kepikiran untuk belajar membuat template blog nya menjadi lebih Responsive. Kalau ada masalah boleh kok kita saling sharing, selagi saya bisa bantu pasti dengan senang hati saya siap bantuin sahabat.

Selamat Mudik bagi yang mau Lebaran. Semoga selamat dalam perjalanan yaa, sob!!
Tetap Semangat Berkarya..

16 Komentar pada tulisan

Berikan Tanggapan atau Komentar

Sudah baca tulisan saya diatas sampai selesai, kan?
Kalau begitu silahkan berikan tanggapan yang baik yaa! ^_^
Setiap komentar dari sahabat bisa menambah semangat saya untuk terus berkarya melalui blog ini.

Jika Anda suka blog ini HARAP matikan plugin AdBlock Anda! KLIK CARANYA
Hello. Add your message here.
Read more:
Peringatan HARDIKNAS, Hari Pendidikan Nasional di Polmed tahun 2013
Cara Mengatasi Turbo Pascal 7.1 untuk Windows 8 tidak Bisa Dibuka
Close