Mengenal Viewport dan Pentingnya Zoom Untuk Tampilan Blog

Saya membuat artikel ini karena ternyata ada beberapa yang membuat tutorial agar blog tidak bisa diperbesar atau zoom dalam tampilan mobile. Namun yang saya sampaikan akan berbanding terbalik dengan tutorial tersebut. Apakah menonaktifkan zoom benar-benar diperlukan? Alasannya? Simak terus sampai habis ya.

Manfaat Viewport Zoom Untuk SEO Blog
Manfaat Viewport Zoom Untuk SEO Blog

Tampilan dan aksesibilitas menjadi salah satu faktor penting yang membuat pengunjung merasa betah untuk berlama-lama berada di blog kita. Perpaduan warna yang nyaman di mata, keberadaan menu navigasi dan widget yang mempermudah untuk mengeksplorasi konten lain, hal semacam inilah yang patut untuk dipilih secara matang agar pengunjung merasa nyaman.

Termasuk dalam pemilihan jenis dan ukuran font. Pintar-pintarlah memilih font yang sederhana namun tetap terlihat elegan. Kadang hal ini membuat pusing karena banyak sekali jenis font yang beredar. Untunglah sekarang ada layanan gratis dari Google Font yang berisi kumpulan font keren dan bisa digunakan secara bebas. Tinggal pilih deh tuh mau pakai yang mana. Tutorialnya sendiri ada di artikel yang berjudul Cara Pakai Google Font di Blog.

Urusan jenis font selesai. Lalu bagaimana dengan ukurannya? Meski tidak ada pakem resmi, namun biasanya ukuran font tidak jauh antara 12px, 14px, dan 16px. Apa pasti segitu? Tidak. Ini hanya ukuran yang kebanyakan dipakai.

Setiap pengunjung punya standar nyaman masing-masing. Ada yang suka ukuran font kecil, ada juga yang lebih enak pakai ukuran font besar. Perbedaan ini yang membuat kita sebagai pengurus blog harus pintar mengakalinya. Terlebih saat diakses di ponsel yang memiliki layar lebih kecil. Salah satu cara sederhana namun efektif adalah dengan mengaktifkan kemampuan zoom / enlarge (perbesar) saat layar ponsel di-pinch (dicubit).

Kenapa Zoom Penting?

Karena berpengaruh pada user experience atau pengalaman pengguna. Jika zoom TIDAK diaktifkan, ini bermasalah untuk pengunjung dengan pengelihatan rendah (misalnya mata minus) yang mengandalkan zoom browser untuk melihat konten halaman web [1].

Saya melakukan uji coba dengan sengaja menonaktifkan zoom dan di-test di situs web.dev. Hasilnya sudah bisa ditebak: blog mendapatkan peringatan dengan skor impact High pada kategori Accessibility, artinya hal ini berpengaruh besar pada aksesibilitas.

Cara Mengaktifkan Zoom Pada Blog Versi Mobile Membuat Blog Bisa Diperbesar di Versi Mobile Ponsel

Bagaimana Memperbaikinya?

Sangat amat mudah. Kemampuan browser melakukan zoom diatur oleh parameter user-scalable pada tag <meta name="viewport">. Coba lihat di template masing-masing kode yang kurang lebih seperti ini.

<meta content='width=device-width, initial-scale=1' user-scalable='no' name='viewport'/>

Cukup ganti nilai no atau 0 menjadi 1.

<meta content='width=device-width, initial-scale=1' user-scalable='1' name='viewport'/>

Atau dihapus sekalian juga bisa, jadinya begini.

<meta content='width=device-width, initial-scale=1' name='viewport'/>

Setelah saya memperbaikinya, pesan kesalahan di web.dev pun hilang dan langsung mendapatkan lampu hijau.

Agar Blog Bisa Pinch Dicubit Untuk Zoom

Bonus

Ini adalah kode viewport lengkap yang dipakai di blog Igniel dan di semua template yang saya buat, baik itu gratis maupun premium. Kalau mau pakai yang ini silakan, atau pakai kode di atas yang lebih pendek pun boleh.

<meta content='width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=5.0' name='viewport'/>

Saat ini hampir semua template telah memiliki pengaturan viewport yang benar, jadi kemungkinan besar kamu tidak perlu mengubah apa-apa. Namun artikel ini harus tetap dibuat sebagai jaga-jaga jika ternyata ada yang viewport-nya kurang tepat.

Apakah Ini Wajib?

TIDAK. Situs besar seperti Twitter dan Facebook saja tidak bisa diperbesar kok di versi mobile (setidaknya sampai artikel ini dibuat). Coba saja buka situsnya di browser handphone. Jadi semuanya balik lagi pada kamu sebagai pengurus blog. Mau pakai zoom atau tidak?

Catatan Kaki
  1. https://web.dev/meta-viewport/

Artikel Terkait

