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.

Mengenal Viewport dan Pentingnya Zoom Untuk Akses 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/
SHARE Pin Share
Artikel Terkait
22 komentar
  1. Min bikin tutorial dong gimana caranya bikin label yang ada iconnya kaya di blog igniel ini.

    Saya tunggu 🙏

    BalasHapus
  2. 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.

    BalasHapus
    Balasan
    1. 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.

      Hapus
  3. kalo saya biasanya lebih karena viewport ini buat syarat biar bisa responsive aja :)

    BalasHapus
  4. Usul Bang, di template blognya ditambahin kode ini:

    * {
    word-wrap: break-word;
    }

    Soalnya aku kadang posting kata tanpa spasi hingga akhirnya menembus layar

    BalasHapus
    Balasan
    1. Pake template apa & versi berapa?
      Igniplex mah udah ada.

      Hapus
  5. Aku pake template bootstrap di blogger auto menyesuaikan sih..

    BalasHapus
  6. hello admin, pls i need this site template. thanks

    BalasHapus
    Balasan
    1. It's not for sale.
      The only available item is Igniplex.
      https://www.igniel.com/2018/12/igniplex-premium-blogger-template.html

      Hapus
  7. 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.... 🙏🙏

    BalasHapus
    Balasan
    1. kuyy gan saling follow

      Hapus
    2. 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

      Hapus
    3. https://www.igniel.com/2018/10/show-hide-widget-in-pecific%20page.html
      post in not found it say 404 eror

      Hapus
    4. don't use translation

      Hapus
  8. Setelah coba banyak tutorial, akhirnya nemu yang berhasil.

    Thanks bro... sekarang jadi bisa pinch zoom di versi mobilenya 😁

    BalasHapus
  9. Mba, please help me!. Gimana cara benerin warning ini "A cookie associated with a cross-site resource at was set without the `SameSite` attribute"

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!