Di periode kini penggunaan perangkat seluler seperti ponsel pintar untuk berselancar di internet melalui web terus meningkat secara drastis, akan namun sayangnya tidak semua situs web telah dioptimalkan untuk perangkat seluler. Perangkat seluler lazimnya memilliki dimensi layar yang kecil ketimbang perangkat desktop, hal inilah yang menjadi kendala sehingga memerlukan pendekatan yang berlainan dalam bagaimana kontn web ditampilkan di dalam layar.
Di samping itu, terdapat berbagai dimensi ukuran layar untuk ponsel, tablet, TV, desktop, konsol game dan perangkat yang lain yang mampu dipakai. Dimensi layar selalu berubah, hal ini mengakibatkan sebuah website sangatlah penting untuk dapat menyesuaikan diri dengan tiap ukuran layar.
Desain web responsif, pada mulanya didefinisikan oleh Ethan Marcotte yang menyatakan jawaban atas kebutuhan pengguna dan perangkat yang mereka gunakan. Perubahan tata letak atau layout berdasarkan dimensi layar dan kemampuan 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.
Mengatur Tampilan yang Ditampilkan
Suatu laman web yang dioptimalkan untuk berbagai perangkat diharuskan menyertakan tag meta viewport di bab kepala atau head dokumen web. Tag meta viewport ini mampu memberikan petunjuk kepada web browser perihal bagaimana cara menertibkan ukuran laman dan skala laman web tersebut.
- Terapkan tag meta viewport dalam menertibkan lebar dan penskalaan tampilan yang terlihat pada web browser.
- Sertakan juga width=device-width dalam mencocokkan atau menyesuaikan lebar layar dalam piksel yang tidak bergantung pada suatu 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.
Browser seluler mengupayakan pengalaman terbaik dengan menyediakan render halaman pada lebar layar desktop, dan lalu mencoba membuat konten terlihat lebih baik dengan menambahukuran font dan mengubah ukuran konten supaya 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 semoga mampu menyaksikan 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 supaya mampu sesuai dengan dimensi ukuran layar yang berlainan-beda, apakah dirender pada telepon seluler kecil atau monitor desktop yang besar.
 |
| Tanpa Viewport |
 |
| Dengan Viewport |
Beberapa web browser bisa menjaga lebar laman web secara konstan dikala beralih ke mode lanskap, dan melaksanakan zoom bukannya mengganti posisi atau geometri untuk mengisi layar. Menambahkan atribut initial-scale=1 mampu memerintahkan web browser dalam membangun kekerabatan 1:1 antara piksel CSS dan piksel yang tidak tergantung perangkat terlepas dari orientasi perangkat, dan juga memungkinkan laman web untuk memanfaatkan lebar lanskap secara sarat .
Memastikan Tampilan yang Terlihat Dapat Diakses
Disamping menerapkan initial-scale, kamu juga mampu menyetel atribut berikut pada performa yang tampakdi layar perangkat.
- minimum-scale
- maximum-scale
- user-scalable
Apabila disetel, hal ini mampu menonaktfkan kemampuan pengguna dalam melaksanakan zoom terhadap penampilan yang tampakdi web browser dan berpotnsi menjadikan problem aksebilitas.
Menyesuaikan Ukuran Konten dengan Tampilan yang Terlihat
Pada perangkat ponsel dan desktop, pengguna biasanya menggulir laman web secara vertikal bukan secara horizontal. Jika memaksakan pengguna untuk menggulir secara horizontal atau mesti memperkecil tampilan semoga bisa terlihat seluruh halaman oleh pengguna mampu menjadikan pengalaman pengguna yang buruk atau jelek.
- Dilarang atau sebisa mungkin untuk disingkirkan menggunakan komponen berlebar tetap yang besar.
- Konten tidak diperbolehkan bergantung pada lebar penampilan yang tampaktertentu untuk merender dengan baik.
- Gunakan kueri media CSS untuk menerapkan penataan gaya yang berlainan untuk layar kecil dan besar.
Saat mengembangkan atau membangun suatu situs seluler dengan tag meta viewport, kadang kala kita secara tidak sengaja membuat konten pada laman web yang tidak muat dalam performa yang terlihat yang sudah ditetapkan. Misalkan, gambar yang mau ditampilkan memiliki lebar yang lebih lebar dari tampilan yang terlihat mampu menjadikan tampilan yang terlihat untuk menggulir secara horizontal. Oleh alasannya itu kamu mesti menyesuaikan konten ini agar muat ke dalam lebar performa yang terlihat, sehingga pengguna tidak perlu menggulir secara horizontal.
Disebabkan ukuran dan lebar layar dalam piksel CSS bermacam-macam antar perangkat (misalnya, antara ponsel dan tablet, dan bahkan antara ponsel yang berlawanan), konten tidak diperbolehkan bergantung pada lebar penampilan yang tampaktertentu untuk dirender dengan baik.
Menyetel lebar CSS yang besar secara mutlak untuk unsur laman web (seperti acuan di bawah), mengakibatkan div menjadi terlalu lebar untuk penampilan yang terlihat pada perangkat yang lebih sempit (contohnya, perangkat dengan lebar piksel CSS 320, seperti iPhone). Sebaiknya, fikirkan untuk menggunakan nilai lebar relatif, mirip width: 100%. Demikian juga, berhati-hatilah memakai nilai pemosisian otoriter besar yang mampu menjadikan bagian berada di luar tampilan yang tampakpada layar kecil.
 |
| Responsif Iphone |
 |
| Responsif Nexus |
Simak juga Dasar Web Responsif dengan menggunakan kueri CSS di postingan selanjutnya.
Sumber https://blogbugabagi.blogspot.com/
EmoticonEmoticon