Apa itu Desain Web Responsif

• Mungkin 18, 2024

Ada tiga fitur utama dari desain web yang responsif, yaitu tata letak yang lancar, gambar yang dapat disesuaikan ukurannya, dan kueri media. Kueri media tidak terlalu baru dalam desain web. Dimulai sebagai jenis media di CSS2.1, kita bisa mendesain lembar gaya untuk web dan cetak, agak memastikan bahwa halaman web akan terlihat sama di layar dan saat dicetak. Ini berkembang menjadi pertanyaan media di CSS3. Query ini memeriksa lebar perangkat media (max-device-width) dan mengujinya terhadap nilai yang ditetapkan seperti 480px atau 768px. Menanggapi permintaan ini, kami menggunakan gaya CSS untuk mengubah tata letak cairan dan mengubah ukuran gambar untuk layar.

Anda dapat dengan mudah menguji apakah situs web memiliki desain responsif. Mulailah dengan browser dengan lebar penuh layar komputer Anda. Kemudian seret tepi kanan browser ke kiri untuk mengurangi lebar jendela browser. Anda harus melihat gambar menjadi lebih kecil dan tata letak akan mengambil div mengambang yang berdampingan dan menumpuknya secara vertikal. Misalnya, jika kita memiliki enam gambar (enam div) per baris pada halaman galeri di layar penuh, saat kita mengurangi lebar layar, jumlah gambar dalam satu baris secara progresif dikurangi dan ditumpuk, sesuai kebutuhan. Setelah lebar dikurangi menjadi jumlah tertentu, gambar itu sendiri akan mulai ukurannya lebih kecil. Jika Anda mengamati dengan cermat, Anda juga akan melihat bahwa elemen desain tertentu, seperti tautan navigasi, dapat dikurangi menjadi ikon atau bahkan menghilang. Ini juga dikendalikan oleh stylesheet CSS.

Saat mendesain situs web, pertimbangkan tidak hanya bagaimana elemen desain halaman web akan melihat lebar layar penuh tetapi bagaimana mereka akan terlihat ketika ditumpuk. Pertimbangkan elemen desain apa yang dapat dihapus dari layar dengan lebar layar yang lebih kecil tanpa mengurangi fungsionalitas situs web. Karena fitur dan teknologi untuk desain responsif berubah dengan cepat, mengikuti semua peningkatan bisa memakan waktu. Jika Anda lebih suka menghabiskan waktu Anda mendesain daripada coding, lihat beberapa tema responsif indah yang tersedia untuk Wordpress. Jika Anda adalah perusahaan desain kecil, Anda mungkin ingin mempertimbangkan mulai dari salah satu tata letak tema responsif ini saat merancang situs web.

Petunjuk Video: Membuat Desain Web Responsive dengan HTML dan CSS | Tutorial HTML (part 11) (Mungkin 2024).