Praktik terbaik untuk aplikasi web

Mengembangkan halaman web dan aplikasi untuk perangkat seluler menghadirkan tantangan yang berbeda dibandingkan untuk mengembangkan laman web untuk {i>browser<i} web desktop. Praktik berikut dapat membantu Anda menyediakan aplikasi web yang paling efektif untuk Android dan perangkat seluler lainnya.

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

    Contoh berikut menunjukkan cara menetapkan 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 tampilan untuk perangkat Android, baca Mendukung layar yang berbeda di aplikasi web.

  4. Gunakan tata letak linear vertikal. Hindari keharusan pengguna untuk men-scroll ke kiri dan ke kanan saat menavigasi halaman. 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. Menyetel WebView tinggi dan lebar objek untuk match_parent memastikan tampilan aplikasi Anda memiliki ukuran yang tepat. Sebaiknya jangan menetapkan tinggi dengan wrap_content karena menyebabkan kesalahan ukuran. Demikian pula, menentukan lebar tata letak menjadi wrap_content tidak didukung dan menyebabkan WebView menggunakan lebar induknya. Karena perilaku ini, penting untuk memastikan tidak ada objek tata letak induk objek WebView Anda memiliki tinggi dan lebar yang ditetapkan ke wrap_content.
  6. Hindari banyak permintaan file. Karena perangkat seluler umumnya memiliki kecepatan koneksi lebih lambat dibandingkan komputer desktop, buat laman Anda dimuat secepat mungkin. Salah satu cara untuk mempercepatnya adalah dengan hindari memuat file tambahan seperti stylesheet dan file skrip di <head>. Pertimbangkan juga melakukan analisis seluler dengan PageSpeed Insights dari Google guna memberikan saran pengoptimalan mendetail khusus untuk aplikasi Anda.

Referensi lainnya