Tips-Cara-Website-Responsive-dengan-Viewport-Nyekrip

Pada saat membuat halaman website menjadi responsive (responsif), kita bisa menggunakan teknik grid, menata layout supaya terlihat sama dan standar pada setiap device. Ketika pada saat pengembangan kita hanya menggunakan desktop untuk uji coba halaman website, dengan melebarkan dan mengecilkan jendela browser sudah bisa melihat hasil perubahan tampilan halaman web.

Setelah yakin dengan uji coba pada desktop, kemudian kita coba pada layar perangkat mobile dengan harapan hasil akan sama dengan hasil uji coba di desktop, maka kita akan mengetahui jika hasilnya ternyata tidak sama. Pada perangkat mobile nampaknya memang tidak berhasil, kita hanya melihat versi yang dikecilkan dari desain yang berukuran penuh. Mari kita bahas secara mendetail.

Membuat dan uji coba Halaman Cara Website Responsive

Untuk lebih jelas dalam memahami perbedaan tampilan antara menggunakan Meta Tag Viewport dengan yang tidak, mari kita kita buat satu halaman web untuk uji coba. Supaya cepat, ketikkan atau kopas skrip berikut ini untuk membuat halaman web yang responsive.

Ketika kita running skrip diatas dalam browser versi desktop, maka browser akan menampilkan seperti gambar berikut ini.

Tampilan_desktop_Tips_Cara_Website_Responsive_dengan_Viewport_Nyekrip_com

Tampilan Browser Desktop

Dalam skrip diatas telah dilengkapi dengan media query agar tampilan menjadi renponsif dan belum menggunakan Meta Tag Viewport. Sekarang kita coba untuk mengubah ukuran browser, ubah ukuran browser ke ukuran yang lebih kecil dan usahakan serupa dengan ukuran tablet atau ukuran smartphone. Berikut adalah gambar dari tampilan halaman website dengan ukuran browser yang disamakan dengan layar iphone 5.

Tampilan_Smartphone_Tips_Cara_Website_Responsive_dengan_Viewport_Nyekrip

Tampilan yang diserupakan dengan Smartphone

Perhatikan gambar diatas, ada perubahan warna heading dari warna hijau ke warna hitam (perubahan ini sudah diatur dalam media query) dan tampilannya juga responsif, sejauh ini kita sudah berhasil membuat halaman website yang responsif.

Eh tunggu dulu, meskipun kita sudah berhasil mencoba halaman website supaya responsive pada browser dengan ukuran yang diserupakan dengan layar smartphone iphone 5, kita juga harus mencoba langsung pada device smartphone iphone 5. Berikut adalah gambar dari tampilan halaman website yang dibuka pada iphone 5.

tips-cara-website-responsive-dengan-viewport-Nyekrip

Tampilan pada iPHONE 5

Perhatikan gambar diatas, ternyata hasilnya berbeda dengan hasil uji coba sebelumnya. Pada gambar diatas menunjukkan bahwa heading masih berwarna hijau dan penyempitan layout tidak sesuai seperti yang kita harapkan, dan terdapat jarak yang cukup lebar antara tulisan dengan garis jendela browser. Sebenarnya kita melihat versi halaman web yang diperkecil secara visual dan tulisannya pun ikut mengecil sehingga tidak nyaman untuk dibaca.

iOS Safari masih menganggap bahwa halaman web memiliki lebar 980px, kemudian memperkecil-nya supaya bisa muat pada lebar keseluruhan yang tersedia (iPhone 5). Hasilnya, konten menjadi kurang dapat dibaca, kecuali kita memperbesarnya.

Mengenal dan Menambahkan Meta Tag Viewport

Untuk mengatasi masalah diatas, kita bisa menambah Meta Tag Viewport pada skrip diatas, letaknya tepat didalam elemen head. Sebelum kita mencoba untuk menambahkan, mari kita bahas secara singkat mengenai Meta Tag Viewport.

Skrip dibawah ini adalah bentuk dari Meta Tag Viewport.

Di dalam atribut content="" kita bisa memasukkan beberapa nilai (value) dengan dibatasi koma.

Untuk Sebagai contoh, jika desain kita telah dirancang pada layar di lebar 320px, kita bisa menentukan lebar viewport menjadi:

Supaya nilai lebar (width) bisa dinamis sesuai perangkat yang dipakai dan layout menjadi fleksibel, kita bisa memberi value seperti berikut.

Selain itu kita juga bisa mengatur tingkat optimal zoom (Pembesaran) , contohnya dengan skrip berikut.

Skrip diatas akan memastikan bahwa ketika halaman web terbuka, layout kita akan ditampilkan dengan baik pada skala 1:1.

Jika kita menghendaki supaya user tidak bisa melakukan pembesaran halaman web di perangkat smarphonenya, kita bisa menggunakan maximum-scale. Contohnya Skrip dibawah ini.

Tapi Sebelum menerapkan parameter maximum-scale, pertimbangkanlah terlebih dahulu apakah kita benar-benar mencegah pengguna untuk melakukan pembesaran halaman web. Singkatnya apakah para pengguna dapat membaca semua isi website dengan baik?

Setelah memahami penggunaan dari Meta Tag Viewport, mari kita selesaikan masalah perbedaan tampilan pada uji coba sebelumnya, kita tambahkan skrip Meta Tag Viewport berikut tepat dibawah meta tag description.

Sehingga hasil akhir dari skrip halaman responsif kita menjadi seperti berikut.

Setelah itu jalankan kembali skrip diatas pada browser, maka tampilan halaman web kita akan tampak seperti gambar berikut.

tips-cara-website-responsive-dengan-viewport2

Tampilan Browser di iPHONE 5 Setelah Penambahan Meta Tag

Perhatikan gambar diatas, pengecilan halaman web sudah lebih baik dan tetap pada skala yang benar. Kita bisa lihat bahwa teks sudah tidak lagi mengecil seperti sebelumnya melainkan menyesuaikan dengan luas bidang, jarak antara teks dengan batas juga tidak selebar sebelumnya, dan heading dengan warna hijau telah berganti dengan warna hitam sesuai harapan. Cukup Mudah Bukan? 🙂

Itulah Tips Cara Website Responsive  dengan Meta Tag Viewport, dengan desain web yang responsif kita telah memberikan tampilan yang nyaman pada bermacam-macam perangkat yang berbeda, apalagi sekarang para pengguna internet tidak hanya menggunakan PC Desktop atau laptop dalam browsing, mereka sudah menggunakan berbagai perangkat yang memiliki bentuk layar yang berbeda-beda.

Happy Nyekrip!

About The Author

Comments

    1. Admin Article Author

      benar, meta tag ini merupakan salah satu langkah untuk membuat template web responsive 🙂

  1. Pingback: Cara Membuat Template Web Responsive HTML 5 | novarizakhairani

  2. Alfian Ananda Putra

    Saya mau tanya nih , kan web nyekrip.com itu gak bisa di cubit atau di perbesar layarnya ,nah codenya itu apa ?,saya butuh code agar web tidak bisa di zoom 🙂

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.