26 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Rumah Cerita
    25/2/22
    Profil: https://www.blogger.com/profile/12118065696712240535
    Mantaf Mbak, salah satu web yang menjadi rujukanku untuk setting blog kepunyaanku, terimakasih teruslah berbagi
  • Trial MembƎr
    1/1/22
    Profil: https://www.blogger.com/profile/15515183494785880008
    Kalau ada tulisan seperti ini bagaimana kak?
    'width=device-width, minimum-scale=1, initial-scale=1, shrink-to-fit=no' name='viewport'/>
  • Marfa Umi
    15/8/21
    Profil: https://www.blogger.com/profile/05885966094455820968
    Yay thank you tutorialnya kak Rain, kodenya bekerja! :)
  • Ahmad Shah Laupa
    3/3/21
    Profil: https://www.blogger.com/profile/08303282183553642554
    Ilmu yang bermanfaat, sangat membantu sekali buat blogger newbie kayak saya :)

    #mantaps teh Iginel
  • Portal Medis
    4/9/20
    Profil: https://www.blogger.com/profile/10132341181259692706
    trimakasih infonya
  • Zainu.developer
    21/7/20
    Profil: https://www.blogger.com/profile/09648258686540687553
    Mba, please help me!. Gimana cara benerin warning ini "A cookie associated with a cross-site resource at was set without the `SameSite` attribute"
  • Suparyono
    29/6/20
    Profil: https://www.blogger.com/profile/18381571902106283477
    thanks sis..
  • Kris
    9/6/20
    Profil: https://www.blogger.com/profile/04207869691251872168
    Setelah coba banyak tutorial, akhirnya nemu yang berhasil.

    Thanks bro... sekarang jadi bisa pinch zoom di versi mobilenya 😁
  • Admin
    3/6/20
    Profil: https://www.blogger.com/profile/11026085914255376265
    Nambah ilmu lagi hihi
  • Arlina
    13/5/20
    Profil: https://www.blogger.com/profile/07405635929635938311
    Cukup bermanfaat
  • Postinks
    10/5/20
    Profil: https://www.blogger.com/profile/00528242875445190649
    hehe keren bang
  • Sayem Miaji
    7/5/20
    Profil: https://www.blogger.com/profile/15582503996546012674
    hi bro i am from bangladesh and i am a regular visitor of your blog .
    can you plz write a post about how to hide sidebar on page in blogger template.
    plz write a post about it.... 🙏🙏
    • Postinks
      10/5/20
      Profil: https://www.blogger.com/profile/00528242875445190649
      kuyy gan saling follow
    • Igniel
      12/5/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      You have to use blogger conditional tags.
      There's tutorial about it.
      https://www.igniel.com/2018/10/menampilkan-menyembunyikan-widget-di-halaman-tertentu.html
    • Sayem Miaji
      17/5/20
      Profil: https://www.blogger.com/profile/15582503996546012674
      thanks
    • Sayem Miaji
      17/5/20
      Profil: https://www.blogger.com/profile/15582503996546012674
      https://www.igniel.com/2018/10/show-hide-widget-in-pecific%20page.html
      post in not found it say 404 eror
    • Diffa Addien
      18/5/20
      Profil: https://www.blogger.com/profile/00856510547827931754
      don't use translation
  • Saviour Esara
    6/5/20
    Profil: https://www.blogger.com/profile/00404210259329369298
    hello admin, pls i need this site template. thanks
    • Igniel
      12/5/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      It's not for sale.
      The only available item is Igniplex.
      https://www.igniel.com/2018/12/igniplex-premium-blogger-template.html
  • ndisaen.com
    27/4/20
    Profil: https://www.blogger.com/profile/12027183432486620009
    Aku pake template bootstrap di blogger auto menyesuaikan sih..
  • Zen
    24/4/20
    Profil: https://www.blogger.com/profile/16645045702429945600
    Usul Bang, di template blognya ditambahin kode ini:

    * {
    word-wrap: break-word;
    }

    Soalnya aku kadang posting kata tanpa spasi hingga akhirnya menembus layar
    • Igniel
      24/4/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pake template apa & versi berapa?
      Igniplex mah udah ada.
  • Iska
    20/4/20
    Profil: https://www.blogger.com/profile/17599499159229080857
    kalo saya biasanya lebih karena viewport ini buat syarat biar bisa responsive aja :)
  • İlkay Gürler
    19/4/20
    Profil: https://www.blogger.com/profile/05277513707502417201
    Hello, How can we hide a post on Blogger on the homepage? Is there a code to set it so it just doesn't appear on the homepage? Can you help.
    • Saifullah.id
      15/5/20
      Profil: https://www.blogger.com/profile/01297676871626205778
      It is simple to do that. Just Edit your post and then change the date to the old one. For example you change it to be January 1st 1890. The post will be hide from the first homepage and it moves to the last of your page. So everyone cannot find it until they search it into your search box.
  • Fauzi Wibawa
    14/4/20
    Profil: https://www.blogger.com/profile/10022583168007719914
    Min bikin tutorial dong gimana caranya bikin label yang ada iconnya kaya di blog igniel ini.

    Saya tunggu 🙏