Mengubah Tampilan Website Menjadi Mobile Friendly

Share:

Saat ini, seluruh pemilik web maupun webmaster mengharuskan website-nya memiliki tampilan versi mobile. Ini dikarenakan algoritma Google yang baru, yaitu Mobilegeddon. Algoritma baru ini memprioritaskan situs-situs yang memiliki tampilan mobile. Munculnya algoritma ini tak lain adalah karena banyaknya pengguna perangkat mobile.

Untuk membuat website yang hanya tampil di desktop saja sih mudah, tetapi bagaimana jika harus ditampilkan di perangkat mobile dan menyesuaikan sendiri? Agar laman bisa menyesuaikan dengan lebar layar perangkat, harus ditambahkan meta tag berikut ini.
<meta name="viewport" content="width=device-width, initial-scale = 1">
Letakkan kode meta tag diatas pada setelah kode <head> kemudian buka / lihat bagian style css-nya. Kode diatas berfungsi untuk menyesuaikan lebar laman dengan lebar perangkat secara otomatis. Untuk menentukan style suatu elemen ketika dibuka melalui perangkat mobile, tambahkan kode di bawah ini pada script CSS Anda.

@media (max-width : 480px)  {
          // Kode CSS disini
 }

Menguji Situs

Sekarang, kita akan mengecek situs apakah sudah tersedia tampilan mobile (mobile-friendly) atau tidak. Untuk melakukan pengujian, terdapat 2 cara, yakni dengan membuka Inspect Element pada Browser dan Dengan melakukan pengujian situs mobile-friendly milik Google.

   
Menggunakan Pengujian Google

2. Masukkan URL laman yang akan dites tampilan mobile-nya

3. Klik tombol "ANALISIS". Setelah itu, mesin akan melakukan pengujian dalam beberapa saat
4. Jika sudah selesai akan tampil seperti gambar di bawah ini
(Loh, kok yang ditampilkan lamannya Facebook? Iya soalnya blog ini belum memenuhi syarat mobile friendly versi Google)

   
Menggunakan Inspect Element Browser

1. Pada laman yang akan diuji, klik kanan dimana saja dan klik "Inspect Element" atau tekan 
    CTRL+SHIFT+I

2. Setelah muncul kode-kode HTML laman, klik icon mobile dibagian kiri atas toolbar dan preview laman
    akan menjadi tampilan mobile (device dapat disesuaikan).

Jika salah satu dari kedua cara diatas berhasil, maka situs Anda sudah Mobile-Friendly. Cara mengetahui berhasil atau tidak pada cara menggunakan Inspect Element, tampilan akan menyesuaikan dengan lebar device. Atau juga ubah warna elemen tertentu jika dibuka melalui mobile (elemen diletakkan setelah @media).

No comments