0%
Website - Building Your Website

Mobile Optimization

Memastikan website Anda tampil sempurna di berbagai ukuran layar.

Mobile View 📸 Ilustrasi: Tampilan Mobile vs Desktop

1. Pentingnya Mobile Optimization

Sebagian besar lalu lintas web saat ini berasal dari perangkat seluler. Mengapa optimasi itu penting?

  • Layar Lebih Kecil: Konten harus mudah dibaca tanpa perlu zoom-in/zoom-out.
  • Interaksi Sentuh: Tombol harus cukup besar untuk diklik jari.
  • Peringkat SEO: Google memprioritaskan website yang mobile-friendly.

2. Bootstrap & Responsive Grid

Odoo dibangun di atas framework Bootstrap. Ini artinya:

  • Layout Odoo secara otomatis responsif.
  • Pada layar desktop, kolom mungkin berjajar ke samping.
  • Pada layar HP, kolom-kolom tersebut akan otomatis bertumpuk (stack) ke bawah agar muat di layar sempit.

Anda tidak perlu coding manual untuk ini, Odoo yang menanganinya!

3. Pratinjau Mobile (Mobile Preview)

Jangan menebak-nebak. Selalu cek tampilan mobile Anda saat mendesain.

  • Klik ikon 📱 (Mobile) di bar bagian atas editor.
  • Tampilan editor akan menyempit menyerupai layar HP.
  • Anda bisa mengedit teks, mengganti gambar, atau mengatur ulang blok khusus untuk tampilan mobile ini.
Tips: Perubahan konten teks biasanya berlaku untuk semua perangkat, tapi perubahan urutan blok bisa spesifik untuk mobile jika diaktifkan.

4. Conditional Visibility (Sembunyikan Elemen)

Kadang ada elemen yang bagus di Desktop tapi terlalu sempit di HP. Solusinya?

Gunakan fitur Visibility di tab Customize:

  • Hide on Mobile: Sembunyikan blok besar/kompleks di HP.
  • Hide on Desktop: Tampilkan blok yang lebih simpel khusus untuk pengguna HP.

Ini memungkinkan Anda memberikan pengalaman terbaik untuk setiap pengguna.

📝 Quiz Website Materi 7