Developer website mau tidak mau harus memikirkan tampilan responsif ini. Bukan berarti ini adalah sebuah masalah yang besar. Banyak jalan yang bisa dilakukan untuk menghasilkan tampilan responsif. Namun, hingga saat ini masih belum banyak yang mengoptimasi ukuran gambar saat tampilan website menjadi responsif. Karena hal itu perlu konfigurasi server yang tidak mudah.
Di entri kali ini saya akan membagi inti dari bagaimana cara membuat tampilan responsif. Penasaran bukan?
Cara Membuat Tampilan Blog Responsif
Dulu saat pertama kali saya mengenal tampilan responsive, saya hanya menggunakan kueri media yang ada di CSS. Namun, ternyata hal itu hanya berlaku untuk perangkat besutan Apple saja, seperti iPhone dan iPad. Untuk Android, ternyata ada standar tersendiri yang harus ditambahkan.Tambahkan meta tag berikut ini di antara <head> dan </head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>Jika di HTML5 hilangkan / sebelum tanda >. Kode di atas digunakan untuk template Blogger yang berbasis XML.
Setelah itu, tambahkan kueri media di kode CSS kamu. Misalkan kamu ingin membuat tampilan yang berbeda di ukuran lebih kecil dari 721px dan lebih besar dari 480px, berikut cara penulisannya.
@media screen and (max-width: 720px) and (min-width: 480px) {
/*-- isi dengan kode CSS-mu di sini --*/
}Begitu juga dengan ukuran-ukuran yang lainnya, kamu bisa mengubah kode "max-width" dan "min-width"-nya. Mudah, bukan?
Contoh Template Blogger Responsif
Jika kamu pengguna layanan Blogger, kamu bisa mencoba salah satu template Blogger yang responsif ini. |
| Respon-X Blogger Template |
Tertarik, kamu bisa mengunduhnya di halaman Download Respon-X. Kamu juga mengetes template ini dengan Responsive Tools.
Mengetes Tampilan Blog Responsif
Jika kamu ingin mengetes apakah tampilan website/blog kamu yang sudah responsif, kamu bisa mengunjungi situs Responsive Tools ini. |
| Responsive Tools |
Selamat mencoba :)
Emmm memangnya kalau sudah responsive kenapa mas? :/ Maaf mas saya masih newbie baru 2 bulan bikin blog... Mohon bimbingannya ya... :)
BalasHapuskalo responsif lebih enak dipandang mata
Hapusapalagi kalo diakses dari banyak perangkat ponsel
tapi ya lebih rempong bikinnya
Owh jadi kalau responsive itu yang gimana mas? :o Apakah yang simpel simpel gitu?
Hapustidak harus simple
Hapusmemang kebanyakan website yang responsive itu tampilannya simple
blog ini tampilannya simple, tapi tidak responsive
kalo pengen tahu, coba buka tools yang aku kasih di entri ini
http://intikali.org/responsive-tools/
lalu masukkan contohnya: responx.blogspot.com
nanti kamu akan melihat tampilan blog Respon-X yang bervariasi di beberapa lebar layar
Owlaah iya iya mas,,,, :D hehehe blog saya sudah responsive ya...
HapusSya biasanya menggunakan tool ini mas:
http://responsinator.com/
http://ami.responsivedesign.is/
iya sudah :)
Hapusiya, saya juga kadang menggunakan 2 tools itu kug
wah, tinggal ngoding cssnya tuh yang susah :D
BalasHapusya itulah letak seninya :D
HapusSaya pernah coba memasukkan css nya dalam 1 file, didalamnya saya set untuk berbagai ukuran media.
HapusKetika di load kenapa tidak bisa di apply css nya ?, jika saya gabungkannstylenya dengan htmlnya justru berjalan sesuai yang saya ingin kan
mungkin < link > ke file CSS nya salah :)
Hapuscoba cek lagi
Saya juga seperti itu mas, jika stylenya saya jadikan satu dalam tag <style/> malah gak bisa, jika saya pecah2 ke dalam tag tag style lain baru bisa. Gimana itu mas?
Hapusjelas ga bisa lah :D
Hapuskalo HTML itu < style > < /style >
kalo XML baru < style /> itu bisa :D
HTML dan XML itu beda aturan dalam markup-nya
Pake browser juga bisa kok
BalasHapusapanya yang pake browser?
HapusMembuat blog responsive lumayan susah juga ya. Nih template buatanku juga belum responsive....
BalasHapuskalo dibilang susah tidak juga
Hapustergantung struktur tampilan responsive-nya :)
tapi yang jelas butuh waktu ekstra untuk mengerjakannya
yang dimaksud template resposif itu sebenarnya yang gimana sih?
BalasHapusyang kayak responx.blogspot.com
Hapuspengen si, tapi pusing buatnya, ga pandai coding soalnya
BalasHapusmau di praktekin script nya aja di copy gak bisa huhh payah gak ikhlas
BalasHapushaha :D
Hapusngeblog itu tidak mensyaratkan keikhlasan :)
ini berlaku untuk responsif di PC?
BalasHapusya, berlaku juga :)
Hapusom... minta tolong donk bantu saya buat responsivkn blog
BalasHapussaya dah bikin blog itu pngunjungnya juga dah lumayan,cuma saya masih awam nih bahasa dn kode2 gituan,kalo ada yg mo bantu tolong donk minta no hp atau pin bb nya
terimakasih
kalo me-responsive-kan blog tidak gratis :)
Hapuskarena itu bukan hal yang mudah dan memakan waktu yang sangat banyak
css nya di taruh mas gan
BalasHapus