banner 728x250

Dasar-Dasar Yang Perlu Diketahui Wacana Rancangan Web Responsif

  • Share
banner 468x60
Di kala kini penggunaan perangkat seluler mirip ponsel pintar untuk berselancar di internet lewat web terus berkembangsecara drastis, akan namun sayangnya tidak semua situs web telah dioptimalkan untuk perangkat seluler. Perangkat seluler biasanya memilliki dimensi layar yang kecil dibandingkan dengan perangkat desktop, hal inilah yang menjadi hambatan sehingga memerlukan pendekatan yang berbeda dalam bagaimana kontn web ditampilkan di dalam layar.
Di samping itu, terdapat aneka macam dimensi ukuran layar untuk ponsel, tablet, TV, desktop, konsol game dan perangkat yang lain yang mampu dipakai. Dimensi layar senantiasa berganti, hal ini menyebabkan suatu situs web sangatlah penting untuk mampu beradaptasi dengan tiap ukuran layar.
 Di era sekarang penggunaan perangkat seluler seperti smartphone untuk berselancar di inte Dasar-dasar yang Perlu Diketahui Tentang Desain Web Responsif
Desain web responsif, pada awalnya didefinisikan oleh Ethan Marcotte yang menyatakan tanggapan atas keperluan pengguna dan perangkat yang mereka gunakan. Perubahan tata letak atau layout menurut dimensi layar dan kesanggupan perangkat. Contohnya, pada perangkat seluler, pengguna melihat konten yang ditampilkan dalam satu kolom, sedangkan pada perangkat tablet bisa saja konten ditampilkan dengan dua kolom dengan konten yang serupa.
 Di era sekarang penggunaan perangkat seluler seperti smartphone untuk berselancar di inte Dasar-dasar yang Perlu Diketahui Tentang Desain Web Responsif

Mengatur Tampilan yang Ditampilkan

Suatu laman web yang dioptimalkan untuk berbagai perangkat diharuskan menambahkan tag meta viewport di bagian kepala atau head dokumen web. Tag meta viewport ini bisa memberikan petunjuk kepada web browser mengenai bagaimana cara mengatur ukuran laman dan skala laman web tersebut.
  • Terapkan tag meta viewport dalam mengatur lebar dan penskalaan tampilan yang tampakpada web browser.
  • Sertakan juga width=device-width dalam mencocokkan atau menyesuaikan lebar layar dalam piksel yang tidak bergantung pada sebuah perangkat.
  • Sertakan juga initial-scale=1 dalam membentuk keterkaitan 1:1 antara piksel CSS dan piksel yang tidak bergantung pada sebuah perangkat.
  • Pastikan laman web mampu diakses dengan tidak menonaktifkan penskalaan pengguna.
Baca juga:  Cara Agar Smartphone Tak Lemot dan Memori Tidak Penuh - LAGIKEPO
Browser seluler mengupayakan pengalaman terbaik dengan menawarkan render halaman pada lebar layar desktop, dan lalu mencoba membuat konten tampaklebih baik dengan menambahukuran font dan mengubah ukuran konten biar sesuai dengan layar. Ini berarti bahwa ukuran font mungkin tampil tidak konsisten bagi pengguna, yang mungkin harus ketuk dua kali atau cubit untuk melakukan zoom biar mampu melihat dan berinteraksi dengan konten.
Menggunakan nilai meta viewport width=device-width ini dapat memerintahkan laman web untuk menyesuaikan lebar layar dalam piksel yang tidak tergantung perangkat. Hal ini memungkinkan laman web untuk mengubah posisi atau geometri konten agar dapat sesuai dengan dimensi ukuran layar yang berlainan-beda, apakah dirender pada telepon seluler kecil atau monitor desktop yang besar.
 Di era sekarang penggunaan perangkat seluler seperti smartphone untuk berselancar di inte Dasar-dasar yang Perlu Diketahui Tentang Desain Web Responsif
Tanpa Viewport
 Di era sekarang penggunaan perangkat seluler seperti smartphone untuk berselancar di inte Dasar-dasar yang Perlu Diketahui Tentang Desain Web Responsif
