Prinsip Desain Web Responsif

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 dasar yang akan membantu Anda membuat situs web yang luar biasa.

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 lebar maksimum properti alih-alih memberikan lebar tetap ke elemen. Juga, menggunakan persentase (%), ketinggian area pandang (vh), atau lebar area pandang (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 rem dan em satuan untuk panjang, bukan px unit. Ini karena rem unit membuatnya sangat mudah untuk menskalakan seluruh tata letak. Secara default, 1rem sama dengan 16px karena sebanding dengan ukuran font elemen, 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 lebar maksimum Properti.

Anda dapat menghidupkan situs responsif dengan menggunakan kueri media. Kisi-kisi 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 yang baru Fitur CSS untuk membuat situs web responsif dalam waktu yang lebih singkat.

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, itu 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 mencakup bagian pahlawan dengan bilah navigasi responsif, salinan pengantar dan media, 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 (Mercu suar) 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. 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 desktop terlebih dahulu pendekatan seperti pada akhir hari, Anda harus menumpuk wadah satu sama lain di ponsel perangkat. Meskipun ini sepenuhnya merupakan keputusan pribadi, pendekatan seluler pertama membantu Anda dalam menyusun HTML dengan cara yang lebih baik sementara pendekatan desktop-first akan membantu Anda dengan tata letak dan spasi teknik.

6 Kursus Teratas untuk Mempelajari Desain UX

Jika Anda ingin mempelajari desain UX atau meningkatkan keterampilan Anda, berikut adalah enam kursus online terbaik yang dapat Anda ikuti.

Baca Selanjutnya

Tentang Penulis