Artikel Berdasarkan Label Membuat Desain Website Menjadi Responsive

Membuat Desain Website Menjadi Responsive

2/05/2013
Update 1 April 2013
Setelah kemarin hampir 2 jam modifikasi tampilan blog saya agar responsive akhirnya selesai juga dan hasilnya cukup memuaskan ketika di buka dengan berbagai resolusi layar..
Untuk pembahasan kali ini saya akan share bagaimana caranya agar tampilan blog/website kita menjadi responsive. Seperti yang sudah saya jelaskan dalam posting waktu lalu tentang "Website responsive testing" mengenai arti responsive. Responsive pada website adalah menyesuaikan tampilan website atau blog terhadapa gadget yang kita gunakan, misalnya Laptop, Tablet, Smart Phone dengan resolusi layar yang berbeda-beda. Disini kita hanya menambahkan kode @media only screen and (max-width:800px) { yang artinya ukuran tampilan website/blog tidak boleh lebih dari 800 pixel
contoh:
@media only screen and (max-width:800px) {
#outer-wrapper {width:750px; margin:0 auto;} //ukuran tampilan website
#main-wrapper {width:750px;} //ukuran page atau isi
#sidebar-wrapper {width:750px;} //ukuran sidebar
#footer {width:750px;} //ukuran footer
}
dengan contoh diatas maka tampilan website menjadi satu colom, yaa karena ga mungkin untuk tampilan 800 pixel website dengan 2 colom saya rasa kurang bagus.

Berikut cara untuk membuat tampilan website/blog menjadi responsive:
1. Copy code berikut ini dan letakkan dibawah kode <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
2. Kemudian Copy code berikut ini dan letakkan dibawah kode ]]></b:skin>
<style>
@media only screen and (min-width:768px) and (max-width:989px) {
#outer-wrapper {width:730px; margin:0 auto }
Kode CSS lainya
}

@media only screen and (max-width:767px) {
#outer-wrapper {width:540px; margin:0 auto }
Kode CSS lainya
}

@media only screen and (max-width: 580px) {
#outer-wrapper { width: 500px }
Kode CSS lainya
}
@media only screen and (max-width: 490px) {
#outer-wrapper { width: 430px }
Kode CSS lainya
}

@media only screen and (max-width: 479px) {
#outer-wrapper { width: 280px }
Kode CSS lainya
}

@media screen and (max-width: 260px) {
#outer-wrapper { width: 210px }
Kode CSS lainya
}
</style>
Code tersebut yang saya gunakan untuk membuat tampilan blog ini menjadi responsive
Untuk kode CSS-nya kalian bisa liat ID setiap elemen seperti Sidebar, main-wrapper, outer-wrapper, footer dan lain-lain karena pada setiap template ID setiap elemen bisa saja berbeda, seperti blog saya ini yang biasanya menggunakan #main-wrapper kalau punya saya #content_left.
Untuk melihat hasilnya bisa lihat disini Smart Responsive Tester for Web Designers klik tombol Lauch the tool. kemudian masukan alamat website atau blog anda lalu klik Test
Atau anda juga bisa lihat tampilan responsive blog ini tinggal masukan saja alamat blog ini http://mdf-blog.blogspot.com.
Semoga bermanfaat.

101 komentar

Anonim
hapus komentarX + Balas

wahh mantap ni (h)
saatnya membuat template jadi responsive.. :)

hapus komentarX + Balas

Katanya responsif bro? kok ga boleh lebih 800 pixel, berarti kurang responsif,,harusnya compatibel buat semua screen dong?

ane lihat di codenya ada syntax begini
(min-width:768px) and (max-width:989px) ..artinya itu bisa diganti ya bro? ga dinamis bro kalo angkanya bisa diganti,,gimana kalo auto responsif dengan nambahin code yang bersifat auto compatibel?
cmiiw bro :)

www.sedapnih.com

hapus komentarX + Balas

ijin nyoba sobat

lagi butuh buat responsive template ane nih :-d

hapus komentarX + Balas

maksudnya kalo lebih dari 800pixel nanti jadiinya ada scroll ke sampingnya broo..
kan kodenya banyak tuh ada yang 767pixel, 560pixel..
untuk (min-width:768px) and (max-width:989px) itu artinya lebar antara 768px sampai 989px..
kode (min-width:768px) dihapus juga gpp..
tuh semua dah ane atur agar jarak sisi kanan dan sisi kiri tidak terlalu jauh..
thanks sebelumnya :)

hapus komentarX + Balas

silahkan sob.. :)

Komentar ini telah dihapus oleh penulis.
hapus komentarX + Balas

wa, bagus nih buat referensi..
thanks info soal templatenya, lain kali di coba..
jangan lupa kunjungan baliknya di http://javakahuripan.blogspot.com/

hapus komentarX + Balas

