Minggu, 05 Januari 2014

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)

Panduan Membuat Desain Web Blog Responsive

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, ZoomQueries
Untuk penjelasan dari setiap ukuran yang ada di ZoomQueries, silahkan baca artikelnya Adam Edgerton, Diagram Desain Responsif
Untuk pencitraan dari tampilan masing-masing ukuran, bisa menggunakan apilkasi ProtoFluid di ProtoFulid
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 GitHub FreqDec

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 GitHub

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 CSS Tricks

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 GitHub

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

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 Gridless dan Golden Grid System

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

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:
RESPONSINATOR
RESPONSIVEPX
RESPONSIVETEST

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, Anda 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 Membuat Desain Web Blog Responsive 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

10 Panduan Membuat Desain Web Blog Responsive Rating: 4.5 Diposkan Oleh: ana sriwahyuni

22 komentar:

  1. panduan yang kompleks sekali mbk
    aku simpan dulu mbkkk ya

    BalasHapus
    Balasan
    1. silahkan mas Ronny, semoga bermanfaat :)

      Hapus
    2. awas ntar kelupaan mas Ron nyimpennya hhehehehe

      Hapus
  2. ternyata banyak banget seperti itu ya. lama nih berarti loadingnya aku hehehe maklum masih awam dalam hal gituan mbak

    BalasHapus
    Balasan
    1. memang banyak untuk dipelajari mas Sarofudin, saya juga masih belajar kok.. :)

      Hapus
  3. Selmat pagii..
    Sorry baru bisa berkunjung balik..
    Hehee kalau punyaku memang templet bawaan ponsel karena nggak punya yang lain

    BalasHapus
    Balasan
    1. selamat pagi juga mbak Muya..
      enak kalau sudah bawaan ponsel seperti itu mbak Muya, ga' repot lagi :)

      Hapus
  4. bgtulah responsive... smuanya hrs rensponsive, pusing.. hehehe...

    BalasHapus
    Balasan
    1. dulu responsinve adalah kondisional saja tapi sekarang kebutuhan :)

      Hapus
  5. ternyata banyak juga ya mbak panduan responsive ini, lumayan mumet juga melajarinya hehehehe

    Salam kenal N persahabatan aja mbak

    BalasHapus
    Balasan
    1. yeee kalau mas Arie kan udah jagonya...
      makasih banyak mas atas kunjungan, salam kenal dan persahabatn,,,

      Hapus
  6. Bagus bnget mbak,, artikelnya membantu teman2 yg lain nih.. :D

    BalasHapus
    Balasan
    1. makasih ya, semoga lebih memberikan manfaat :)

      Hapus
  7. wah ini mah ilmu tingkat tinggi saya kapan ya bisa seperti mbak???hehe
    izin sering nengok kemari untuk belajar ya mbak???mksh sblmnya

    BalasHapus
    Balasan
    1. saya masih mempelajarinya juga mbak Widya, saya masih pemula dan masih banyak errornya :)
      silahkan mbak Widya dan semoga menambah silaturrahim :)

      Hapus
  8. pada dasarnya responsive hanya menggunakan media queries saja mbak
    seperti ini nih

    @media screen and (max-width:1117px){.widget-content img{height:auto}.pemotong,#wrapper{width:1000px}#bagian-aside{width:680px}#iklan-atas-kiri{width:728px}#iklan-atas-kanan{width:272px}#artikel{width:500px}}
    @media screen and (max-width:1017px){.pemotong,#wrapper{width:950px}#bagian-aside{width:630px}#iklan-atas-kiri{width:728px}#iklan-atas-kanan{width:222px}#artikel{width:450px}}
    @media screen and (max-width:970px){.pemotong,#wrapper{width:900px}#bagian-aside{width:580px}#iklan-atas-kiri{width:728px}#iklan-atas-kanan{width:172px}#artikel{width:400px}}
    @media screen and (max-width:917px){.pemotong,#wrapper{width:850px}#bagian-aside{width:530px}#iklan-atas-kiri{width:100%;float:none;text-align:center}#iklan-atas-kanan{width:100%;float:none;text-align:center}#artikel{width:350px}.postthumb img{width:100px;height:70px}}
    @media screen and (max-width:867px){.pemotong,#wrapper{width:800px}#bagian-aside{width:480px}#artikel{width:100%}#bagian-widget{width:300px;float:right}#widget-kiri,#widget-kanan{float:none;width:100%}#pencari,#sidebar-kiri{margin-left:0}#widget-kiri .widget,#widget-kanan .widget{margin:0 5px 5px 5px}}
    @media screen and (max-width:817px){.iklan-atas .widget,.sidebar .widget-content{padding:5px}#iklan-kanan{width:310px}#iklan-kiri{width:170px}.pemotong,#wrapper{width:750px}#bagian-aside{width:440px}#bagian-widget{width:270px;float:right}}
    @media screen and (max-width:767px){#iklan-kiri{width:100%}#sidebar-kiri{display:none}#bagian-widget{width:100%}#pencari{margin:5px}.pemotong,#wrapper{width:700px}#bagian-aside{width:390px}}
    @media screen and (max-width:717px){#bagian-aside{width:57%}#iklan-kanan{width:43%}.pemotong,#wrapper{width:100%}}
    @media screen and (max-width:600px){#bagian-aside,#iklan-kanan,#footer1,#footer2,#footer3{float:none;width:100%}#scroll{display:none!important}.sidebar .widget{margin:5px}#gulir-atas{position:inherit;display:block;margin:10px auto;margin-bottom:0}#copy-kiri,#copy-kanan{float:none}#copyright{text-align:center;padding-bottom:0}#sidebar-kanan{margin-right:0}#nav2{display:inherit;margin:5px;float:left;padding:8px}nav ul{display:none}}
    @media screen and (max-width:380px){#nav2{padding:3px}#search-top{padding:5px}input[type="text"]{padding:5px;width:90px}#search-button-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;transition:all 0.7s ease 0s;height:26px;width:29px;background-color:#34495e;background-position:7px -247px;border:none;float:right;cursor:pointer}}

    BalasHapus
    Balasan
    1. iya mas memang betul tapi tetap butuh kejelian dari setiap element karena setiap template memiliki element yang berbeda
      kalau menurut saya, kode yang mas Ahmad tulis diatas bukan kode dasar dari sebuah template tapi sudah terlalu detail
      kode dasar sebuah template kan cuma berikut ini mas :)
      #outer-wrapper{}
      #header-wrapper{}
      #header{}
      #menu{}
      #content-wrapper{}
      #main-wrapper{}
      .post{}
      #sidebar{}
      .comments{}
      #footer-wrapper{}
      #footer{}

      :)

      Hapus
    2. iya mbak , kode dasarnya hanya itu .....
      tapi kode itu bisa kita beri nama sesuka kita
      contohnya

      #outer-wrapper => #wrapper-luar
      #footer-wrapper => #wrapper-kaki

      wkwkkwkwkw :)

      Hapus
    3. hehehee makasih ya mas atas kodenya.. :)

      Hapus
  9. Keren infonya mbak :) tapi ada satu hal yang saya bingung ketika baca yg ini: Untuk tampilan gambar blog responsive saya mempelajarinya di GitHub. Namun setelah saya klik GitHub ternyata kembali ke halaman iini lagi.

    Apakah itu link salah tempel mbak? Makasih sharingnya :D

    BalasHapus
    Balasan
    1. sepertinya iya mbak Indri,, okey makasih atas koreksinya, hmm buka file artikel lagi nich.. :(

      Hapus
  10. ikut belajar mas mudah mudahan bisa menyerap ilmunya

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia