Prinsip Desain Web Responsif

Desainer web telah memperjuangkan desain responsif selama bertahun-tahun sekarang, tetapi apa itu dan bagaimana cara menghasilkan halaman web yang unggul?

Saat ini, sudah menjadi praktik umum untuk membuat situs web atau aplikasi yang menyesuaikan antarmuka penggunanya tergantung pada browser atau perangkatnya. Ada dua pendekatan untuk mencapai tujuan ini. Yang pertama melibatkan pembuatan berbagai versi situs web atau aplikasi Anda untuk perangkat yang berbeda. Tapi itu tidak efisien dan dapat menyebabkan kesalahan yang tidak terduga.

Dalam mencari pendekatan yang andal dan tahan masa depan, desain responsif — atau adaptif — diciptakan. Ini berfokus pada membangun satu versi tata letak Anda yang beradaptasi dengan berbagai browser atau perangkat secara otomatis.

Dalam artikel ini, kita akan belajar tentang desain web responsif dan prinsip-prinsip dasar yang akan membantu Anda membuat situs web yang mengagumkan.

Bahan Desain Web Responsif

Desain web responsif tidak serumit kedengarannya. Ini adalah serangkaian praktik yang dapat Anda gunakan saat menulis CSS, bukan teknologi terpisah yang harus Anda pelajari dari awal. Anda mungkin sudah mengikuti beberapa prinsip ini tanpa menyadarinya. Anda dapat memahami desain web responsif dengan menjelajahi empat bahannya: tata letak yang lancar, unit responsif, gambar fleksibel, dan kueri media.

Tata Letak Cairan

Dengan tata letak yang lancar, Anda dapat membuat halaman web yang beradaptasi dengan lebar dan tinggi viewport saat ini. Praktik umum termasuk menggunakan properti max-width alih-alih memberikan lebar tetap ke elemen. Selain itu, menggunakan persentase ( % ), tinggi viewport ( vh ), atau lebar viewport ( vw ) membantu meningkatkan kemampuan beradaptasi yang tidak mungkin dilakukan dengan piksel ( px ). Jadi, lain kali Anda membuat tata letak, pastikan untuk memperkenalkan perubahan kecil ini dan mulai memanfaatkan teknik desain responsif.

Unit Responsif

Saat Anda beralih ke CSS yang lebih maju, Anda akan sering melihat penggunaan satuan rem dan em untuk panjang daripada satuan px . Ini karena unit rem membuatnya sangat mudah untuk menskalakan seluruh tata letak. Secara default, 1rem sama dengan 16px karena sebanding dengan ukuran font elemen <html> , biasanya 16px. Namun, Anda dapat mengatur 1rem sama dengan 10px (atau nilai lainnya) untuk perhitungan yang lebih mudah, dengan menyesuaikan ukuran font tingkat atas.

Gambar Fleksibel

Gambar adalah perhatian utama saat merancang bahkan tata letak yang paling dasar. Anda harus selalu berhati-hati untuk mengukurnya dengan benar agar sesuai dengan desain. Juga, secara default, mereka tidak menskalakan dengan perubahan di viewport. Jadi, Anda harus menggunakan % untuk dimensi gambar Anda, bersama dengan properti max-width .

Pertanyaan Media

Anda dapat menghidupkan situs responsif dengan menggunakan kueri media. Grid fluida bagus untuk memulai, tetapi Anda akan menemukan bahwa ada beberapa titik di mana tata letak mulai rusak. Menambahkan breakpoint untuk lebar viewport ini akan menyesuaikan tata letak untuk perangkat yang berbeda. Kueri media membantu Anda menerapkan CSS secara selektif berdasarkan hasil pengujian fitur media. Anda dapat menjelajahi fitur CSS baru untuk membuat situs web responsif dalam waktu yang lebih singkat.

Prinsip Desain Web Responsif

Prinsip Desain Web Responsif

Meskipun desain web responsif adalah penyelamat dalam hal masalah multi-layar, Anda mungkin tidak memiliki batasan fisik tetap untuk dirujuk. Oleh karena itu, ada enam prinsip dasar desain web responsif untuk memulai saat mendesain tata letak responsif.

Gunakan Breakpoint Berbasis Konten

Salah satu prinsip dasar desain menyatakan bahwa desain situs web Anda harus mendukung konten, bukan sebaliknya. Konten media seperti video, foto, dan konten teks seperti salinan web panjang dan pendek harus ditampilkan secara optimal di semua layar. Kunci untuk desain web responsif adalah menggunakan breakpoint berbasis konten daripada yang berbasis perangkat.

