Praktik terbaik untuk aplikasi web

Mengembangkan halaman web dan aplikasi web untuk perangkat seluler menghadirkan beragam tantangan yang berbeda dibandingkan dengan mengembangkan halaman web untuk browser web desktop biasa. Lihat referensi terkait berikut:

Untuk membantu Anda memulai, berikut ini adalah daftar tips yang harus Anda ikuti agar dapat menyediakan aplikasi web yang paling efektif untuk Android dan perangkat seluler lainnya.

Mengalihkan perangkat seluler ke versi seluler khusus situs Anda
Ada beberapa cara untuk mengalihkan permintaan ke versi seluler situs Anda, dengan menggunakan pengalihan sisi server. Hal ini sering dilakukan dengan "memperkirakan" string Agen Pengguna yang disediakan oleh browser web. Untuk menentukan apakah akan menayangkan versi seluler situs, sebaiknya cari string "seluler" di Agen Pengguna.

Catatan: Perangkat Android berlayar besar yang akan menayangkan situs berukuran penuh (seperti tablet) tidak menyertakan string "seluler" di Agen Pengguna, sama kemungkinannya dengan string Agen Pengguna yang lain. Oleh karena itu, sebaiknya berikan versi seluler situs Anda berdasarkan apakah string "seluler" ada di Agen Pengguna atau tidak.

Gunakan HTML5 DOCTYPE untuk perangkat seluler
Bahasa markup yang paling umum digunakan untuk situs seluler adalah HTML5. Ketentuan umum ini mendorong pengembangan khusus seluler untuk memastikan bahwa situs berfungsi dengan baik di berbagai perangkat. Tidak seperti bahasa web sebelumnya, HTML5 memerlukan deklarasi <DOCTYPE> dan charset yang lebih sederhana:
```
    <!DOCTYPE html>
    ...
    <meta charset="UTF-8">
    
```
Menggunakan metadata area pandang untuk mengubah ukuran halaman web Anda dengan benar
Dalam <head> dokumen, Anda harus menyediakan metadata yang menentukan bagaimana area pandang browser merender halaman web Anda. Misalnya, metadata area pandang Anda dapat menentukan tinggi dan lebar area pandang browser, skala halaman web awal, dan bahkan kepadatan layar target.

Contoh:
```
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    
```
Untuk informasi selengkapnya tentang cara menggunakan metadata area pandang untuk perangkat Android, baca Menargetkan Layar Aplikasi Web.
Menggunakan tata letak linier vertikal
Jangan biarkan pengguna men-scroll ke kiri dan ke kanan saat bernavigasi di halaman web Anda. Scroll ke atas dan ke bawah lebih mudah bagi pengguna dan membuat halaman web Anda lebih sederhana.
Menetapkan tinggi dan lebar tata letak dengan match_parent
Menetapkan tinggi dan lebar objek WebView dengan match_parent memastikan bahwa tampilan aplikasi Anda memiliki ukuran yang tepat. Kami tidak menyarankan menetapkan tinggi dengan wrap_content, karena akan mengakibatkan ukuran yang tidak tepat dan, pada aplikasi yang menargetkan Android 4.4 (API level 19) dan yang lebih rendah, tag meta viewport HTML diabaikan untuk mempertahankan kompatibilitas mundur. Demikian pula, menetapkan lebar tata letak dengan wrap_content tidaklah didukung dan menyebabkan WebView Anda menggunakan lebar induknya. Karena perilaku ini, penting juga untuk memastikan bahwa tak satu pun dari objek tata letak induk objek WebView Anda memiliki tinggi dan lebar yang ditetapkan dengan wrap_content.
Menghindari beberapa permintaan file
Karena perangkat seluler biasanya memiliki kecepatan koneksi yang jauh lebih lambat daripada komputer desktop, alangkah baiknya jika halaman web Anda dapat dimuat secepat mungkin. Salah satu cara untuk mempercepatnya adalah dengan menghindari pemuatan file tambahan seperti stylesheet dan file skrip dalam <head>. Cara yang lebih baik untuk mengoptimalkan pemuatan halaman di perangkat seluler adalah dengan menjalankan analisis seluler dengan PageSpeed Insights Google. Jika ingin mengoptimalkan performa aplikasi Anda, lihat Aturan PageSpeed Insights.

Untuk panduan yang lebih lengkap tentang cara membuat aplikasi web seluler yang canggih, lihat Praktik Terbaik Web Seluler W3C. Untuk panduan lainnya tentang cara meningkatkan kecepatan situs Anda (untuk seluler dan desktop), lihat tutorial kecepatan Google di Meningkatkan Kecepatan Web.