Ok.. sama-sama broo... :)

hapus komentarX + Balas

wihhh kereng gan postnya

ditunggu komenbaliknya http://sidetek.blogspot.com/

hapus komentarX + Balas

Ok thanks gan :)

hapus komentarX + Balas

wih artikelnya bermanfaat sob...


www.green404.blogspot.com

hapus komentarX + Balas

thanks sob sudah mampir.. :)

hapus komentarX + Balas

wahhh baguss banget gan tutornya,,, mampir balik yah

http://dewasa0nline.blogspot.com

Komentar ini telah dihapus oleh penulis.
hapus komentarX + Balas

terimakasih tutorialnya mas :)

hapus komentarX + Balas

Sama-sama gan.. :)

hapus komentarX + Balas

Wah Keren Sob..,,infonya..,, kunjungi blog ane juga ya http://tersembunyi-007.blogspot.com

hapus komentarX + Balas

thanks sudah mampir..
Ok segera meluncurr.. (o)

hapus komentarX + Balas

Maaf gan, mau tanya, itu cara peletakkan kode css nya gimana ya?

Seperti inikah: #header, #content-wrapper, dll

atau bagaimana? Mohon segera dijawab mas, urgent.... THX BE4! (o)

hapus komentarX + Balas

kan diatas sudah ada contohnya gann..
jadi di setiap elemen #header ataupun #content-wrapper di atur lebarnya.. karena ID elemen pada setiap template tidak selalu sama.
contohnya:
@media only screen and (max-width:800px) {
#header {width:750px; margin:0 auto;}
#content-wrapper {width:750px; margin:0 auto;}
#sidebar-wrapper {width:750px;}
#footer {width:750px;}
}

tinggal atur ajah width/lebarnya sesuai kebutuhan..

hapus komentarX + Balas

Mas, mau tanya nih, saya menggunakan template renponsiven menggunakan form komentar fb. Namun kendalanya adalah sewaktu di view melalui perangkat mobile, ukuran form tsb tidak ikutan renponsive. Tolong kasi solusinya mas, atau kalau bisa sekalian dgn kode yg harus saya pasang di blog agar komentar fb tersebut bisa renponsive juga.
email: redaksi.kluetmedia@gmail.com

hapus komentarX + Balas

tambahin kode berikut ini dibagian CSS responsivenya..
#u_0_0.fbFeedbackContent {width:100%;}
atur width: sesuai kebutuhan :)

Komentar ini telah dihapus oleh penulis.
hapus komentarX + Balas

untuk tampilan responsive anda harus atur lebar tampilan halamanya,
contohnya seperti ini:
@media only screen and (max-width:989px) {
.outerpic-wrapper {width:850px; margin:0 auto;}
.header-wrapper {width:100%;}
.main-wrapper {width:70%;}
.sidebar-wrapper {width:27%;}
#u_0_0.fbFeedbackContent {width:100%;}
}

yang paling penting anda harus atur lebar .outerpic-wrapper terlebih dahulu.. karena element tersebut membukus header, main, sidebar, footer.
Untuk pengaturan .outerpic-wrapper tidak boleh menggunakan % (persen) tetapi menggunakan harus px (pixel) seperti contoh diatas..

hapus komentarX + Balas

masih bingung nih sob

hapus komentarX + Balas

terus dipelajari ajah gan,, :d

hapus komentarX + Balas

Bagus Tutorialnya

http://www.fianetmu.com/

hapus komentarX + Balas

Gan, ukuran yang umum atau standar digunakan template responsive berapa ?

hapus komentarX + Balas

@media only screen and (min-width:768px) and (max-width:999px){

}
@media only screen and (max-width:767px){

}
@media only screen and (max-width:479px){

}

hapus komentarX + Balas

lieur gan ah, @-) nanti dipelajari lagi aja deh :-d

hapus komentarX + Balas

sebenernya tinggal merubah lebar setiap element saja..
misalnya yang tadinya sidebar yang lebarnya 33% ketika diresponsifkan kedalam resolusi 767px, terutama yg di rubah lebarnya yaitu outer-wrapper dirumah menjadi 500px, kemudian lebar element posting dan sidebar di rubah menjadi 100%.. :)

hapus komentarX + Balas

iya deh, terima kasih gan, saya senang sekali bisa kenal agan, saya banyak belajar dari blog agan, tar saya pelajari lagi tutorial di atas, hehe, :) ngopi dulu aja deh gan (c) sukses gan blognya cheer

hapus komentarX + Balas

sore-sore kurang mantep kalo ngopi.. :d

hapus komentarX + Balas

haha :-) ngenteh de gan, ohh iya nanti saya review blog agan, mampir di blog saya juga ya :d disana ada postingan agan yang saya share, maaf, saya baru bilang. :-d =)) :>)

hapus komentarX + Balas