Pilih Font Web dan Font Sistem dengan Bijak

Font web terlihat menakjubkan! Anda memiliki banyak opsi untuk memodifikasi desain Anda dengan font web yang tampak keren. Tetapi Anda harus tahu bahwa browser perlu mengunduh setiap font web. Lebih banyak font web, lebih banyak waktu pengunduhan. Sebaliknya, font sistem sangat cepat. Jika pengguna tidak memiliki font sistem bernama di perangkat lokal mereka, font tersebut akan kembali ke font berikutnya di tumpukan font-family . Oleh karena itu, pastikan untuk mempertimbangkan waktu buka dan permintaan desain saat memilih font.

Optimalkan Gambar dan Vektor Bitmap

Apakah Anda memiliki ikon berbeda di situs web Anda, yang mendukung konten? Seringkali merupakan praktik yang baik untuk menggunakan format bitmap jika ikon Anda memiliki banyak detail. Di sisi lain, format vektor adalah cara untuk memilih ikon yang skalanya naik dan turun dengan baik. Vektor seringkali berukuran kecil, tetapi kelemahannya adalah beberapa browser lama mungkin tidak mendukungnya. Juga, ada kasus ketika vektor lebih berat daripada bitmap, seperti ketika gambar sangat detail. Oleh karena itu, selalu pastikan bahwa Anda mengoptimalkan gambar dan vektor bitmap Anda sebelum mereka online.

Lakukan Tes untuk Lipatan Pertama yang Responsif

Lipatan pertama situs web adalah tampilan yang dilihat pengunjung saat pertama kali dimuat, sebelum pengguliran apa pun. Ini sering menyertakan bagian pahlawan dengan bilah navigasi responsif , salinan dan media pengantar, dan CTA. Daya tanggap tidak hanya terbatas pada perangkat seluler. Anda harus mempertimbangkan tablet, konsol game, dan layar lainnya juga. Jadi, kuncinya adalah sering melakukan tes setidaknya untuk tampilan lipatan pertama situs web. Anda dapat menggunakan Chrome DevTools ( Lighthouse ) untuk menguji kualitas halaman web.

Jangan Sembunyikan Konten di Layar yang Lebih Kecil

Banyak orang dulu berasumsi bahwa pengguna seluler selalu terburu-buru, mencari informasi berukuran kecil, sementara pengguna desktop lebih menyukai konten bentuk panjang. Kami sekarang menyadari bahwa ini tidak benar di dunia sekarang ini. Orang-orang menggunakan perangkat seluler di mana saja, mencari konten lengkap dan akses penuh ke semua layanan. Anda harus memastikan bahwa, alih-alih menyembunyikan konten, Anda mengelola tata letak dan titik henti sementara untuk menyajikannya semudah dan semudah mungkin.

Kelola Tata Letak Menggunakan Objek Bersarang

Membangun tata letak situs dan elemen pemosisian dengan benar membutuhkan upaya yang layak. Anda mungkin juga pernah mengalami kesulitan dalam mengelola banyak elemen yang saling bergantung satu sama lain. Oleh karena itu, Anda harus mempertimbangkan untuk membungkus elemen terkait dalam wadah atau <section> . Ini membantu mengurangi tugas meletakkan beberapa elemen menjadi satu di mana Anda hanya meletakkan satu elemen.

Desain Responsif: Haruskah Anda Menggunakan Desktop Terlebih Dahulu atau Seluler?

Pendekatan pertama desktop berarti Anda akan menulis CSS untuk layar besar dan kemudian menerapkan kueri media untuk mengecilkan desain untuk layar yang lebih kecil. Sebaliknya, pendekatan pertama seluler melibatkan penulisan CSS untuk perangkat seluler, dengan layar yang lebih kecil, dan kemudian menerapkan kueri media untuk memperluas desain untuk layar yang lebih besar. Fokus utamanya adalah mengurangi situs web dan aplikasi menjadi hal yang mutlak.

Jika Anda baru memulai dengan pengembangan web responsif maka Anda harus menggunakan pendekatan desktop-first karena pada akhirnya, Anda harus menumpuk wadah satu sama lain di perangkat seluler. Meskipun ini sepenuhnya merupakan keputusan pribadi, pendekatan mobile first membantu Anda dalam menyusun HTML dengan cara yang lebih baik sementara pendekatan desktop-first akan membantu Anda dengan teknik tata letak dan spasi.

Content Writer , Pencarian.id

Saya adalah seorang Content Writer yang menulis banyak artikel Bahasa Indonesia Dan Berbahasa Inggris

Saya adalah pekerja lepas di Up Work International

Tinggalkan komentar