11+ Cara Membuat Website Responsive (Mobile Friendly)

Cara Membuat Website Responsive (Mobile Friendly)

Memiliki website mobile friendly sudah menjadi keharusan saat ini. Salah satu alasan mengapa website harus responsive atau mobile friendly adalah karena jumlah traffic penggunaan smartphone yang setiap harinya terus bertambah. Untuk itu, bagi anda yang memiliki keinginan membuat website responsive di berikut adalah beberapa trik yang dapat digunakan untuk membuat website responsive (mobile friendly). Beberapa trik ini akan dapat membantu anda mengerti tentang apa dan bagaimana cara membuat website yang responsive.

1. Pilih dan Gunakan Template/Tema Responsif

Tema atau template memiliki pengaruh besar dalam sebuah website baik dari segi performa dan juga pengalaman berkunjung. Secara teknis, tema yang responsif akan sangat membantu mengurangi waktu loading karena memudahkan google mengindeks website yang sudah teroptimasi dengan baik.

Tema yang responsive juga akan memudahkan Googlebot dalam mengindeks halaman website sehingga akan berpengaruh pada ranking website pada hasil pencarian. Sementara dari sisi user experience, tema yang responsif berguna untuk memudahkan user membagikan konten. Ada beberapa kriteria utama yang harus anda ingat mengenai tema responsif, yakni:

• Bisa menyesuaikan tampilan website dengan perangkat yang digunakan secara otomatis
• Memiliki desain serta tampilan simpel namun elegan
• Memiliki user interface dan user experience yang baik

2. Membuat Menu yang Sederhana

Layar desktop memiliki ukuran dan kebutuhan yang berbeda dengan ponsel dalam menampilkan halaman web. Resolusi desktop minimal adalah 1080p, sedangkan resolusi layar ponsel hanya 720p. Oleh karena itu, menu website harus dapat menyesuaikan secara otomatis antara tampilan desktop dan mobile. Untuk membuat tampilan menu terlihat sederhana, maka ada beberapa hal utama yang harus diperhatikan yaitu:

• Tampilkan hanya menu yang penting sebab jika terlalu banyak akan membuat pengunjung bingung saat menjelajahi web.
• Letakkan menu lain dalam collapsible navigation sidebar atau menu navigasi yang dapat disembunyikan.
• Hindari menggunakan sidebar untuk konten sebab konten yang diletakkan di sidebar umumnya akan ditampilkan pada bagian paling bawah halaman versi mobile.
• Buat tombol dengan ukuran yang sesuai.

3. Tambahkan Kolom Pencarian

Meski sebisa mungkin menu dibuat sederhana, namun tidak semua harus dibuat sesederhana mungkin seperti pada menu dan konten website. Terlebih, jika web tersebut adalah toko online atau marketplace karena tentunya ada banyak menu serta halaman yang berisi produk yang akan dijual.

Jika anda memiliki website yang seperti ini, maka sebaiknya tambahkan juga kolom pencarian agar bisa memudahkan pelanggan ketika sedang mencari produk yang diinginakan.

4. Pilih Font Yang Benar

Sama seperti tema, font juga berpengaruh pada tingkat mobile friendly website. Mengingat ruang ponsel yang terbatas, maka pilihan font juga sangat berpengaruh bagi website. Dengan memilih font yang benar, maka konten web yang anda miliki juga bisa lebih mudah terbaca. Ditambah lagi, font juga bisa berpengaruh pada mood, kesan, dan juga branding dari sebuah website.

Font yang memiliki sifat dekoratif umumnya tidak masuk dalam kategori mobile friendly, dan tampilan font klasik ukurannya akan terlihat besar di ponsel sehingga kurang indah. Sehingga pemilihan font menjadi salah satu hal yang perlu diperhatikan untuk mendapatkan website responsive.

5. Memiliki Whitespace yang Cukup

Meski tidak berhubungan dengan hal teknis, namun memastikan terdapat whitespace yang cukup juga penting untuk diperhatikan. Tampilan yang putih polos di web nantinya akan memberikan kesan yang elegan sekaligus bersih khususnya jika dilihat dari ponsel.

Selain itu, latar putih juga akan membuat pengunjung bisa lebih fokus pada objek utama yang ada di halaman website. Terlebih lagi website toko online, ada baiknya menggunakan whitespace yang cukup supaya produk yang sedang anda jual bisa lebih terlihat.

6. Buat Form Dengan Singkat

Form pada website prinsip utamanya haruslah singkat, khususnya untuk website responsive atau mobile friendly. Hal yang harus dilakukan adalah memotong form isian yang kurang penting untuk para user seperti contohnya ketika anda bertanya informasi untuk kontak, maka sertakan 2 macam form saja yakni nama dan alamat email.

Jika untuk pengiriman barang, maka anda bisa membuat form yang diperlukan saja dan lebih fokus pada informasi yang diperlukan. Anda tidak harus mengetahui hal hal tidak penting lainnya seperti warna favorit, darimana mereka memperoleh informasi bisnis anda dan lain sebagainya.

7. Optimasi Gambar

Pada sebuah website mobile friendly, gambar juga bisa menjadi hal yang sangat penting. Namun, masih banyak orang yang masih saja mencantumkan gambar ke website secara asal dan tidak peduli dengan ukuran serta format gambar tersebut. Hal ini akan berakibat web yang semakin lambat ditambah memory disk server yang semakin boros. Untuk itulah, optimasi gambar menjadi hal yang sangat penting untuk dilakukan.

Ada beberapa hal yang bisa anda lakukan untuk mengoptimasi gambar, seperti:

• Memilih format yang tepat untuk menghemat disk space seperti gnakan saja gambar format JPG atau JPEG.
• Lakukan kompresi gambar seperti mengunggahnya ke TinyPNG atau TinyJPG.
• Perkecil dimensi dari gambar yang bisa dilakukan dengan software seperti Picasa atau Paint.
• Install plugin image optimizer seperti contohnya WP Smush.
• Menambahkan title text serta alt text untuk SEO.

8. Menghindari Pop Up

Perlu anda ketahui jika pop up akan menggunakan terlalu banyak tempat sehingga sangat tidak cocok jika ini terjadi pada ponsel yang pada kenyataannya berukuran lebih kecil.

Selain itu, pop up juga lebih susah untuk ditutup karena tombol Close [x] umumnya juga berukuran kecil atau bahkan sulit ditemukan. Untuk itu, sebaiknya hindari pop up ini pada website versi mobile.

9. Gunakan AMP

AMP [Accelerated Mobile Page] adalah proyek dari Google yang diklaim bisa mempercepat waktu loading. Ini disebabkan karena AMP bekerja memakai cache dan cache sendiri digunakan untuk menyimpan data web pada gadget. Selain itu, AMP cache juga bisa mengoptimalkan kerja server dengan beberapa cara, seperti:

• Membatasi resolusi gambar atau dimensi.
• Mengubah format gambar ke ukuran yang pas dengan tampilan pada ponsel.
• Mengurangi kualitas gambar untuk meningkatkan kecepatan loading.
• Mengamankan web lewat protokol HTTPS.

10. Abaikan Flash

Flash sebenearnya sudah usang dan banyak orang yang memang tidak menyukainya sehingga sebaiknya tidak anda gunakan lagi. Bahkan pada desktop pun, pengalaman menjelajah dengan Flash juga tidak menyenangkan. Flash menyebabkan web jadi tidak responsif serta waktu loading yang dibutuhkan juga lama yang bahkan juga sudah tidak didukung pada iOS dan juga Android.

11. Utamakan Kecepatan

Inti paling utama dari mobile friendly adalah tentang kecepatan sehingga kecepatan harus menjadi hal utama dalam website. Jika web anda tidak segera muncul dalam waktu 3 detik, maka kemungkinan besar pengunjung batal mengakses web anda hingga mencapai 32%. Jika waktu load yang diperlukan semakin lama, maka akan semakin tinggi kemungkinan bounce rate.

• Agar bisa menambah kecepatan website, ada beberapa hal yang bisa anda lakukan, seperti:
• Mengurangi jumlah post yang ditampilkan pada halaman depan.
• Menghilangkan widget yang tidak dibutuhkan.
• Uninstall plugin yang memang jarang anda gunakan.

Kesimpulan

Demikian ulasan dari kami kali ini tentang beberapa trik membuat website mobile friendly yang bisa anda lakukan ketika sudah membuat website sesuai dengan kebutuhan anda di jasa pembuatan website di Malang. Membuat website mobile friendly ini sangatlah penting khususnya jika web anda adalah toko online sehingga akan jauh lebih mudah diakses para pengunjung lewat ponsel.