Chrome Dev Summit telah selesai beberapa minggu yang lalu, dan berikut adalah yang pertama dalam serangkaian laporan dari acara tersebut. Ada penekanan kuat pada pengembangan Seluler dan Lintas perangkat, jadi kita akan mulai dengan hal itu!
Pola UX terbaik untuk aplikasi web seluler oleh Paul Kinlan
Setelah analisis tingkat mobile-friendly dari 1.000 situs teratas, kami menemukan beberapa area masalah: 53% masih hanya memberikan pengalaman khusus desktop, 82% situs memiliki masalah dengan interaktivitas di perangkat seluler, dan 64% situs memiliki teks sehingga pengguna akan kesulitan membacanya.
Klik cepat untuk meningkatkan pengalaman web seluler Anda secara drastis
- Selalu menentukan area pandang
- Menyesuaikan konten dalam area pandang
- Pertahankan ukuran font pada tingkat yang dapat dibaca
- Batasi penggunaan Font Web
- Beri ukuran dan beri jarak pada target ketuk dengan tepat
- Menggunakan jenis semantik untuk elemen input
PageSpeed Insights baru saja meluncurkan analisis UX untuk menentukan seberapa mobile-friendly situs Anda. Ini akan membantu Anda menemukan masalah umum terkait 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 banyak perangkat dengan berbagai persyaratan aksesibilitas. Dengan menggunakan elemen semantik yang tepat dan peran ARIA yang tepat, 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
- Pastikan Anda memiliki pengalaman pengguna khusus keyboard yang baik
- Ekspresikan semantik antarmuka Anda dengan pilihan elemen dan ARIA yang tepat
- Gunakan ChromeVox di desktop dan TalkBack di Android untuk menguji.
- Coba ekstensi Chrome Accessibility Developer Tools
- Makin beragam audiens online, yang makin memperkuat kebutuhan untuk membuat situs Anda mudah diakses
Membangun Aplikasi Seluler menggunakan WebView Chrome oleh Matt Guant
Kita semua tahu masalah yang dialami developer di masa lalu untuk WebView: Fitur HTML5 terbatas, tidak ada alat 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 hebat menggunakan WebView.
WebView mendukung proses debug jarak jauh penuh dengan alat yang sama seperti 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. Selanjutnya dalam menggabungkan dunia, ada trik cerdas untuk menggunakan Chrome DevTools untuk menguji kode native Anda dari JavaScript.
Slide: Membuat Aplikasi Seluler menggunakan WebView Chrome
Poin-poin penting pengembangan WebView yang efektif
- Ini bukanlah fitur baru yang penting, melainkan alat yang sekarang dapat Anda gunakan untuk mempercepat alur kerja
- Jangan mencoba mengemulasi UI native. Tapi pastikan untuk menghapus beberapa informasi bahwa itu adalah Konten Web.
- Gunakan implementasi fitur native jika sesuai. yaitu, gunakan DownloadManager, bukan XHR untuk file besar.
Mengoptimalkan Alur Kerja Anda untuk Dunia Lintas-perangkat oleh Matt Gaunt
Jika kami harus mengembangkan aplikasi untuk Desktop, Seluler, Tablet, perangkat wearable, dan faktor bentuk lainnya, bagaimana Anda dapat mengoptimalkan alur kerja untuk mengurangi stres? Ada pendekatan multiperangkat yang solid untuk iterasi cepat dengan LiveReload, Grunt, Yeoman, dan Mini Mobile Device Lab yang baru diluncurkan. Terakhir, jika Anda tidak memiliki hardware fisik yang ingin diuji, beberapa penyedia menyediakannya melalui cloud.
Slide: Mengoptimalkan Alur Kerja Anda untuk Dunia lintas-perangkat
Poin utama
- Jumlah perangkat yang harus dipenuhi hanya akan meningkat
- Menyiapkan alur kerja Anda dengan tepat bersama Grunt dan Yeoman
- Menyederhanakan pengujian lintas browser dan lintas perangkat dengan Mini Mobile Device Lab
- Cerdas dengan pilihan emulasi menggunakan Emulasi Chrome DevTools, Emulator Stok, Emulator Berbasis Cloud seperti Saucelabs, Browserstack, dan appexperience, serta emulator pihak ketiga Genymotion
- Pengujian seluler berarti lebih dari sekadar menguji koneksi Wi-Fi Anda, gunakan proxy untuk menyimulasikan kecepatan jaringan yang lebih lambat
Konektivitas jaringan: opsional oleh Jake Archibald
Kami belajar banyak hal dari diskusi ini: Jake tidak memakai sepatu saat melakukan presentasi; Business Kinlan akan segera merilis buku barunya; Vendor browser menganggap offline secara serius dan Anda akan segera memiliki alat yang membantu Anda menciptakan pengalaman luar biasa yang bekerja dengan baik saat offline.
ServiceWorker akan memberi kami fleksibilitas yang dibutuhkan untuk membangun pengalaman pertama offline 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 siap menolong
- Pada progressive enhancement generasi berikutnya, kami memperlakukan jaringan sebagai sebuah potensi peningkatan
- ServiceWorker memberi Anda kontrol penuh, dapat ditulis skrip, dan dapat di-debug atas permintaan jaringan
- Jika Anda memiliki pengalaman offline, jangan menunggu jaringan gagal sebelum Anda menampilkannya, karena tindakan ini dapat memakan waktu lama