Blogodolar

Apakah Desain Blog Anda Sudah Responsif? Cek dengan Responsinator

oleh Herman Yudiono

Desain web responsif (responsive web design) adalah sebuah pendekatan mendesain web sehingga web (blog/situs) tersebut memberikan pengalaman melihat yang optimal di berbagai perangkat, mulai dari layar desktop sampai telepon seluler. Konsep ini pertama kali diperkenalkan dipopulerkan oleh Ethan Marcotte pada 25 Mei 2010 lalu.

Seiring dengan meningkatnya penggunaan tablet dan smartphone sebagai perangkat berselancar internet, desain web responsif mendapatkan perhatian beragam kalangan. Bahkan, Google pun merekomendasikan desain web responsif kepada para webmaster. Tak heran, banyak theme WordPress yang dibuat dengan konsep ini.

Pertanyaannya adalah apakah desain blog/situs Anda sudah responsif?

Jika Anda belum tahu jawabannya, silakan gunakan Responsinator untuk mengecek apakah blog/situs Anda sudah responsif atau belum. Saya sendiri sudah mengecek tampilan Blogodolar melalui situs tersebut.

Contoh tampilannya seperti di bawah (lengkapnya Anda bisa lihat di Blogodolar at Responsinator).

Sebagai informasi, di Responsinator Anda akan melihat beragam ukuran monitor, yaitu:

  • iPhone 3+4 portrait 320 x 480 px
  • iPhone 3+4 landscape 480 x 320 px
  • iPhone 5 portrait 320 x 568 px
  • iPhone 5 landscape 568 x 320 px
  • Crappy Android portrait 240 x 320 px
  • Crappy Android landscape 320 x 240 px
  • Android (Samsung Galaxy) portrait 380 x 685 px
  • Android (Samsung Galaxy) landscape 685 x 380 px
  • iPad portrait 768 x 1024 px
  • iPad landscape 1024 x 768 px
  • Kindle portrait 600 x 1024 px
  • Kindle landscape 1024 x 600 px

Selamat mencoba!

PS: Jika Anda tahu tools lain untuk mengecek responsivitas blog/situs, silakan Anda menginformasikannya di bagian komentar, lengkap dengan URL tools tersebut. Saya akan memperbaharui postingan ini dengan memasukkan tools tersebut beserta link ke blog Anda.

Update:

Tools lain yang bisa digunakan untuk mengecek responsivitas web:

Reader Interactions

Comments

  1. Eko Yuliandri says

    Salam kenal dari Saya. Terimakasih Info nya… Wah, barusan saya cek themes blog saya ternyata tidak resposif,
    Bisa diberi tahu bagaimana cara mengedit themes supaya jadi responsif?

  3. Budi Majid says

    setelah dicek web saya ternyata belum responsif Kang Yudi, di Responsinator tampilannnya sama aja.. 🙂

  4. Leo Ari Wibowo says

    Kebetulan theme saya sudah responsif mas. Tapi saya membuang dukungan buat crappy android. Btw, kalau soal tes responsif, saya lebih suka pakai Screenqueries (http://screenqueri.es/). Ada grid yang lumayan membantu untuk mengukur padding/margin elemen dalam theme. Biar pixel perfect istilahnya :).

    • Herman Yudiono says

      Leo,

      Thanks atas informasinya. Saya yakin Anda paham dengan coding sehingga familiar dengan grid.
      Kalau saya tidak paham. Duh…

  5. amdhas says

    Ini konsep bukan ethan marcote yang membuat tetapi W3C tolong diralat artikelnya. responsive itu media query, dan itu sudah dari trahun jebot sebelum ethan marcote posting saya sudah posting duluan..itu sintak css dari @rule.

    ethan karena memposting di situs terkenal alistapart. perlu di ralat ini artikel. jangan sampai salah responsive itu penyesuaian layar bukan mobile. dan bukan ethan marcote penggagas atau penemu. bahkan dari Indonesia bli dani iswara dan saya pernah posting media query sebelum ethan marcote.

    Tolong di perbaiki itu yang saya minta dari artikel ini supaya pembaca tidak salah kaprah. dan merujuk ke pembuat yaitu W3C.

  6. Nadiar says

    Iyah, kenapa baru sekarang nemu tools kayak ini.

    Blogdiar.net sudah responsive, saya pakai thesis framework dan edit sendiri skinsnya untuk jadi responsive.

    theme blogodollar cepet dan minimalis, saya suka.

    • Herman Yudiono says

      Nadiar,

      Mantap. Thanks atas kesannya terhadap tampilan Blogodolar. Saya memakai Genesis dengan child theme Prose yang saya edit sebisanya agar minimalis.

  7. Rifki Taufik says

    blog saya blum responsif kang, blum paham betul. Bagaimana caranya? Sudah googling tapi ya membingungkan.

    • Rifki Taufik says

      iya, punya saya kok belum responsif, apa temanya yang salah ya, saya kan pake blogspot. maklum wordpress kurang minat, gampsang sekali di deface. saya pernah deface salah satu blog wordpress juga, hehe.. 🙂

  9. Kevin says

    Blog saya dah responsif kang , barusan aku cek : http://responsinator.com/?url=www.kevinhq.com 😀

    Untuk tools,biasa saya install plugin Web Developer di google chrome, ada menu “View Responsive Layouts”.

    Kalau mau yang paling bagus, saya rekomendasi crossbrowsertesting.com (berbayar sih), tapi mereka sediakan simulatornya juga. Jadi kita bisa lakukan live test, untuk device tertentu , misal di iPhone 🙂

  10. subhan says

    Info bermanfaat buat saya, makasih banyak. Kalau gak mau pusing edit css dan php theme anda, sebaiknya ganti theme aja yang responsive. Mas Syaiful udah kasi sarang di atas.

  11. Daniel Simanjuntak says

    Barusan kucek punya ku dah gak responsif euy, gimana cara nya supaya resposif juragan?

    • subhan says

      Iya benar, aku dah coba. lebih sederhana, dan tampilan web saya kelihatan lebih rapi disana dengan resolusi yang sama. Makasih bro…

  14. Abed Saragih says

    Sudah saya coba Mas hasilnya yah responsif tapi agak terhalang iklan dikit 🙂

  15. Lala says

    Alhamdulillah sekarang punyaku sudah responsif, sebelum baca artikel ini sich belum. Kemarin utak atik ganti theme 🙂

  16. Jefry says

    ternyata bagusnya punya theme blog yang responsive ya tapis ayangnya theme yang dipakai blog saya belum responsif sama sekali
    trims buat infonya

  19. Abu Tsaqiif says

    Alhamdulillah… template saya responsive juga nih.. 😉
    salam kenal semuanya…
    Kang lw boleh mnta, tolong postingkan tentang SEO donk..
    saya ingin belajar nih..