02 June, 2015

Cara Cek Blog Mobile-Friendly Tanpa HP (1)

Nah, sebenarnya tips & trik ini berawal dari ketidak sengajaan mengecek responsive desain blog yang saya gunakan. Jadi waktu itu ceritanya saya tidak berniat untuk ganti theme blog ini, tapi waktu browsing saya mencari info tentang responsive design untuk blog, tidak sengaja saya menemukan sebuah design yang sangat saya sukai.

Oke, setelah di perbaiki sana-sini, dengan merubah sedikit skema html dan css-nya dengan komputer, saya berkata apakah setelah saya reDesign responsive-nya berubah atau tidak yah?, lalu saya mau mencobanya melalui handphone. Tapi sayangnya waktu itu pulsa internet hp saya kebetulan sedang habis. Ahh, nanti saja dech ngeceknya kalau sudah beli pulsa, begitu pikir saya. (walaupun bisa di cek juga dengan menggunakan tool online)

Ya sudah, akhirnya saya meneruskan merubah, tampilan. Nah dari sinilah ketidak sengajaan itu berasal. Saya setiap kali melihat kode html atau css yang ingin saya ubah selalu menggunakan bantuan Inspect Element (periksa elemen) punya google chrome. Dan ternyata Inspect element ini juga bisa untuk mengecek kompetible responsive desin untuk blog (dengan cara yang tidak resmi dan cara yang resmi)... hmm seru yah seperti apa caranya.


Cara Simple Mengecek dengan Browser Google Chrome

1. Cara yang tidak resmi

Pertama kali buka blog kamu,
kemudian klik kanan di mana saja
lalu pilih Inspect Element (periksa elemen)



Lihat gambar, pada ujung sebelah pojok kanan di KLIK sehingga yang tadi inspect element itu berbentuk landscapes (horizontal)


menjadi berbentuk vertikal Dan tarik ke sebelah kiri, sehingga bentuknya menyempit.


Waktu sudah menyempit Kadang memang kurang optimal dengan cara ini. Cara mengatasinya di resfresh/di segarkan saja browser-nya, dan lihat.



2. Cara Yang Resmi

Nah, kalao yang di atas cara yang tidak resmi. Tetapi di browser google chrome di sediakan juga cara yang resmi dengan menggunakan tool namanya Toggle Device Mode.


Seperti apa cara settingnya? sangat mudah hanya tinggl meng-klik icon gambar handphone Toggle Device Mode (lihat gambar atas)

Untuk mobile view Pada Device pilih yang paling bawah : Mulai dari Nokia Lumia 520, Nokia N9, Samsung Galaxy Note 3, Samsung Galaxy Note II, Samsung Galaxy SIII dan Samsung Galaxy4


((: mudah yah??...

Wah, akhirnya... bisa, juga mengecek apakah desain yang saya gunakan masih responsive atau tidak??,

ternyata masih.

Mungkin cara simple ini bisa juga di terapkan buat kamu,

mudah2an,... ;)
selamat mencoba tips dan trik mengecek responsive design blog kamu tanpa bantuan handphone smart phone :))

17 comments

  1. kalau saya suka pakai responsinator mas, ternyata ada cara lain juga tuh, praktek dlu mas :D

    ReplyDelete
    Replies
    1. iyah ada Mas Bro Hary sip selamat mencoba :)

      Delete
    2. masuk kemana itu kang

      Delete
  2. Sayang nya saya pakai mozila p mas jadi nggak bisa praktik biasanya cek responsif via webmaster

    ReplyDelete
    Replies
    1. siap Mas Dwi makasih kunjungannya, hanya sharing dari sedikit pengalaman yg sudah terjadi ;)

      Delete
  3. Bisa saya coba - coba nih keetulan mobile frendly saya rada aneh nih sekrang.
    saya coba - coba dulu tehnikny. biar g usah ke sana ke mari

    ReplyDelete
    Replies
    1. silahkan Kang, salam ngeblog juga yah! :))

      Delete
    2. kang secara cek saya mobile friendly tapi dari kemarin ko saya lihat dr hp tidak mobil frenly lagi. melebar. kenapa ya apa yang saya aja gitu ya

      Delete
  4. ikut nyimak aja deh sob, kagak tau harus ngomen apa :) :D

    ReplyDelete
    Replies
    1. he he!, terimakasih kunjungannya! Teh salam berbagi...

      Delete
  5. saya langsung percobakan ilmunya cara melihat blog mobile friendly nya kang...aiih ternyata blog saya teh responcive, mobile friendly dan valid HTML5...suwer keren banget blog saya teh yah...
    plak..plak....tiba-tiba dari belakang ada yang nabokin, sambil bilang...blagu luh.

    ReplyDelete
    Replies
    1. he he!, terimakasih kunjungannya! Kang salam berbagi...

      Delete
  6. wah setelah saya coba ternyata berhasil mas.
    jadi memudahkan kita untuk cek apabila nggak punya smartphone ya

    ReplyDelete
    Replies
    1. Iyah mas ini lumayan jadi ide juga buat bahan postingan (:

      Delete
  7. bisa saya coba nihkang. tapi emang saya ngerti gitu yah......saya ikuti aja deh panduannya

    ReplyDelete
    Replies
    1. sip sobat makasih nih tuk apresiasinya ((:salam ngeblog yah! :))

      Delete
  8. Wah, kita coba deh mas. Soalnya kita memang enggak punya smartphone...hehehe.

    ReplyDelete


Copyright © 2016 Photoshop blog dan Blogger