Ok seeep.. (o)
nanti koment saja kalu sudah review.. :d

hapus komentarX + Balas

artikel yg bagus gan... I like it. Lam kenal

hapus komentarX + Balas

wew berarti tampilan seluler nya di matikan dong?

hapus komentarX + Balas

boleh dimatikan boleh juga tidak..

hapus komentarX + Balas

boleh dicoba ini

hapus komentarX + Balas

Ane pernah nyoba tapi pas dipake diukuran hape malah ga ngaruh -_- padahal ditest di website2 bisa gan

hapus komentarX + Balas

itu harus di nonaktifkan dulu tampilan selulernya..
( Template » Seluler » Pilih menu Tidak. Tampilkan template seluler di perangkat seluler )

hapus komentarX + Balas

mantab mas...

thanks ya

hapus komentarX + Balas

Terima kasih info nya admin..
Kalau menu di blog saya susah dibuat responsive nya ?
Mungkin admin bisa membantu saya ??

hapus komentarX + Balas

kalo untuk menu navigasi saya juga masih mempelajarinya..
karena menurut saya bagian itu yang sulit dibuat responsivenya..

hapus komentarX + Balas

Iya, memang susah juga..
Template blog saya masih belum responsive..
Maklum, belum begitu paham.. [-(

hapus komentarX + Balas

mas,,kaloq masih banyak variable nya a,,soalnya saya cuman modif template default blogger,jadi masih banyak variable nya...

hapus komentarX + Balas

variabel kayaknya ga ngaruh deh..
kan yang digunakan hanya CSS'a saja misalnya #header-wrapper..
varabel itu yang digubakan untuk mengganti warna secara langsung tanpa edit html..

hapus komentarX + Balas

dicoba dulu gan

hapus komentarX + Balas

kok sama saja ya gan?
tolong cek di blog saya gan cahtekno.com
templatenya dadang herdiana

hapus komentarX + Balas

agas harus merubah dan menambahkan kode CSS element yang ingin dibuat responsive..
disini saya hanya memberikan rangkanya saja...
agan baca postingan pasti ngerti karena sudah ada contohnya diatas..

hapus komentarX + Balas

maaf mass broooo......
sudah saya aplikasikan di blog saya......
tapi kok gak ada hasilnya....????
Mohon pencerahannya?????
pc saya pake resolusi 1025 X 768
trimakasih.......

hapus komentarX + Balas

gan,, punya ane kepotong! solusinya gimana?
lihat gan,, ahttp://dhtigerz.blogspot.com

punya ane bagian postingnya!

hapus komentarX + Balas

coba dibagian responsivenya, ukuran lebar element dibuat 100% saja dan pinggiranya diberi jarak....
#outer-wrapper { width: 100%; padding:5px; margin:0 auto; }
#wrapper { width: 100%; }
#content {width:100%; margin-left:0; text-align: justify;}

Komentar ini telah dihapus oleh penulis.
hapus komentarX + Balas

oh y,, mau tanya lagi nih!

caranya biar bisa menu dropdown kayak punya agan code cssnya apa y gan?
kayak disini nih masalahnya!

http://dirayasa.blogspot.com

coba agan check pake layar 320 x 480 lewat blogger items yang agan share! ane bingung ama codenya soalnya...

hapus komentarX + Balas

waduh, sampe sekarang saya belum bisa buat menu navigasi menjadi responsive, masih dalam pembelajaran, kalau punya saya itu menu dari template MKR hasil download..
coba ajah cari banyak di mkr-site...

hapus komentarX + Balas

ow,, mau request code nih gan!

kalo cara buat tampilan posting kayak agan gimana?
jadi di bagian bawahnya ada "1234567..13" jadi lebih memudahkan untuk ganti page.. :D
ane mau cari di google tapi namanya aja gak tau! hhihi

hapus komentarX + Balas

wah...menarik buat di coba nih mas...
dan emang bener2 tampil beda nih blognya

hapus komentarX + Balas

ko di template saya ga berubah?

hapus komentarX + Balas

oke mas, udah saya terapkan pada rancangan templateku. (o)
Tolong mas berkunjung dan beri masukan untuk kerangka template buatanku sendiri mas.
nih alamatnya http://chazztemplate.blogspot.com/

hapus komentarX + Balas

Woww...! Keren banget Sob. Setelah saya cek dengan memakai web developer tools, template yang Sobat pakai ini memang benar-benar responsive.

Tapi sedikit masukan nih. Setelah saya coba membuka blog ini dengan memakai Opera Mini, ternyata tampilannya masih melebar alias masih perlu di zoom terlebih dulu (belum bisa responsif).

Oh ya, tidak lupa saya sampaikan salam kenal, salam berbagi, dan bila berkenan silakan kunjung ke blog saya. :)

hapus komentarX + Balas

settingan mobile view dioperanya dimatiin dulu..

hapus komentarX + Balas

sip sob, . Bsk sya praktekin

hapus komentarX + Balas

Masih bingung mas, kode cssnya itu diisi apa saja..berarti doble dong cssnya..kalo css nya sebanyak itu

hapus komentarX + Balas

masih bingung mas abdul ;(

hapus komentarX + Balas

test dulu ya brader. mudah2 punya ane berhasil...

hapus komentarX + Balas

Yang Responsive cuman sidebar nya aja mas :(

hapus komentarX + Balas

mas kasih contoh lengkap nya dng.. jadi mudah dimengerti

hapus komentarX + Balas

Thanks gan tutorialnya
di tunggu Kunjungan baliknya http://celco-blog.blogspot.com

hapus komentarX + Balas

Thanks gan tutorialnya
Jadi tambah ilmu nih :-d
saatnya membuat template jadi responsive.. :)
mudah2 punya ane berhasil :>)

hapus komentarX + Balas

i really wish to know my Endonesian brothers language after see that blog :). I really cant uderstand even use google transl.

