Desain Responsif: Praktik Terbaik dan Pertimbangan

Situs web responsif adalah situs web yang beradaptasi dengan semua ukuran dan resolusi layar, tidak hanya di desktop tetapi juga di ponsel, tablet, dan terkadang bahkan TV.

Menurut Statista, lalu lintas seluler bertanggung jawab atas 52,64% dari semua lalu lintas global pada tahun 2017, yang berarti bahwa situs web yang tidak dioptimalkan dengan baik untuk perangkat seluler kehilangan sekitar setengah dari lalu lintasnya . Pada akhir 2018, diharapkan pangsa lalu lintas global untuk perangkat seluler akan tumbuh hingga 79%, yang merupakan peningkatan yang luar biasa.

Bisnis tanpa situs web seluler tertinggal pada tingkat yang mengkhawatirkan, karena 8 dari 10 pengunjung akan berhenti berinteraksi dengan situs web yang tidak ditampilkan dengan baik di perangkat mereka. Terlalu mudah bagi pengguna untuk menekan tombol kembali dan mencoba bisnis saingan, dan Google bahkan memberi peringkat situs web yang tidak responsif lebih rendah dalam pencarian mereka .

Anda dapat mengikuti tes ramah seluler Google di sini.

Apakah semua ini berarti bahwa seluler lebih penting daripada desktop? Tidak. 83% pengguna seluler mengatakan bahwa mereka harus dapat melanjutkan pengalaman di desktop jika mereka mau.

Lihat versi eBay yang dioptimalkan untuk seluler vs. seperti apa tampilannya jika tidak dioptimalkan untuk seluler. Apakah Anda akan mempertimbangkan versi yang tidak dioptimalkan?

Untuk mendesain website yang dapat bersaing di internet saat ini, desainer web harus ahli di responsive web design (RWD). Di mana mereka harus mulai?

Pendekatan Mobile-first untuk Desain Web Responsif

Desain web yang mengutamakan seluler berarti mendesain situs web seluler terlebih dahulu dan bekerja hingga versi desktop. Ada beberapa alasan mengapa pendekatan ini berhasil dengan baik.

1. Situs web seluler memiliki lebih banyak masalah kegunaan (ini sebagian besar karena kurangnya real estat layar), sehingga praktis dan lebih efisien untuk fokus utama pada desain seluler.
2. Lebih mudah untuk meningkatkan versi seluler daripada menurunkan versi desktop (sekali lagi, karena kurangnya ruang di situs web seluler).
3. Desain web yang mengutamakan seluler membantu mengevaluasi kembali apa yang diperlukan secara visual dan fungsional.

Merancang situs web sebagai situs responsif seluler pertama memaksa desainer untuk mengajukan sejumlah pertanyaan penting karena ada lebih sedikit real estat layar untuk dikerjakan. Berikut adalah pertanyaan yang perlu ditanyakan:

• Apakah fitur/fungsi ini benar-benar diperlukan?
• Bagaimana kita bisa mendesain sesuatu yang minimalis untuk seluler terlebih dahulu yang nantinya akan ditingkatkan dengan baik untuk desktop?
• Apakah efek visual ini sepadan dengan waktu yang dibutuhkan untuk memuat di ponsel?
• Apa tujuan utama, dan elemen visual apa yang membantu pengguna mencapainya?

Kami akan melihat beberapa contoh desain web responsif sebentar lagi. Untuk saat ini, mari kita bicara tentang perangkat, ukuran layar, dan browser web mana yang relevan saat ini.

Resolusi Layar Apa yang Relevan untuk Desain Web Responsif?

Berikut adalah resolusi layar paling umum di seluruh pengguna seluler, tablet, dan desktop di seluruh dunia. Seperti yang Anda lihat, ada berbagai macam resolusi, jadi baik seluler, tablet, maupun desktop tidak mendominasi pangsa pasar saat ini—ini memberi tahu kami bahwa desainer harus mempertimbangkan semuanya saat memikirkan desain web yang responsif.

• 360x640 (seluler kecil): 22,64%
• 1366x768 (laptop rata-rata): 11,98%
• 1920x1080 (desktop besar): 7,35%
• 375x667 (seluler rata-rata): 5%
• 1440x900 (desktop rata-rata): 3,17%
• 720x1280 (seluler besar): 2,74%

Sama seperti perincian perangkat, kami harus mengelompokkan data berdasarkan lokasi agar sesuai dengan demografi pengguna (atau demografi pengguna yang diantisipasi) dari audiens target kami. Ini juga layak untuk memenuhi resolusi yang semakin populer, karena sementara beberapa ukuran layar saat ini tidak begitu umum, mungkin di masa depan. Ini akan membantu desainer responsif membuat UX masa depan yang akan berfungsi bahkan ketika pangsa pasar berubah.

Misalnya, resolusi 360x640 (yang sebagian besar sesuai dengan perangkat Samsung yang menggunakan Android) telah meningkat sebesar 5,43% pada tahun lalu. Desainer dapat menggunakan wawasan berharga seperti ini untuk memutuskan breakpoint responsif utama sebelum memulai desain situs web.

Peramban Web Apa yang Populer Saat Ini?

Desain web responsif adalah tentang menawarkan pengalaman tanpa batas di perangkat apa pun, dan karena browser web yang berbeda merender halaman web dengan cara yang berbeda, situs web harus diuji untuk memastikan bahwa mereka kompatibel dengan berbagai browser web seluler dan desktop.

Meskipun membuat skala situs web ke titik henti sementara responsif yang benar terutama merupakan tanggung jawab pengembang web, perancang weblah yang memutuskan dengan tepat bagaimana situs web responsif akan beradaptasi dengan berbagai ukuran layar untuk menciptakan pengalaman pengguna yang optimal.

Berikut rincian pangsa pasar browser web di seluruh dunia untuk seluler dan desktop.

• Chrome: 55,04%
• Safari: 14,86%
• UC Browser: 8,69%
• Firefox: 5,72%
• Opera: 4,03%
• Internet Explorer: 3,35%

Desain responsif bukan hanya tentang "membuat semuanya pas"—ini juga tentang beradaptasi dengan kemampuan perangkat keras perangkat dan browser web serta resolusi perangkat. Salah satu contohnya adalah, meskipun Google Chrome mendukung properti CSS overscroll-behavior: (yang menentukan apa yang terjadi ketika pengguna menggulir terlalu keras ke tepi viewport), itu tidak didukung di browser web lain.

Praktik Terbaik Desain Responsif

Menghilangkan Gesekan

Seperti disebutkan sebelumnya, pendekatan mobile-first untuk desain web responsif akan membantu desainer mengevaluasi apa yang benar-benar diperlukan agar pengguna mencapai tujuan utama mereka.

Saat kami membangun ke versi tablet (dan kemudian versi desktop), kami kemudian dapat mulai memikirkan tujuan sekunder dan interaksi mikro, alur pengguna, dan CTA (ajakan bertindak) yang membuat tujuan pengguna tersebut dapat dicapai. Yang lebih penting adalah kita fokus pada tujuan utama pengguna terlebih dahulu dan menghilangkan gesekan yang tidak perlu yang tidak membantu tujuan utama maupun sekunder.

Tujuan utama dapat berupa pembelian produk, sedangkan tujuan sekunder dapat berupa mendaftar ke buletin (yang dapat mengarah pada pembelian nanti).

Berikut adalah contoh hebat untuk menghilangkan gesekan: Karena antarmuka pengguna seluler biasanya lebih sulit dinavigasi, akan lebih baik untuk beralih ke checkout satu halaman untuk toko eCommerce seluler dan hanya mengaktifkan checkout multi-langkah untuk toko eCommerce desktop.

Desain untuk Jempol

Desain web responsif rumit dalam arti bahwa pengguna akan berinteraksi dengan situs web desktop melalui klik tetapi versi seluler melalui ketukan dan gesekan. Ada juga perbedaan fisik. Pengguna desktop biasanya meletakkan komputer mereka di permukaan, sedangkan pengguna seluler memegang perangkat mereka di tangan mereka. Perbedaan ini secara signifikan mengubah cara desainer UI seluler mendesain target tap dan elemen UI penting lainnya yang berinteraksi dengan pengguna.

Mari kita lihat beberapa contoh:

• Orang biasanya mengharapkan navigasi desktop utama berada di atas; namun, di seluler, itu harus di bagian bawah. Jempol tidak mencapai puncak dengan nyaman.
• Elemen interaktif lainnya juga harus mudah dijangkau. Ini berarti menyimpannya di tengah layar karena lebih sulit bagi ibu jari untuk menjangkau sisi dan sudut layar perangkat.
• Agar dapat di-tap dengan mudah, tautan penting dan CTA harus memiliki ketinggian minimal 44px (target tap yang lebih kecil tidak baik untuk kegunaan).

Bacaan yang direkomendasikan: Panduan Dasar untuk Kegunaan Seluler.

Manfaatkan Perangkat Keras Asli Perangkat Seluler

Perangkat keras seluler (seperti kamera perangkat, atau layanan GPS) tidak secara khusus disediakan untuk aplikasi asli, dan seperti yang disebutkan sebelumnya, desain web responsif bukan hanya tentang "membuat semuanya pas". Ini juga tentang beradaptasi dengan kemampuan perangkat. Dalam kasus desain web seluler, karena perangkat seluler memiliki kamera yang mudah digunakan, beberapa interaksi mikro—seperti input data—sebenarnya lebih mudah di layar yang lebih kecil selama situs web memanfaatkan perangkat keras asli yang tersedia.

Mari kita lihat beberapa contoh:

• Pemindaian kartu kredit/isi ulang (karena formulir sering kali rumit di ponsel)
• Berbagi foto di media sosial, karena media sudah ada di perangkat Anda
• Otentikasi dua faktor (karena Anda sudah menggunakan perangkat seluler Anda)
• Memeriksa stok/analitik dengan cepat (karena aplikasi seluler menyederhanakan informasi)
• Melakukan pencarian web dengan suara (karena handsfree lebih mudah daripada mengetik)

Jadikan Tata Letak Fluid/Adaptif secara Default

Tidak setiap pengguna akan memaksimalkan browser desktop mereka. Ini berarti bahwa sementara desainer perlu mempertimbangkan breakpoint responsif dari perangkat yang digunakan pengguna saat ini, mereka juga perlu memperhitungkan apa yang terjadi di antara breakpoint tersebut.

Titik henti sementara yang responsif harus digunakan untuk "mengalir ulang" tata letak dan konten ke perangkat baru, tetapi untuk memperhitungkan semua ukuran di antaranya (untuk berjaga-jaga), tata letak harus cair (yaitu, secara alami beradaptasi/meregangkan sebagai mengubah ukuran browser).

Ingatlah tip-tip ini saat mendesain tata letak yang cair/adaptif:

• Unit persentase akan memungkinkan elemen menjadi cair.
• Menyetel lebar minimum dan maksimum dapat mengaktifkan skenario "tetapi jangan lebih kecil/lebih besar dari ini".
• Format gambar SVG dapat ditingkatkan dan diturunkan tanpa kehilangan kualitas, dan tidak bergantung pada resolusi (berlawanan dengan JPG dan PNG, yang tidak).

Jangan Lupa Tentang Orientasi Lanskap

Kami berbicara tentang breakpoint responsif spesifik sebelumnya, tetapi kami juga perlu mempertimbangkan bahwa area pandang seluler tersebut dapat ditampilkan dalam orientasi lanskap juga. Meskipun menerapkan tata letak yang lancar secara teknis akan membuat konten menjadi adaptif, kehilangan sebagian besar area pandang potret dapat menjadi penghalang bagi kegunaan dan aksesibilitas.

Navigasi biasanya aman (terkadang lebih baik, sebenarnya, karena pengguna biasanya menavigasi orientasi lanskap dengan dua ibu jari), tetapi pengguliran menjadi jauh lebih sulit, yang kurang optimal karena pengguna diharuskan untuk menggulir lebih banyak pada lanskap.

Desainer mungkin ingin mempertimbangkan untuk mendesain breakpoint lanskap juga; misalnya, elemen ubin yang ditumpuk secara vertikal di ponsel dapat ditampilkan sebagai penggeser dengan tombol navigasi kiri dan kanan, artinya pengguna tidak perlu menggulir.

Ingat, Tipografi Juga Bisa Responsif

Meskipun desainer UX biasanya menggunakan unit piksel untuk mendesain situs web, di web sebenarnya, satu titik tidak selalu sama dengan piksel, karena perangkat yang berbeda memiliki resolusi yang berbeda. IPhone X, misalnya, memiliki 458 PPI (Pixels Per Inch), jadi ketika ukuran piksel semakin kecil, kami dapat mencapai grafik yang lebih tajam di ruang fisik yang sama (Apple menyebutnya sebagai teknologi "Retina", dan Android menyebutnya “hDPI”).

