Chrome Dev Summit selesai beberapa minggu lalu, dan berikut adalah laporan pertama dari serangkaian laporan dari acara tersebut. Ada penekanan yang kuat pada pengembangan Seluler dan Lintas Perangkat, jadi kita akan memulai dengan itu.
Pola UX terbaik untuk aplikasi web seluler oleh Paul Kinlan
Setelah melakukan analisis kesesuaian seluler terhadap 1.000 situs teratas, kami menemukan beberapa area masalah: 53% masih hanya memberikan pengalaman khusus desktop, 82% situs memiliki masalah interaktivitas di perangkat seluler, dan 64% situs memiliki teks yang akan menyulitkan pengguna untuk membacanya.
Tips cepat untuk meningkatkan pengalaman web seluler Anda secara drastis
- Selalu tentukan area pandang
- Menyesuaikan konten di dalam area pandang
- Pastikan ukuran font tetap dapat dibaca
- Membatasi penggunaan Font Web
- Ukur dan beri jarak target ketuk dengan tepat
- Menggunakan jenis semantik untuk elemen input
PageSpeed Insights baru saja meluncurkan analisis UX untuk menentukan seberapa mobile-friendly situs Anda. Analisis ini akan membantu Anda menemukan masalah umum pada UX seluler situs Anda. Cobalah!
Slide: Pola UX terbaik untuk aplikasi web seluler
Aksesibilitas Multiperangkat oleh Alice Boxhall
Pengguna akan mengakses situs dan layanan Anda dari berbagai perangkat dengan berbagai persyaratan aksesibilitas. Dengan menggunakan elemen semantik yang benar dan peran ARIA yang benar, Anda membantu memberikan pemahaman yang jauh lebih baik tentang halaman Anda kepada browser dan teknologi pendukung.
Slide: Aksesibilitas Multiperangkat
Cara utama untuk memahami dan mengatasi masalah a11y
- Memastikan Anda memiliki pengalaman pengguna yang baik hanya dengan keyboard
- Mengekspresikan semantik antarmuka Anda dengan pilihan elemen dan ARIA yang benar
- Gunakan ChromeVox di desktop dan TalkBack di Android untuk menguji.
- Mencoba ekstensi Chrome Aksesibilitas Developer Tools
- Makin banyak audiens yang beragam yang mengakses internet, sehingga semakin meningkatkan kebutuhan untuk membuat situs Anda mudah diakses
Build Aplikasi Seluler menggunakan WebView Chrome oleh Matt Guant
Kita semua tahu masalah yang dialami developer dalam proses build sebelumnya untuk WebView: Fitur HTML5 terbatas, tidak ada alat proses debug, tidak ada alat build. Dengan diperkenalkannya WebView yang didukung Chromium di Android 4.4 (KitKat), developer kini memiliki berbagai alat baru yang dapat digunakan untuk mem-build aplikasi native yang bagus menggunakan WebView.
WebView mendukung proses debug jarak jauh penuh dengan alat yang sama dengan yang Anda gunakan untuk Chrome. Anda juga dapat menggunakan alur kerja pengembangan web tepercaya dengan Grunt dan mengintegrasikannya ke dalam alat stack native melalui Gradle. Untuk menggabungkan dunia lebih lanjut, ada trik cerdas untuk menggunakan Chrome DevTools guna menguji kode native Anda dari JavaScript.
Slide: Membuat Aplikasi Seluler menggunakan WebView Chrome
Poin penting pengembangan WebView yang efektif
- Yang penting bukan fitur barunya, melainkan alat yang kini dapat Anda gunakan untuk mempercepat alur kerja
- Jangan mencoba mengemulasi UI native. Namun, pastikan untuk menghapus beberapa petunjuk bahwa konten tersebut adalah Konten Web.
- Gunakan implementasi native fitur jika sesuai. yaitu, gunakan DownloadManager, bukan XHR untuk file besar.
Mengoptimalkan Alur Kerja Anda untuk dunia Lintas Perangkat oleh Matt Gaunt
Jika kita harus mengembangkan untuk Desktop, Seluler, Tablet, perangkat wearable, dan faktor bentuk lainnya, bagaimana cara mengoptimalkan alur kerja agar hidup kita tidak terlalu stres? Ada pendekatan multi-perangkat yang solid untuk iterasi cepat dengan LiveReload, Grunt, Yeoman, dan Mini Mobile Device Lab yang baru saja diluncurkan. Terakhir, jika Anda tidak memiliki hardware fisik yang ingin diuji, beberapa penyedia menyediakannya melalui cloud.
Slide: Mengoptimalkan Alur Kerja untuk dunia Lintas Perangkat
Poin utama
- Jumlah perangkat yang harus kita penuhi hanya akan meningkat
- Mendapatkan alur kerja yang tepat dengan Grunt dan Yeoman
- Sederhanakan pengujian lintas browser dan lintas perangkat dengan Mini Mobile Device Lab
- Pilih emulator dengan cermat menggunakan Emulasi Chrome DevTools, Emulator Stok, Emulator Berbasis Cloud seperti Saucelabs, Browserstack, dan appexperience, serta emulator pihak ketiga Genymotion
- Pengujian seluler tidak hanya berarti menguji koneksi Wi-Fi Anda, gunakan proxy untuk menyimulasikan kecepatan jaringan yang lebih lambat
Konektivitas jaringan: opsional oleh Jake Archibald
Kita telah mempelajari banyak hal dari presentasi ini: Jake tidak memakai sepatu saat melakukan presentasi; Business Kinlan akan segera merilis buku baru; Offline dianggap serius oleh vendor browser dan Anda akan segera memiliki alat yang membantu Anda membangun pengalaman hebat yang berfungsi dengan baik saat Anda offline.
ServiceWorker akan memberi kita fleksibilitas yang diperlukan untuk membuat pengalaman offline-first yang menarik dengan mudah dan tidak mengalami kesulitan yang ditimbulkan oleh AppCache. Anda bahkan dapat bereksperimen dengan API menggunakan Polyfill.
Slide: Konektivitas jaringan: opsional
ServiceWorker datang untuk menyelamatkan
- Dalam progressive enhancement generasi berikutnya, kami memperlakukan jaringan sebagai peningkatan potensial
- ServiceWorker memberi Anda kontrol penuh, yang dapat di-debug, dan dapat dibuat skripnya atas permintaan jaringan
- Jika Anda memiliki pengalaman offline, jangan menunggu jaringan gagal sebelum menampilkannya, karena hal ini dapat memerlukan waktu lama