Cek tampilan mobile blog di berbagai Merk HP dari PC, Komputer, atau Laptop

Pada awal Juni saya mengalami sedikit masalah. Artikel terkait (related posts) pada blog saya tidak muncul. Setelah dicoba beberapa solusi eh belum juga dapat solusinya. Tiba-tiba saja terlintas untuk ganti template. Alhasil, Bulan Juni 2018 ini template blog ini berubah jadi serba berwarna hijau. Yah semoga kamu juga suka dengan tema baru blog ini ya sahabat.

Ganti template itu repot sobat karena banyak penyesuaian yang harus dilakukan. Template blog yang saya gunakan masih pakai template blog gratisan. Mau template gratisan ataupun template premium alias berbayar pasti ada kekurangannya menurut kita. Apalagi template gratisan jelas sekali banyak element template yang dikurangi oleh pembuatnya.

Minggu lalu akhirnya saya berkesempatan untuk melakukan optimasi tampilan blog versi mobile. Template yang baru ini belum mendukung semua perangkat HP sehingga tampilannya masih berantakan kalau dilihat di HP dengan resolusi layar rendah. Kurang lebih 2-3 hari optimasi tampilan mobile blog ini selesai saya kerjakan. Kalau pun ada kekurangan, saya terus perbaiki sedikit demi sedikit.

Setelah optimasi saya coba cek di halaman pagespeedinsight Google. Hasilnya sudah bagus alias "Good". Terima kasih Google, hehe...

Cek tampilan mobile blog di berbagai Merk HP dari PC, Komputer, atau Laptop

Sebelum melakukan optimasi tampilan mobile blog, tentunya blog/website kita sudah mendukung tampilan mobile. Pengaturan ini bisa dilakukan dari dashboard Blogger dengan buka menu Tema kemudian Selular. Pada jendela mini opsi tampilan seluler, tandai opsi "Tidak. Tampilkan tema desktop di perangkat seluler."

Untuk optimasi tampilan mobile website atau blog dilakukan dengan cara mengecek langsung tampilan mobile blog di berbagai tipe HP. Untuk itu, apakah kita butuh banyak HP?. Tentu saja tidak. Kita bisa cek tampilan mobile blog di berbagai tipe HP melalui situs mobiletest.

Walaupun jenis HP yang digunakan sebagai simulasi di situs itu termasuk HP lama alias zaman old. Namun point yang dilihat untuk optimasi tampilan blog versi mobile adalah ukuran CSS dari resolusi layar HP tersebut. Ukuran CSS yang dilihat terutama ukuran panjang layar. Misalnya, Emulator HP Samsung Galaxy Y tahun 2011 memiliki ukuran CSS 240 x 320. Maka nilai 240 dijadikan sebagai patokan untuk optimasi tampilan mobile blog.

Nah inilah hasil cek tampilan mobile blog di berbagai tipe HP menggunakan 6 jenis emulator HP di situs mobiletestdotme beserta daftar ukuran resolusi CSS-nya.

1. Emulator HP Jenis Samsung galaxy Y tahun 2011

Samsung Galaxy Y Emulator
CSS Resolution	240 x 320
Pixel Resolution	240 x 320

2.  Emulator HP Tipe Apple Iphone 5 tahun 2012

Apple Iphone 5 Emulator
CSS Resolution	320 x 568
Pixel Resolution	640 x 1136

3. Emulator HP merk HTC One tahun 2013

HTC One Emulator
CSS Resolution	360 x 640
Pixel Resolution	1080 x 1920

4. Emulator HP merk Nokia Lumia 920 tahun 2012

Nokia Lumia 920 Emulator
CSS Resolution	460 x 768
Pixel Resolution	768 x 1280

5. Emulator HP Merk Google Nexus 7 tahun 2012

Google Nexus 7 Emulator
CSS Resolution	603 x 966
Pixel Resolution	800 x 1280

6. Emulator HP merk Apple Ipad Mini tahun 2013

Apple Iphad Mini Emulator
CSS Resolution	768 x 1024
Pixel Resolution	768 x 1024

Cara optimasi tampilan mobile blog atau website di berbagai merk HP

Apa yang harus dilakukan kalau mau optimasi tampilan blog supaya template responsive di versi mobile gan?.

Langsung saja, caranya seperti ini gan:

Buka dashboard Blogger Kemudian klik Tema kemudian Klik Edit HTML. Gunakan Ctrl+F kemudian masukkan keyword "@media" atau "@media screen" kemudian tap tombol Enter. Supaya template kamu bisa reponsive di banyak perangkat HP sebaiknya membuat beberapa element HTML "@media screen". Saat ini saya menggunakan element @media screen seperti berikut.

1. @media screen and (max-width: 1110px) {}}
2. @media screen and (max-width: 810px) {}}
3. @media screen and (max-width: 620px) {}}
4. @media screen and (max-width: 480px) {}}
5. @media screen and (max-width: 340px) {}}
6. @media screen and (max-width: 300px) {}}

Contoh penerapan ukuran CSS dengan element @media screen:

Untuk resolusi CSS HP dengan ukuran 320 x 568 maka diterapkan pada @media screen and (max-width: 340px) {}} karena 320 mendekati nilai 340.

Yuk bantu saya untuk mengecek tampilan mobile blog template baru blog Supervba. Bantu saya dengan kritik dan saran kamu ya sobat. Tulis komentarmu di kolom komentar.

Itulah cara cek tampilan mobile blog di berbagai HP dari PC, Komputer, atau Laptop. Semoga bermanfaat.