10 Panduan Membuat Desain Web Blog Responsive

Panduan Membuat Desain Web Blog Responsive - Beberapa tahun terakhir ini, membuat blog atau sebuah web site tidak hanya mengandalkan pemahaman dalam pengkodean kerangkanya saja atau yang lebih dikenal dengan CSS, bahkan penggunaan CSS yang umum digunakan untuk tampilan sebuah blog dan web site bisa dikatakan sudah tidak relevan dengan penggunaan saat ini. Kenapa saya mengatakan tidak relevan? Karena sesuai perkembangan dunia teknologi informasi dan komunikasi, semakin banyak orang yang mengakses internet yang menggunakan media mobile atau ponsel, sehingga menuntut para web designer atau pembuat template harus menyesuaikan dengan perkembangan tersebut, yaitu menyesuaikan tampilan template blog dan web site yang dibuat sesuai dengan tampilan ponsel atau yang lebih dikenal Responsive Web Design (RWD)

Untuk membuat desain blog responsive bisa dibilang gampang-gampang susah, gampang jika telah mengetahui caranya dan akan sangat susah sekali jika tidak mengetahui caranya, seperti saya ini, ada bebeapa template yang telah saya buat namun saya belum bisa membuat desain template blog tersebut menjadi responsive. Seperti Template Fast Loading dan Valid HTML5 yang pernah saya buat tapi belum jadi karena mikirin cara menjadikan template blog tersebut responsive yang belum bisa saya kuasai

Lalu kenapa saya membuat artikel 10 Panduan Membuat Desain Web Blog Responsive ini? Padahal saya sendiri belum bisa membuat tampilan blog yang responsive? Selama ini saya juga masih belajar, saya bukan master atau mastah. Dan memlaui artikel ini, saya akan berbagi apa yang selama ini saya pelajari dan dimana saya belajar..

Berikut 10 Panduan Membuat Desain Web Blog Responsive

1. DIAGARAM UNTUK DESAIN RESPONSIVE
Sebelum membuat desain web dan blog responsive, tentukan terlebih dahulu ukuran yang tepat dengan menggunakan diagram desain berikut ini:
Desain ini milik seorang mastah blogger Indonesia yaitu Agus Ramdhani atau biasa dikenal dengan O-OM,
Untuk penjelasan dari setiap ukuran yang ada di ZoomQueries, silahkan baca artikelnya Adam Edgerton,
Untuk pencitraan dari tampilan masing-masing ukuran, bisa menggunakan apilkasi ProtoFluid di
Diagrm desain diatas sudah dijelaskan dengan mudah dari setiap ukuran device atau perangkat ponsel yang digunakan sehingga bisa dengan mudah menentukan ukuran yang tepat untuk digunakan

2. JUDUL BLOG RESPONSIVE
Apakah perlu untuk menentukan judul blog yang responsive? Jika kita sudah menggunakan media queries untuk memberikan tampilan yang responsive terhadap blog kita maka secara langsung judul blog dan beberapa elemen lainnya juga langsung menjadi responsive. Namun untuk penggunaan beberapa ukuran tertentu dari sebuah judul blog masih perlu dipertimbangkan, apakah sudah responsive atau belum, untuk itu saya mempelajari agar judul blog responsive dengan menggunakan SlabText yang dibuat oleh Frequency Decoder (webnya tidak bisa dibuka) dan bisa di lihat di

3. GAMBAR BLOG RESPONSIVE
Sama halnya dengan judul blog, menentukan ukuran gambar agar responsif atau resizable juga diperlukan agar tampilan keseluruhan blog lebih enak dipandang dan tidak berantakan. Untuk tampilan gambar blog responsive saya mempelajarinya di

4. TABEL BLOG RESPONSIVE
Bagaimana dengan tabel? Untuk beberapa tampilan template yang responsive, banyak yang saya temui untuk tampilan tabel masih belum ada yang tampil dengan sempurna. Cobalah untuk mempelajari beberapa tampilan table blog responsive di

5. VIDEO BLOG RESPONSIVE
Untuk beberapa device atau perangkat ponsel memang tidak support untuk menampilkan video secara langsung, khususnya ponsel-ponsel lama alias jadul tapi untuk beberapa smartphones saat ini sudah bisa menampilkan video secara langsung. Untuk menampilkan tampilan video responsive di blog, silahkan buka FitVids yang ada di

6. SLIDER & CAROUSEL BLOG RESPONSIVE
Untuk tampilan slider blog yang responsive saya mempelajarinya di dan untuk tampilan carousel silahkan baca di

7. GRID BLOG RESPONSIVE
Sudah mengetahui tampilan grid pada blog? Itulah tampilan kotak-kotak.. Dan untuk menampilkan grid pada blog agar responsif saya mempelajarinya di GitHub, lagi-lagi GitHub,,, enak loh belajar coding disana, lengkap dan mudah dimengerti :)
Untuk tampilan grid, ada 2 yang saya pelajari di GitHub yaitu dan

8. JAVASCRIPT (JS) BLOG RESPONSIVE
Ada beberapa panduan yang saya baca untuk javascript yang responsive untuk blog, 2 diantaranya ada di GitHub , dan di The World Wide Web Consortium atau

9. PENGUJIAN BLOG RESPONSIVE
Setelah membuat kode-kode tertentu (media queries) didalam template blog untuk menampilkan blog agar responsive, maka sebelum benar-benar ditampilkan, alangkah baik dilihat dulu hasil melalui media-media online yang membantu menampilkan blog, apakah responsive atau belum. Dengan pengujian ini kita tidak perlu memiliki banyak device atau perangkat ponsel, cukup menggunakan aplikasi online berikut ini atau aplikasi dari O-OM diatas:




10. PERTANYAAN UMUM BLOG RESPONSIVE
Dari beberapa sumber yang saya pelajari sebagai panduan membuat desain web blog responsive diatas, mungkin terlalu ribet dan sangat lama untuk dipelajari. Sama seperti saya, sobat juga menginginkan yang lebih simpel dan mudah dalam membuat desain blog responsive. Untuk membuat desain web atau blog responsive, ada pejelasan yang menurut saya sangat mudah dipahami yaitu penjelasana dari O-OM yang telah dijelaskan di namun jika penjelasan yang diberikan oleh O-OM tersebeut masih sulit untuk dipahami, tolong buat teman-teman silahkan berikan kode dasar (media queries) untuk tampilan responsive melalui kolom komentar dibawah ini

Okey, itulah beberapa panduan membuat desain web blog responsive, semoga bermanfaat. Dan sekali lagi jika ada teman-teman yang memiliki kode instan atau kode dasar untuk media queries responsive (kode responsive), silahkan share melalui komentar