Pernahkah Anda bertanya pada diri sendiri, "Apa itu desain web responsif?" Desain web responsif adalah pendekatan di mana perancang membuat halaman web yang "merespons" atau mengubah ukurannya sendiri tergantung pada jenis perangkat yang dilihatnya. Itu bisa berupa monitor komputer desktop berukuran besar, laptop atau perangkat dengan layar kecil seperti smartphone dan tablet.
Desain web yang responsif telah menjadi alat yang penting bagi siapa pun dengan kehadiran digital. Dengan pertumbuhan smartphone, tablet, dan perangkat komputasi seluler lainnya, semakin banyak orang menggunakan layar yang lebih kecil untuk melihat halaman web.
$config[code] not foundSitus-situs web ini juga harus mempertimbangkan indeks mobile-first yang baru saja diumumkan oleh Google pada bulan April 2018. Karena semakin banyak usaha kecil meningkatkan kehadiran ponsel mereka, situs web mereka, eCommerce, halaman Bisnis Google, halaman media sosial dan aset lainnya harus mudah diakses di semua perangkat.
Apa itu Desain Web Responsif?
Tujuan dari desain responsif adalah untuk memiliki satu situs, tetapi dengan elemen berbeda yang merespons berbeda ketika dilihat pada perangkat dengan ukuran yang berbeda.
Mari kita ambil situs web tradisional "tetap". Ketika dilihat di komputer desktop, misalnya, situs web mungkin menampilkan tiga kolom. Tetapi ketika Anda melihat tata letak yang sama pada tablet yang lebih kecil, itu mungkin memaksa Anda untuk menggulir secara horizontal, sesuatu yang tidak disukai pengguna. Atau elemen mungkin disembunyikan dari tampilan atau terlihat terdistorsi. Dampaknya juga diperumit oleh fakta bahwa banyak tablet dapat dilihat baik dalam orientasi potret atau diputar ke samping untuk tampilan lanskap.
Di layar ponsel cerdas mungil, situs web bisa lebih sulit dilihat. Gambar besar dapat "merusak" tata letak. Situs bisa lambat dimuat di smartphone jika grafisnya berat.
Namun, jika situs menggunakan desain responsif, versi tablet mungkin secara otomatis menyesuaikan untuk menampilkan hanya dua kolom. Dengan begitu, konten dapat dibaca dan mudah dinavigasi. Pada smartphone, konten mungkin muncul sebagai satu kolom, mungkin ditumpuk secara vertikal. Atau mungkin pengguna akan memiliki kemampuan untuk menggesek untuk melihat kolom lain. Gambar akan mengubah ukuran alih-alih mendistorsi tata letak atau terputus.
Intinya adalah: dengan desain responsif, situs web secara otomatis menyesuaikan berdasarkan perangkat yang dilihat pemirsa.
Bagaimana Cara Kerja Desain Web Responsif?
Situs responsif menggunakan grid fluida.Semua elemen halaman berukuran berdasarkan proporsi, bukan piksel. Jadi, jika Anda memiliki tiga kolom, Anda tidak akan mengatakan dengan tepat seberapa lebar masing-masing kolom, tetapi seberapa lebar seharusnya dalam kaitannya dengan kolom lainnya. Kolom 1 harus mengambil setengah halaman, kolom 2 harus mengambil 30%, dan kolom 3 harus mengambil 20%, misalnya.
Media seperti gambar juga ukurannya relatif. Dengan begitu gambar dapat tetap berada dalam kolom atau elemen desain relatifnya.
Masalah terkait
Mouse v. Sentuh: Merancang untuk perangkat seluler juga memunculkan masalah mouse versus sentuhan. Pada komputer desktop, pengguna biasanya memiliki mouse untuk bernavigasi dan memilih item. Pada smartphone atau tablet, sebagian besar pengguna menggunakan jari dan menyentuh layar. Apa yang tampaknya mudah untuk dipilih dengan mouse, mungkin sulit untuk dipilih dengan jari pada titik kecil di layar. Desainer Web harus mempertimbangkan "sentuhan".
Grafik dan kecepatan unduh: Juga, ada masalah grafis, iklan, dan kecepatan unduh. Pada perangkat seluler, mungkin bijaksana untuk menampilkan lebih sedikit gambar daripada tampilan desktop sehingga situs tidak perlu selamanya dimuat di smartphone. Ukuran iklan yang lebih besar mungkin perlu ditukar dengan iklan yang lebih kecil.
Aplikasi dan "versi seluler": Di masa lalu, Anda mungkin berpikir untuk membuat aplikasi untuk situs web Anda - katakan aplikasi iPad atau aplikasi Android. Atau Anda akan memiliki versi seluler khusus untuk BlackBerry.
Tetapi dengan begitu banyak perangkat yang berbeda saat ini, semakin sulit untuk membuat aplikasi dan versi berbeda untuk setiap perangkat dan platform operasi.
Mengapa Bisnis Kecil Perlu Beralih ke Desain Web Responsif
Semakin banyak orang menggunakan perangkat seluler. Sebuah studi Pew baru-baru ini 77% orang Amerika sekarang memiliki ponsel pintar pada tahun 2018 yang naik dari hanya 35% dalam survei kepemilikan ponsel cerdas pertama Pew Research Center yang dilakukan pada tahun 2011.
Periksa lalu lintas Anda dan Anda mungkin akan terkejut dengan banyaknya pengunjung yang mengunjungi situs web Anda melalui perangkat seluler. (Di Google Analytics Anda, pilih "Pemirsa" di sisi kiri, lalu "Seluler" untuk melihat proporsi lalu lintas apa dari perangkat seluler. Anda bahkan dapat menelusuri untuk melihat perangkat mana yang mengirimkan lalu lintas.)
Template desain responsif ada di mana-mana sekarang, untuk pembelian. Jika, misalnya, Anda memiliki situs WordPress, Anda dapat mengunjungi galeri templat terkemuka seperti ThemeForest dan mencari "tema WordPress responsif." Beli satu di bawah $ 50. Pengembang Web Anda kemudian dapat menyesuaikannya untuk logo dan merek Anda.
Catatan Editor: Di sini, di Small Business Trends, kami sedang mengerjakan desain responsif baru. Bukan?
Foto melalui Shutterstock
Selanjutnya dalam: Pemasaran Konten, Apa Itu 95 Komentar ▼
