Dengan pertumbuhan web seluler pada tingkat yang stabil dan Google mengonfirmasikan peringkat halaman berdasarkan daya tanggapnya, sangat penting bahwa situs web Anda dapat beradaptasi dengan berbagai perangkat dan ukuran layar yang berbeda.

Tetapi desain web responsif lebih dari sekadar meregangkan atau memeras tata letak Anda untuk beradaptasi. Ini tentang memberikan satu situs web dalam beberapa cara berbeda sambil mempertahankan konten dan fungsionalitas.

Dengan mengingat hal itu, berikut adalah tujuh tip praktik terbaik untuk desain web responsif.

1. Berpikir responsif

Ketika desain web responsif dimulai, desainer memulai dengan merencanakan layar terbesar kemudian memperkecil hingga mencapai yang terkecil. Terlalu sering, mereka memasukkan elemen-elemen mewah yang tidak rusak dengan baik agar sesuai dengan layar yang lebih kecil, yang menyebabkan versi seluler menjadi salinan yang dipermudah dari aslinya dan terasa seperti renungan. Saat ini, perangkat seluler merupakan volume lalu lintas terbesar untuk banyak situs web, sehingga pengguna seluler mengharapkan, dan pantas, kualitas pengalaman menjelajah yang sama dengan pengguna lain. Tapi itu tidak berarti ukuran layar yang lebih besar juga harus diabaikan. Banyak orang masih menggunakan desktop besar, dan bahkan lebih banyak melompat di antara layar yang berbeda sepanjang hari.

Cara terbaik untuk mengatasi ini adalah dengan mengadopsi pendekatan 'mobile first', mendesain layar terkecil terlebih dahulu kemudian menambahkan elemen seperlunya saat Anda menaikkan ukuran layar.

Fokus pada perancangan untuk breakpoint populer, tetapi pertimbangkan juga kesenjangan di antaranya – perangkat baru datang ke pasar setiap hari dan ukuran layar yang jarang digunakan hari ini bisa menjadi hal besar baru bulan depan. Dan ingat untuk mempertimbangkan orang-orang yang menggunakan tablet mereka dalam mode potret – ini dapat luput dari radar dan akhirnya terlihat seperti desktop yang terjepit atau tata letak seluler dasar dengan banyak ruang yang terbuang.

2. Perhatikan isinya

Jangan jatuh ke dalam perangkap pendekatan 'sesuai ukuran', di mana fokus Anda adalah menyesuaikan semua elemen ke halaman tanpa mempertimbangkan konteksnya. Mulailah dengan berkonsentrasi pada konten dan fitur yang paling penting, dan bersikap brutal tentang elemen mana yang menghadapi masalah. Saat Anda menaikkan ukuran layar yang berbeda, pertanyakan penyertaannya di setiap tahap – jika Anda harus memikirkannya terlalu lama, mungkin tidak perlu ada di sana. Setelah Anda memahami konten dan fitur yang Anda butuhkan, Anda dapat mulai mengerjakan tata letak. Beragamnya ukuran layar berarti konsep tradisional 'di atas flip' sudah hampir mati. Orang-orang terbiasa menggulir – munculnya situs-situs seperti Facebook dan Twitter telah melihat hal itu – jadi rancang situs Anda dengan cara yang mendorong pengguliran, tetapi tetap menyimpan informasi terpenting di bagian atas layar. Ini termasuk detail kontak, CTA, dan di situs eCommerce, tombol 'Tambahkan ke Keranjang' yang sangat penting.

Prioritaskan elemen berdasarkan kepentingannya bagi pengguna, jadi jika Anda dapat memasukkan teks di samping gambar di desktop, pikirkan baik-baik tentang mana yang terbaik untuk menarik perhatian pengguna di perangkat seluler, dan pastikan itu yang didahulukan. Elemen lain, seperti gambar blog yang menyertai pada halaman pratinjau, dapat diabaikan sama sekali dari versi seluler, meninggalkan fokus pada konten itu sendiri.

3. Bereksperimenlah dengan navigasi yang dapat diskalakan

Navigasi adalah salah satu aspek yang paling menantang dari desain web responsif, tetapi juga salah satu yang paling penting. Bertentangan dengan sebagian besar aturan desain web, ini adalah satu tempat Anda tidak perlu konsisten – menu besar dan kompleks yang digunakan pada layar besar tidak akan berfungsi di ponsel, jadi sangat dapat diterima untuk membuat jenis navigasi yang berbeda untuk layar yang berbeda ukuran. Navigasi tersembunyi populer di banyak situs seluler, dengan ikon sederhana seperti burger yang menunjukkan keberadaan menu. Anda dapat menggeser menu ke bawah di atas konten di bawah, atau meletakkannya di atas seluruh layar. Pilihan lain adalah untuk menggesek untuk menggesek horizontal, di mana konten jelas menghilang dari sisi layar dan pengguna dapat menggesek untuk melibatkan itu.

Apa pun yang Anda pilih, jangan meniadakan konsistensi sama sekali – menu Anda harus memiliki nuansa yang mirip dengan versi lain dalam hal karakteristik visual, meskipun memiliki fungsi yang berbeda.

4. Semua tentang gambar

Kualitas gambar di situs web sangat penting, karena mereka membentuk sebagian besar kesan pertama pengunjung situs. Tetapi gambar besar memiliki efek negatif pada kecepatan unduh perangkat seluler dengan kemampuan bandwidth yang lebih rendah. Sama seperti konten, Anda harus mempertanyakan penyertaan setiap gambar untuk setiap ukuran layar dan hanya menyertakan yang benar-benar diperlukan, sambil mempertimbangkan kembali elemen seperti penggeser yang berisi banyak gambar besar.

Optimalkan gambar Anda yang tersisa, buat mereka fleksibel dengan ukuran adaptif, dan simpan menggunakan format yang sesuai. Ingat, Anda mungkin tidak memerlukan fungsionalitas 'perbesar gambar' di ponsel, karena gambar mungkin akan tetap dalam layar penuh. Jika Anda perlu menyertakan galeri gambar, pilih navigasi gulir panjang, atau gunakan gesekan horizontal untuk berpindah di antara galeri tersebut.

5. Pikirkan tipografi

Tipografi yang Anda pilih memerlukan pertimbangan yang cermat karena banyak tipografi yang berfungsi pada layar sedang atau besar menjadi terlalu sulit untuk dibaca dengan benar saat diperkecil untuk ukuran layar yang lebih kecil, jadi selalu uji secara menyeluruh di berbagai layar. Seimbangkan heading Anda dengan hati-hati – fungsinya harus jelas, meskipun jika terlalu besar mereka bisa tampak terlalu dominan – dan pastikan ada kontras yang memadai antara warna latar belakang dan font.

Saat Anda menaikkan ukuran layar yang berbeda, perhatikan panjang baris konten Anda – jika satu baris terlalu panjang akan sulit dibaca. Pertahankan panjang garis sekitar 60–75 karakter dan pada layar yang lebih lebar isi ruang dengan bilah sisi atau gambar.

6. Optimalkan untuk layar sentuh

Desain web yang responsif tidak hanya perlu memperhitungkan ukuran layar yang berbeda; itu juga harus dioptimalkan untuk metode input yang berbeda. Dan layar sentuh bisa jadi rumit, jadi yang terbaik adalah bermurah hati dengan ukuran tombol dan tautan Anda, bertujuan untuk area yang dapat diklik seluas sekitar 44 poin persegi. Anda juga perlu mengoptimalkan pengalaman pengguna untuk layar sentuh. Ya, mereka intuitif pada dasarnya, tetapi bantuan navigasi yang halus, seperti gerakan menggesek, adalah tambahan yang berharga.

7. Uji pada perangkat yang sebenarnya

Akhirnya, sementara merencanakan desain Anda adalah langkah penting, jangan hanya mengandalkan teori. Ada emulator seluler yang akan membantu memeriksa desain dan breakpoint CSS Anda, tetapi tidak ada yang mengalahkan pengujian pada hal yang sebenarnya – banyak dari emulator ini hanya mereplikasi berbagai ukuran layar tetapi bukan fungsionalitas sistem operasi yang berbeda. Pastikan Anda memiliki berbagai ukuran layar yang berbeda untuk dimainkan dan sejumlah pengguna yang berbeda, dan uji desain Anda secara menyeluruh. Ini akan sering memunculkan sudut pandang baru, dan mengonfirmasi bahwa Anda berada di jalur yang benar atau menunjukkan kepada Anda di mana perbaikan dapat dilakukan.

Desain web responsif terus berkembang dan berkembang, dan kami hanya menggores permukaan di sini. Praktik terbaik untuk bidang ini juga sering berubah, jadi sebaiknya ikuti perkembangan terbaru. Ingat, banyak pengguna memiliki bandwidth yang lemah, resolusi rendah, dan daya pemrosesan yang kecil di perangkat mereka, jadi situs Anda harus sederhana, terorganisir dengan baik, bersih, mudah digunakan, dan terlihat bagus di berbagai layar yang berbeda.