Di kurun sekarang penggunaan perangkat seluler seperti ponsel pintar untuk berselancar di internet melalui web terus meningkat secara drastis, akan tetapi sayangnya tidak semua situs web sudah dioptimalkan untuk perangkat seluler. Perangkat seluler lazimnya memilliki dimensi layar yang kecil daripada perangkat desktop, hal inilah yang menjadi hambatan sehingga memerlukan pendekatan yang berlainan 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 mampu dipakai. Dimensi layar selalu berganti, hal ini menyebabkan suatu situs web sangatlah penting untuk dapat beradaptasi dengan tiap ukuran layar.
Desain web responsif, pada awalnya didefinisikan oleh Ethan Marcotte yang menyatakan balasan atas keperluan pengguna dan perangkat yang mereka gunakan. Perubahan tata letak atau layout berdasarkan dimensi layar dan kemampuan perangkat. Contohnya, pada perangkat seluler, pengguna menyaksikan konten yang ditampilkan dalam satu kolom, sedangkan pada perangkat tablet bisa saja konten ditampilkan dengan dua kolom dengan konten yang sama.
Mengatur Tampilan yang Ditampilkan
Suatu laman web yang dioptimalkan untuk banyak sekali perangkat diharuskan menambahkan tag meta viewport di bab kepala atau head dokumen web. Tag meta viewport ini bisa menunjukkan isyarat terhadap web browser tentang bagaimana cara mengendalikan ukuran laman dan skala laman web tersebut.
- Terapkan tag meta viewport dalam mengatur lebar dan penskalaan performa 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 menawarkan render halaman pada lebar layar desktop, dan lalu menjajal menciptakan konten tampaklebih baik dengan menambahukuran font dan mengubah ukuran konten agar sesuai dengan layar. Ini memiliki arti bahwa ukuran font mungkin tampil tidak konsisten bagi pengguna, yang mungkin mesti ketuk dua kali atau cubit untuk melaksanakan zoom agar bisa 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 semoga dapat sesuai dengan dimensi ukuran layar yang berlawanan-beda, apakah dirender pada telepon seluler kecil atau monitor desktop yang besar.
 |
| Tanpa Viewport |
 |
| Dengan Viewport |
Beberapa web browser mampu menjaga lebar laman web secara konstan ketika 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 hubungan 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 penuh.
Memastikan Tampilan yang Terlihat Dapat Diakses
Disamping menerapkan initial-scale, kau juga dapat menyetel atribut berikut pada tampilan yang terlihat di layar perangkat.
- minimum-scale
- maximum-scale
- user-scalable
Apabila disetel, hal ini mampu menonaktfkan kemampuan pengguna dalam melakukan 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 lazimnya 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 dapat menyebabkan pengalaman pengguna yang jelek atau jelek.
- Dilarang atau sebisa mungkin untuk disingkirkan memakai elemen berlebar tetap yang besar.
- Konten tidak diperbolehkan bergantung pada lebar tampilan yang terlihat tertentu untuk merender dengan baik.
- Gunakan kueri media CSS untuk menerapkan penataan gaya yang berbeda untuk layar kecil dan besar.
Saat menyebarkan atau membangun suatu situs seluler dengan tag meta viewport, seringkali kita secara tidak sengaja menciptakan konten pada laman web yang tidak muat dalam performa yang terlihat yang telah ditetapkan. Misalkan, gambar yang hendak ditampilkan mempunyai lebar yang lebih lebar dari penampilan yang terlihat bisa mengakibatkan penampilan yang terlihat untuk menggulir secara horizontal. Oleh sebab itu kamu mesti menyesuaikan konten ini semoga muat ke dalam lebar tampilan yang terlihat, sehingga pengguna tidak perlu menggulir secara horizontal.
Disebabkan ukuran dan lebar layar dalam piksel CSS bermacam-macam antar perangkat (contohnya, 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 elemen laman web (seperti contoh di bawah), mengakibatkan div menjadi terlalu lebar untuk penampilan yang tampakpada perangkat yang lebih sempit (contohnya, perangkat dengan lebar piksel CSS 320, seperti iPhone). Sebaiknya, pertimbangkan untuk memakai nilai lebar relatif, mirip width: 100%. Demikian juga, berhati-hatilah memakai nilai pemosisian absolut besar yang mampu menyebabkan elemen berada di luar penampilan yang terlihat pada layar kecil.
 |
| Responsif Iphone |
 |
| Responsif Nexus |
Simak juga Dasar Web Responsif dengan memakai kueri CSS di postingan selanjutnya.
Sumber https://blogbugabagi.blogspot.com/
EmoticonEmoticon