Di abad sekarang penggunaan perangkat seluler mirip smartphone untuk berselancar di internet lewat web terus meningkat secara drastis, akan namun sayangnya tidak semua situs web telah dioptimalkan untuk perangkat seluler. Perangkat seluler umumnya memilliki dimensi layar yang kecil ketimbang perangkat desktop, hal inilah yang menjadi kendala sehingga memerlukan pendekatan yang berlawanan 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 lainnya yang bisa digunakan. Dimensi layar selalu berubah, hal ini mengakibatkan suatu situs web sangatlah penting untuk mampu mengikuti keadaan dengan tiap ukuran layar.
Desain web responsif, pada mulanya didefinisikan oleh Ethan Marcotte yang menyatakan jawaban atas keperluan pengguna dan perangkat yang mereka gunakan. Perubahan tata letak atau layout menurut dimensi layar dan kemampuan perangkat. Contohnya, pada perangkat seluler, pengguna menyaksikan konten yang ditampilkan dalam satu kolom, sedangkan pada perangkat tablet mampu saja konten ditampilkan dengan dua kolom dengan konten yang sama.
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 menunjukkan petunjuk kepada web browser mengenai bagaimana cara mengontrol ukuran laman dan skala laman web tersebut.
- Terapkan tag meta viewport dalam mengontrol 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 suatu perangkat.
- Sertakan juga initial-scale=1 dalam membentuk keterkaitan 1:1 antara piksel CSS dan piksel yang tidak bergantung pada suatu perangkat.
- Pastikan laman web mampu diakses dengan tidak menonaktifkan penskalaan pengguna.
Browser seluler mengupayakan pengalaman terbaik dengan menawarkan render halaman pada lebar layar desktop, dan kemudian menjajal menciptakan konten terlihat lebih baik dengan memperbesar ukuran font dan mengganti ukuran konten biar sesuai dengan layar. Ini memiliki arti bahwa ukuran font mungkin tampil tidak konsisten bagi pengguna, yang mungkin harus ketuk dua kali atau cubit untuk melaksanakan zoom semoga 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 biar mampu sesuai dengan dimensi ukuran layar yang berbeda-beda, apakah dirender pada telepon seluler kecil atau monitor desktop yang besar.
 |
| Tanpa Viewport |
 |
| Dengan Viewport |
Beberapa web browser mampu mempertahankan lebar laman web secara konstan ketika beralih ke mode lanskap, dan melakukan zoom bukannya mengubah posisi atau geometri untuk mengisi layar. Menambahkan atribut initial-scale=1 dapat memerintahkan web browser dalam membangun relasi 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 tampakdi layar perangkat.
- minimum-scale
- maximum-scale
- user-scalable
Apabila disetel, hal ini mampu menonaktfkan kemampuan pengguna dalam melaksanakan zoom kepada tampilan yang tampakdi web browser dan berpotnsi menjadikan dilema 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 penampilan supaya bisa terlihat seluruh halaman oleh pengguna mampu menjadikan pengalaman pengguna yang buruk atau jelek.
- Dilarang atau sebisa mungkin untuk dikesampingkan memakai elemen 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 berlawanan untuk layar kecil dan besar.
Saat mengembangkan atau membangun suatu situs seluler dengan tag meta viewport, kadang kala kita secara tidak sengaja menciptakan konten pada laman web yang tidak muat dalam performa yang tampakyang sudah ditetapkan. Misalkan, gambar yang akan ditampilkan mempunyai lebar yang lebih lebar dari tampilan yang terlihat bisa menyebabkan penampilan yang terlihat untuk menggulir secara horizontal. Oleh sebab itu kamu mesti menyesuaikan konten ini semoga muat ke dalam lebar penampilan yang terlihat, sehingga pengguna tidak perlu menggulir secara horizontal.
Disebabkan ukuran dan lebar layar dalam piksel CSS beragam antar perangkat (contohnya, antara ponsel dan tablet, dan bahkan antara ponsel yang berlainan), konten tidak diperbolehkan bergantung pada lebar performa yang tampaktertentu untuk dirender dengan baik.
Menyetel lebar CSS yang besar secara mutlak untuk bagian laman web (seperti acuan di bawah), menimbulkan div menjadi terlalu lebar untuk penampilan yang tampakpada perangkat yang lebih sempit (misalnya, perangkat dengan lebar piksel CSS 320, seperti iPhone). Sebaiknya, pikirkan untuk menggunakan nilai lebar relatif, mirip width: 100%. Demikian juga, berhati-hatilah memakai nilai pemosisian absolut besar yang mampu menyebabkan unsur berada di luar performa yang tampakpada layar kecil.
 |
| Responsif Iphone |
 |
| Responsif Nexus |
Simak juga Dasar Web Responsif dengan memakai kueri CSS di artikel selanjutnya.
Sumber https://blogbugabagi.blogspot.com/
EmoticonEmoticon