Ini berarti bahwa ukuran font 16px, misalnya, akan terlihat lebih besar atau lebih kecil pada beberapa perangkat tergantung pada resolusinya. Pengembang web biasanya akan menggunakan unit em untuk menentukan ukuran font, yang merupakan jenis unit responsif di mana 1em sama dengan 1 poin.

Alat bantu desain seperti Zeplin, Sympli, Marvel, dan InVision dapat membantu desainer berkolaborasi dengan pengembang dalam hal-hal yang menjadi tanggung jawab bersama. Sementara desainer mengeksekusi desain, dan pengembang mengeksekusi kode, secara keseluruhan alur kerja desain produk adalah upaya tim yang membutuhkan komunikasi yang solid.

Kiat Pengoptimalan Kinerja Desain Responsif dan Praktik Terbaik

Desain web yang responsif bukan hanya tentang tampilannya tetapi juga tentang cara kerjanya dan rasanya. Menyesuaikan situs web sehingga memuat lebih cepat pada perangkat yang dimaksud juga sama pentingnya.

Lazy Load Gambar dan Video Non-vital

Gambar dan video adalah bagian besar dari total ukuran unduhan situs web, tetapi Anda tidak perlu memuat semuanya sekaligus. Ada dua skenario di mana rendering media dapat ditunda: Konten paruh bawah dapat dimuat saat pengguna menggulir paruh bawah, dan media yang memblokir render harus dibuat untuk diunduh hanya setelah tata letak dan konten diunduh. Praktik ini disebut lazy loading, di mana pemuatan elemen yang berat dan tidak penting ditunda untuk meningkatkan performa halaman.

Pemuatan Bersyarat

Beberapa elemen situs web tidak ditujukan untuk pengguna seluler, atau setidaknya tidak sebanding dengan beban kognitif ekstra. Kami ingin situs web seluler kami sederhana, jadi masuk akal untuk menyembunyikan elemen dalam skenario tertentu. Karena itu, kita harus memastikan bahwa kita tidak membuang sumber daya dan bandwidth browser dengan memuat elemen-elemen ini bahkan ketika elemen tersebut disembunyikan; oleh karena itu, praktik terbaik untuk hanya menyertakan elemen-elemen ini dalam kondisi tertentu.

Sekali lagi, pengembang dapat mencapai ini dengan kode; namun, desainer dapat meningkatkan kinerja halaman dengan mengomunikasikan kondisi kapan dan di mana elemen tertentu harus dan tidak boleh ada.

Gambar Responsif

Seperti disebutkan sebelumnya, beberapa perangkat menampilkan lebih banyak piksel per inci, yang dapat mengakibatkan gambar menjadi buram jika tidak diekspor pada resolusi yang benar. Tergantung pada resolusi perangkat, beberapa akan memerlukan gambar dengan ukuran dua kali (@2x), tiga kali lipat (@3x), dan bahkan empat kali lipat (@4x). Browser web sekarang mendukung elemen <picture> , yang memilih resolusi gambar yang benar tergantung pada perangkatnya.

Desainer yang membuat situs web responsif dapat menyesuaikan gambar ke perangkat yang benar dengan memastikan untuk mengekspor pada semua resolusi yang digunakan pada perangkat saat ini (jika Anda tidak yakin, tanyakan kepada pengembang Anda—komunikasi adalah kunci dalam hal desain web responsif).

Kesimpulan

Wireframing dapat membantu menghilangkan kerutan di awal proses desain, dan ini berfungsi dengan baik saat mengambil pendekatan mobile-first untuk desain web responsif. Mungkin ada breakpoint responsif yang memerlukan perhatian ekstra, atau mungkin ada konsep yang tidak efektif dalam hal responsivitas seluler. Lebih baik menemukan gundukan di jalan lebih cepat daripada nanti (yaitu, sebelum menambahkan estetika visual).

Alat desain modern seperti Adobe XD, Marvel, dan InVision memungkinkan tim untuk menguji prototipe pada perangkat nyata, mendiskusikan umpan balik dalam konteks, dan umumnya berkolaborasi sebagai tim hingga tata letak berfungsi di semua skenario.

Mempekerjakan alur kerja UX ramping di mana desain responsif didorong oleh pengujian internal dan umpan balik akan memastikan bahwa pengalaman pengguna bekerja dengan mulus di semua platform dan resolusi layar sebelum disajikan kepada pengguna nyata untuk pertama kalinya.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib