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, 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
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
panduan yang kompleks sekali mbk
BalasHapusaku simpan dulu mbkkk ya
silahkan mas Ronny, semoga bermanfaat :)
Hapusawas ntar kelupaan mas Ron nyimpennya hhehehehe
Hapusmemang banyak untuk dipelajari mas Sarofudin, saya juga masih belajar kok.. :)
BalasHapusSelmat pagii..
BalasHapusSorry baru bisa berkunjung balik..
Hehee kalau punyaku memang templet bawaan ponsel karena nggak punya yang lain
selamat pagi juga mbak Muya..
Hapusenak kalau sudah bawaan ponsel seperti itu mbak Muya, ga' repot lagi :)
bgtulah responsive... smuanya hrs rensponsive, pusing.. hehehe...
BalasHapusdulu responsinve adalah kondisional saja tapi sekarang kebutuhan :)
Hapusternyata banyak juga ya mbak panduan responsive ini, lumayan mumet juga melajarinya hehehehe
BalasHapusSalam kenal N persahabatan aja mbak
yeee kalau mas Arie kan udah jagonya...
Hapusmakasih banyak mas atas kunjungan, salam kenal dan persahabatn,,,
Bagus bnget mbak,, artikelnya membantu teman2 yg lain nih.. :D
BalasHapusmakasih ya, semoga lebih memberikan manfaat :)
Hapuswah ini mah ilmu tingkat tinggi saya kapan ya bisa seperti mbak???hehe
BalasHapusizin sering nengok kemari untuk belajar ya mbak???mksh sblmnya
saya masih mempelajarinya juga mbak Widya, saya masih pemula dan masih banyak errornya :)
Hapussilahkan mbak Widya dan semoga menambah silaturrahim :)
pada dasarnya responsive hanya menggunakan media queries saja mbak
BalasHapusseperti 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}}
iya mas memang betul tapi tetap butuh kejelian dari setiap element karena setiap template memiliki element yang berbeda
Hapuskalau 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{}
:)
iya mbak , kode dasarnya hanya itu .....
Hapustapi kode itu bisa kita beri nama sesuka kita
contohnya
#outer-wrapper => #wrapper-luar
#footer-wrapper => #wrapper-kaki
wkwkkwkwkw :)
hehehee makasih ya mas atas kodenya.. :)
HapusKeren 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.
BalasHapusApakah itu link salah tempel mbak? Makasih sharingnya :D
sepertinya iya mbak Indri,, okey makasih atas koreksinya, hmm buka file artikel lagi nich.. :(
Hapusikut belajar mas mudah mudahan bisa menyerap ilmunya
BalasHapus