hapus komentarX + Balas

Wah,, mkasih gan tutor nya, sy ijin Repos ya http://kimzaqi.blogspot.com/2013/07/cara-membuat-blog-menjadi-responsive.html

hapus komentarX + Balas

Padahal dari kemarin udah ada niat untuk buat template blog jadi responsive..
Tapi belum nemu waktu yang pas buat ngerjainnya... -_-

hapus komentarX + Balas

kunjungi ya sob
www.gibranosmorenodeejay.jimdo.com

hapus komentarX + Balas

makasih sob tutorialnya, sekarang template jadi responsive dehh, hehe silahkan di cek http://yoga-tc.blogspot.com/

hapus komentarX + Balas

Mantab bro, mampir ke blog ku yahh www.cowok-feminim.com

hapus komentarX + Balas

cara liat ID nya gimana sob. masih binggung nih

hapus komentarX + Balas

bisa dibantu gak > kumpulankoleksi2013.blogspot.com

#ngarep hehee

hapus komentarX + Balas

di bikin komplit semuanya sob .. biar nanti id'y disesuaikan

hapus komentarX + Balas

kalau di pake buat blog bisa nggak mas ??

hapus komentarX + Balas

bagus artikelnya mantab...
jangan lupa backlinya ya mas
bagi yang suka taruhan online dan mau belajar silakan lihat di www.cs-m88.com

hapus komentarX + Balas

klo konvert dari css bisa ke responsive gimana?

http://bajubolamu.com

hapus komentarX + Balas

masih bingung

hapus komentarX + Balas

keren banget templatenya tips kecantikan

hapus komentarX + Balas

wah gan template ane harus butuh banyak perbaikan nih

hapus komentarX + Balas

Mas.... ada yang tau cara desain webnya pake photoshop sebelum pake coding...kasi info donggg...maksud saya bikin template sendiri tp yg responsive.... masi newbee ni bangh

hapus komentarX + Balas

Nah yang gini saya suka males. Tidak bisa sekali jadi, harus bolak-balik ngecek ke tool responsive :>)

hapus komentarX + Balas

Tengkiyu sudah share cara membuat blog jadi responsive. Untuk tools cek responsive nya, menurut saya lebih lengkap di = h x x p://quirktools.com/screenfly . Blog anda sangat bermanfaat, semoga membawa berkah, amin..

hapus komentarX + Balas

Iya yang penting menggunakan code @media

hapus komentarX + Balas

Lebih manrap lagi kalau menggunakan HTML5, ini bergun untuk optimasi SEO

hapus komentarX + Balas

Izin belajar mas, tutorilanya bagus-bagus nih.

hapus komentarX + Balas

Maaf mau tanya saya masih bingung menaruh koding diatas dimana ya kalaw saya pake CMS Lokomedia

hapus komentarX + Balas

Artikel yang menarik gan....tapi saya masih binggung dengan ID element? Maksudnya apa sih? Bagaimana cara mengetahui ID Element blog? Terima kasih atas pencerahannya...:)

hapus komentarX + Balas

terima kasih sob sekarang sudah mengerti :)

hapus komentarX + Balas

Mantap Nih Triknya ...gan :D
Boleh ane Share Ke Blog Ane

hapus komentarX + Balas

Makasih mas, kunjungi juga situs adik

http://www.prediksibola888.blogspot.com
http://www.kis33.net

hapus komentarX + Balas

wah baru ketemu artikel kayak gini. ini yg sy cari. belajar dr mana mas?

hapus komentarX + Balas

Gimana cara nambahin kode CSS? terus contohnya kode CSS gimana? ane bingung dengan artikel di atas gan,, ente gak kasih contohnya script yg sudah ada kode CSS nya.

Poskan Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.


Konversi Kode di Sini! Emoticon OOT