Il Chrome Dev Summit è terminato un paio di settimane fa e di seguito è riportato il primo di una serie di report sull'evento. È stata posta una forte enfasi sullo sviluppo per dispositivi mobili e cross-device, quindi inizieremo da qui.
Best UX patterns for mobile web apps di Paul Kinlan
Dopo un'analisi dell'ottimizzazione mobile dei 1000 siti principali, abbiamo rilevato alcune aree problematiche: il 53% offre ancora un'esperienza solo per computer, l'82% dei siti presenta problemi di interattività su un dispositivo mobile e il 64% dei siti contiene testo che gli utenti avranno difficoltà a leggere.
Suggerimenti rapidi per migliorare notevolmente la tua esperienza sul web mobile
- Definisci sempre un'area visibile
- Adattare i contenuti all'interno dell'area visibile
- Mantieni le dimensioni dei caratteri a un livello leggibile
- Limitare l'utilizzo dei caratteri web
- Dimensiona e distanzia in modo appropriato i target dei tocchi
- Utilizza i tipi semantici per gli elementi di input
PageSpeed Insights ha appena lanciato un'analisi UX per determinare il livello di ottimizzazione mobile del tuo sito. Ti aiuterà a individuare i problemi comuni relativi all'esperienza utente mobile dei tuoi siti. Prova
Presentazioni: i migliori pattern di UX per le app web mobile
Accessibilità su più dispositivi di Alice Boxhall
Gli utenti accederanno ai tuoi siti e servizi da una moltitudine di dispositivi con una vasta gamma di requisiti di accessibilità diversi. Se utilizzi gli elementi semantici e i ruoli ARIA corretti, aiuti il browser e le tecnologie per la disabilità a comprendere molto meglio la tua pagina.
Presentazioni: accessibilità multi-dispositivo
Metodi principali per comprendere e risolvere i problemi di accessibilità
- Garantire un'esperienza utente ottimale con la sola tastiera
- Esprimi la semantica della tua interfaccia con la scelta corretta degli elementi e ARIA
- Per il test, utilizza ChromeVox su computer e TalkBack su Android.
- Prova l'estensione di Chrome per gli Strumenti per sviluppatori di accessibilità
- Un pubblico più diversificato si sta collegando a internet, il che amplifica ulteriormente la necessità di rendere accessibili i tuoi siti
Creare app mobile utilizzando WebView di Chrome di Matt Guant
Sappiamo tutti i problemi che gli sviluppatori hanno riscontrato in passato durante la creazione di app per WebView: funzionalità HTML5 limitate, nessun strumento di debug, nessun strumento di compilazione. Con l'introduzione di un WebView basato su Chromium in Android 4.4 (KitKat), gli sviluppatori hanno ora a disposizione una vasta gamma di nuovi strumenti per creare app native straordinarie utilizzando WebView.
WebView supporta il debug remoto completo con gli stessi strumenti che utilizzi per Chrome. Puoi anche utilizzare il tuo flusso di lavoro di sviluppo web attendibile con Grunt e integrarlo negli strumenti dello stack nativo tramite Gradle. Per un'ulteriore fusione di mondi, esiste un trucco intelligente per utilizzare Chrome DevTools per testare il codice nativo da JavaScript.
Presentazioni: creare app mobile utilizzando WebView di Chrome
Approfondimenti sullo sviluppo di WebView efficaci
- Non sono le nuove funzionalità a essere importanti, ma gli strumenti che ora puoi utilizzare per velocizzare il flusso di lavoro
- Non tentare di emulare l'interfaccia utente nativa. Assicurati però di rimuovere alcuni degli elementi che indicano che si tratta di contenuti web.
- Utilizza le implementazioni native delle funzionalità, se opportuno. ad esempio, utilizza DownloadManager anziché XHR per i file di grandi dimensioni.
Optimizing your Workflow for a Cross-device world di Matt Gaunt
Se dobbiamo sviluppare per computer, dispositivi mobili, tablet, indossabili e altri fattori di forma, come puoi ottimizzare il tuo flusso di lavoro per semplificarti la vita? Esiste un approccio multi-dispositivo solido per l'iterazione rapida con LiveReload, Grunt, Yeoman e il Mini Mobile Device Lab appena presentato. Infine, se non hai l'hardware fisico che vuoi testare, alcuni fornitori lo rendono disponibile tramite il cloud.
Presentazioni: ottimizzare il flusso di lavoro per un mondo cross-device
Punti chiave
- Il numero di dispositivi che dovremo supportare non farà che aumentare
- Organizzare il flusso di lavoro con Grunt e Yeoman
- Semplifica i test su più browser e dispositivi con Mini Mobile Device Lab
- Scegli con attenzione l'emulatore utilizzando l'emulatore di Chrome DevTools, gli emulatori di serie, gli emulatori basati su cloud come Saucelabs, Browserstack e appexperience e l'emulatore di terze parti Genymotion
- I test su dispositivi mobili non si limitano a testare la connessione Wi-Fi, ma utilizzano un proxy per simulare velocità di rete più lente
Connettività di rete: facoltativa di Jake Archibald
Abbiamo imparato molte cose da questo intervento: Jake non indossa scarpe quando presenta; Business Kinlan ha un nuovo libro in uscita a breve; l'offline viene preso molto sul serio dai fornitori di browser e a breve avrai a disposizione gli strumenti per creare esperienze straordinarie che funzionino bene quando sei offline.
ServiceWorker ci offrirà la flessibilità necessaria per creare facilmente esperienze offline convincenti e non subire i problemi causati da AppCache. Puoi anche sperimentare con l'API utilizzando un Polyfill.
Presentazioni: connettività di rete (facoltativa)
ServiceWorker viene in soccorso
- Nella prossima generazione di miglioramento progressivo, consideriamo la rete come un potenziale miglioramento
- ServiceWorker ti offre un controllo completo, scriptabile e di debug sulle richieste di rete
- Se hai un'esperienza offline, non aspettare che la rete non sia più disponibile prima di mostrarla, perché potrebbe volerci molto tempo