Dengan Viewport
Beberapa web browser bisa mempertahankan lebar laman web secara konstan saat beralih ke mode lanskap, dan melakukan zoom bukannya mengganti posisi atau geometri untuk mengisi layar. Menambahkan atribut initial-scale=1 dapat memerintahkan web browser dalam membangun korelasi 1:1 antara piksel CSS dan piksel yang tidak tergantung perangkat terlepas dari orientasi perangkat, dan juga memungkinkan laman web untuk mempergunakan lebar lanskap secara sarat .

Memastikan Tampilan yang Terlihat Dapat Diakses

Disamping menerapkan initial-scale, kamu juga dapat menyetel atribut berikut pada tampilan yang terlihat di layar perangkat.
  • minimum-scale
  • maximum-scale
  • user-scalable
Apabila disetel, hal ini dapat menonaktfkan kemampuan pengguna dalam melaksanakan zoom terhadap performa yang tampakdi web browser dan berpotnsi mengakibatkan dilema aksebilitas.

Menyesuaikan Ukuran Konten dengan Tampilan yang Terlihat

Pada perangkat ponsel dan desktop, pengguna umumnya menggulir laman web secara vertikal bukan secara horizontal. Jika memaksakan pengguna untuk menggulir secara horizontal atau mesti memperkecil tampilan agar bisa terlihat seluruh halaman oleh pengguna mampu menyebabkan pengalaman pengguna yang buruk atau jelek.
  • Dilarang atau sebisa mungkin untuk dikesampingkan menggunakan komponen berlebar tetap yang besar.
  • Konten tidak diperbolehkan bergantung pada lebar tampilan yang tampaktertentu untuk merender dengan baik.
  • Gunakan kueri media CSS untuk menerapkan penataan gaya yang berbeda untuk layar kecil dan besar.
Baca juga:  Ahli Programming Dengan Belajar Dari 7 Channel Youtube Asal Indonesia
Saat membuatkan atau membangun suatu situs seluler dengan tag meta viewport, terkadang kita secara tidak sengaja menciptakan konten pada laman web yang tidak muat dalam performa yang terlihat yang sudah ditetapkan. Misalkan, gambar yang akan ditampilkan memiliki lebar yang lebih lebar dari penampilan yang terlihat bisa mengakibatkan performa yang terlihat untuk menggulir secara horizontal. Oleh alasannya adalah itu kamu harus menyesuaikan konten ini supaya muat ke dalam lebar tampilan yang terlihat, sehingga pengguna tidak butuhmenggulir secara horizontal.
Disebabkan ukuran dan lebar layar dalam piksel CSS bervariasi antar perangkat (contohnya, antara ponsel dan tablet, dan bahkan antara ponsel yang berlainan), konten tidak diperbolehkan bergantung pada lebar tampilan yang terlihat tertentu untuk dirender dengan baik.
Menyetel lebar CSS yang besar secara mutlak untuk unsur laman web (seperti teladan di bawah), mengakibatkan div menjadi terlalu lebar untuk performa yang tampakpada perangkat yang lebih sempit (misalnya, perangkat dengan lebar piksel CSS 320, mirip iPhone). Sebaiknya, pikirkan untuk memakai nilai lebar relatif, mirip width: 100%. Demikian juga, berhati-hatilah menggunakan nilai pemosisian absolut besar yang mampu mengakibatkan bagian berada di luar performa yang tampakpada layar kecil.
 Di era sekarang penggunaan perangkat seluler seperti smartphone untuk berselancar di inte Dasar-dasar yang Perlu Diketahui Tentang Desain Web Responsif
Responsif Iphone
 Di era sekarang penggunaan perangkat seluler seperti smartphone untuk berselancar di inte Dasar-dasar yang Perlu Diketahui Tentang Desain Web Responsif
Responsif Nexus
Simak juga Dasar Web Responsif dengan memakai kueri CSS di artikel selanjutnya.
banner 336x280
banner 120x600
  • Share