Desain responsif

Bagaimana desain responsif menyesuaikan ukuran layar?

Situs web responsif menetapkan aturan lebih dulu, misalnya ‘jika lebar layar lebih sempit dari sekian, susun seperti ini’, lalu memilih aturan yang sesuai dengan lebar layar pelanggan. Lebar tempat aturan ini berganti disebut ‘breakpoint’.

Misalnya, di komputer tiga foto berjajar dalam satu baris, sedangkan di ponsel ditumpuk satu per satu dari atas ke bawah. Foto dan kotak teks dibuat bukan dengan ukuran tetap, melainkan membesar dan mengecil mengikuti proporsi layar.

Di bagian paling atas kode situs web ada satu baris (pengaturan viewport) yang berarti ‘tampilkan layar ini sesuai lebar perangkat’. Jika baris ini hilang, di ponsel tampilan komputer terlihat mengecil.

Breakpoint ditentukan berdasarkan lebar layar, bukan nama perangkat tertentu. Jadi tidak perlu menyesuaikan setiap kali ponsel baru keluar; layar dengan ukuran yang belum pernah ada pun tersusun secara wajar mengikuti aturan terdekat.

Apa bedanya situs responsif, adaptif, dan situs khusus mobile?

Responsif adalah satu situs web yang menyesuaikan diri dengan semua layar, sedangkan adaptif dan situs khusus mobile menampilkan versi yang dibuat terpisah untuk tiap layar. Google merekomendasikan desain responsif karena mudah dibuat dan mudah dikelola.

Google membaca dan memberi peringkat situs berdasarkan konten versi ponsel. Jika situs mobile yang dibuat terpisah memuat konten lebih sedikit, konten yang hanya ada di tampilan komputer bisa dirugikan di pencarian.

Jika Anda sudah memakai situs khusus mobile seperti m.namatoko.kr, saat membuat ulang gabungkan menjadi responsif dan arahkan alamat m. lama secara otomatis ke alamat baru. Dengan begitu pelanggan yang datang lewat tautan lama tidak tersesat.

Apa yang perlu berbeda di tampilan ponsel?

Di ponsel, tampilan bukan sekadar diperkecil, melainkan disusun ulang agar nyaman dipakai dengan satu ibu jari. Rancang dengan anggapan pelanggan sedang berdiri, memakai satu tangan, dan mencari nomor telepon · lokasi · harga dalam waktu singkat.

Misalnya, daftar harga salon boleh tampil sebagai tabel lebar di komputer, tetapi di ponsel harus dipecah menjadi kartu per perawatan agar bisa dilihat tanpa menggeser ke samping. Jadwal kelas studio kerajinan pun lebih nyaman dilihat sebagai daftar tanggal daripada kalender di ponsel.

Di layar ponsel, urutan tampilan juga harus ditentukan ulang. ‘Profil usaha’ dan ‘tombol reservasi’ yang berdampingan di komputer akan ditumpuk atas-bawah di ponsel; atur urutannya agar informasi yang paling dulu dicari pelanggan ada di atas.

Untuk kafe atau restoran, jam buka, info buka-tidaknya hari ini, dan tombol petunjuk arah harus dekat dengan layar pertama ponsel. Pelanggan yang mengeluarkan ponsel di dekat lokasi akan mencari ketiga hal ini paling dulu.

• Ukuran teks isi cukup besar agar terbaca tanpa diperbesar
• Tombol dan tautan cukup besar dan berjarak untuk ditekan jari (biasanya disarankan sekitar 48 piksel panjang dan lebar)
• Nomor telepon langsung menelepon saat ditekan, alamat membuka aplikasi peta saat ditekan
• Jangan menutupi layar pertama dengan pop-up besar
• Jangan menaruh tulisan di dalam foto; tulis sebagai teks (di ponsel jadi kecil dan tidak terbaca)
• Perkecil foto sesuai layar ponsel agar cepat muncul

Bisakah situs web saya yang sekarang diubah menjadi responsif?

Bisa, tetapi untuk situs web lama sering kali lebih baik membuat baru daripada memperbaikinya. Situs web yang ukuran kolomnya dibuat tetap mengikuti lebar layar komputer harus disusun ulang dari kerangka tata letaknya, sehingga cakupan perbaikannya hampir setara membuat baru.

Pertama, cek kondisi situs web Anda. Jika saat dibuka di ponsel tulisannya menyusut sangat kecil sampai harus diperbesar dengan jari, kemungkinan besar bukan responsif. Jika hanya sebagian layar yang tergeser ke samping, kadang cukup bagian itu saja yang diperbaiki.

Jika membuat baru, manfaatkan kesempatan itu untuk menata ulang konten berdasarkan tampilan ponsel. Misalnya, jika gambar daftar menu di situs web restoran lama diganti menjadi menu berupa teks, menu lebih mudah dibaca di ponsel dan nama menunya juga terjaring di pencarian.

Bagaimana cara mengecek apakah situs web sudah responsif?

Cara paling pasti adalah membukanya di beberapa ponsel sungguhan dan meniru persis apa yang dilakukan pelanggan. Lihat dulu apakah telepon · reservasi · petunjuk arah berjalan lancar, bukan apakah tampilannya cantik.

Jika menemukan bagian yang aneh, tangkap layarnya, catat perangkat dan browser apa yang dipakai, lalu kirim ke vendor. Masalah yang sama bisa terlihat berbeda di tiap perangkat, jadi informasi ini sangat mempersingkat waktu perbaikan.

1. 01Gulir dari layar pertama sampai akhir di ponsel Anda, dan lihat apakah ada bagian yang tergeser ke samping.
2. 02Putar ponsel ke posisi mendatar dan lihat sekali lagi.
3. 03Buka juga di jenis ponsel lain (iPhone · Galaxy) dan tablet.
4. 04Di komputer, perkecil lebar jendela browser perlahan dan lihat apakah tata letak berubah secara wajar.
5. 05Tekan sendiri tombol telepon · buka peta · reservasi.
6. 06Matikan Wi-Fi, buka dengan data seluler, dan lihat apakah foto tidak terlalu lambat muncul.

Apa yang sering terlewat saat memesan pembuatan situs responsif?

Kesalahan paling umum adalah menyetujui hanya berdasarkan draf desain tampilan komputer. Jika sebagian besar pelanggan melihat lewat ponsel, menerima draf tampilan ponsel lebih dulu lalu memberi masukan akan lebih mendekati hasil akhirnya.

Selain itu, daftar menu atau info acara sering dimasukkan sebagai satu gambar besar. Di ponsel tulisannya jadi kecil dan sulit dibaca, dan mesin pencari juga tidak bisa membaca tulisan di dalam gambar dengan baik.

Masalah yang hanya terlihat di ponsel, seperti ukuran tulisan atau posisi tombol, sering lebih dulu disadari pelanggan setelah rilis. Minta agar tahap pengecekan sebelum rilis mencakup waktu untuk mencoba reservasi langsung dengan beberapa ponsel milik Anda dan karyawan.

• Apakah draf desain tampilan ponsel juga ditunjukkan terpisah?
• Bagaimana daftar harga · tabel · jadwal berubah di ponsel?
• Apakah foto diperkecil sesuai ukuran layar saat diunggah?
• Dengan perangkat apa saja situs dicek sebelum rilis?