Praktik terbaik untuk aplikasi web

Mengembangkan halaman web dan aplikasi untuk perangkat seluler menghadirkan tantangan yang berbeda dibandingkan dengan mengembangkan halaman web untuk browser web desktop. Praktik berikut dapat membantu Anda menyediakan aplikasi web yang paling efektif untuk Android dan perangkat seluler lainnya.

  1. Alihkan perangkat seluler ke versi seluler khusus situs Anda. Ada beberapa cara untuk melakukannya dengan menggunakan pengalihan sisi server. Salah satu metode yang umum adalah "menyadap" string Agen Pengguna yang disediakan oleh browser web. Untuk menentukan apakah akan menayangkan versi seluler situs Anda, cari string "seluler" di Agen Pengguna.
  2. Gunakan HTML5 untuk perangkat seluler. HTML5 adalah bahasa markup yang paling umum digunakan untuk situs web seluler. Standar ini mendorong pengembangan yang mengutamakan seluler untuk membantu memastikan bahwa situs berfungsi di berbagai perangkat. Tidak seperti bahasa web sebelumnya, HTML5 menggunakan deklarasi <DOCTYPE> dan charset yang lebih sederhana:
    <!DOCTYPE html>
    ...
    <meta charset="UTF-8">
    
  3. Gunakan metadata area pandang untuk mengubah ukuran halaman web Anda dengan benar. Dalam <head> dokumen Anda, berikan metadata yang menentukan cara area pandang browser merender halaman web Anda. Misalnya, metadata area pandang Anda dapat menentukan tinggi dan lebar area pandang browser, skala halaman awal, dan kepadatan layar target.

    Contoh berikut menunjukkan cara menyetel metadata area pandang:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    

    Untuk mengetahui informasi selengkapnya tentang cara menggunakan metadata area pandang untuk perangkat Android, baca Mendukung layar yang berbeda-beda di aplikasi web.

  4. Gunakan tata letak linear vertikal. Jangan sampai pengguna men-scroll ke kiri dan ke kanan saat membuka halaman Anda. Scroll ke atas dan ke bawah lebih mudah bagi pengguna dan membuat halaman Anda lebih sederhana.
  5. Tetapkan tinggi dan lebar tata letak ke match_parent. Menetapkan tinggi dan lebar objek WebView ke match_parent akan memastikan tampilan aplikasi memiliki ukuran yang tepat. Sebaiknya jangan menetapkan tinggi ke wrap_content karena akan menyebabkan ukuran yang salah. Demikian pula, menetapkan lebar tata letak ke wrap_content tidak didukung dan menyebabkan WebView Anda menggunakan lebar induknya. Karena perilaku ini, penting juga untuk memastikan tidak ada objek tata letak induk objek WebView Anda yang memiliki tinggi dan lebar yang ditetapkan ke wrap_content.
  6. Hindari beberapa permintaan file. Karena perangkat seluler biasanya memiliki kecepatan koneksi yang lebih lambat daripada komputer desktop, buat halaman Anda dimuat secepat mungkin. Salah satu cara untuk mempercepatnya adalah dengan menghindari pemuatan file tambahan seperti stylesheet dan file skrip di <head>. Selain itu, pertimbangkan melakukan analisis seluler dengan PageSpeed Insights Google untuk saran pengoptimalan mendetail khusus aplikasi Anda.

Referensi lainnya