Chrome Dev Summit - Riepilogo relativo ai dispositivi mobili

Il Chrome Dev Summit si è concluso un paio di settimane fa ed ecco il primo di una serie di report dell'evento. È stata data grande importanza allo sviluppo mobile e cross-device, quindi iniziamo.

I migliori pattern UX per le app web mobile di Paul Kinlan

Dopo un'analisi dell'ottimizzazione per i dispositivi mobili dei 1000 siti principali, abbiamo individuato alcune aree problematiche: il 53% offre ancora solo un'esperienza solo per computer, l'82% dei siti presenta problemi di interattività sui dispositivi mobili e il 64% dei siti presenta testi che gli utenti non avranno difficoltà a leggere.

Hit rapidi per migliorare notevolmente l'esperienza sul web mobile

  • Definisci sempre un'area visibile
  • Adattare i contenuti all'area visibile
  • Mantieni le dimensioni dei caratteri a un livello leggibile
  • Limita l'utilizzo dei caratteri web
  • Dimensioni e distanza adeguata target dei tocchi
  • Utilizzare i tipi semantici per gli elementi di input

PageSpeed Insights ha appena lanciato un'analisi UX per determinare il livello di ottimizzazione per i dispositivi mobili del tuo sito. Ti aiuterà a trovare problemi comuni relativi all'esperienza utente sui dispositivi mobili per i tuoi siti. Corri a provarla!

Presentazioni: i migliori pattern UX per le app web mobile

Accessibilità multi-dispositivo di Alice Boxhall

Gli utenti potranno accedere ai tuoi siti e servizi da una moltitudine di dispositivi con un'ampia gamma di requisiti di accessibilità diversi. L'utilizzo degli elementi semantici e dei ruoli ARIA corretti consente di migliorare la comprensione della pagina da parte del browser e delle tecnologie per la disabilità.

Presentazioni: accessibilità multi-dispositivo

Metodi principali per comprendere e risolvere i problemi di accessibilità

  • Assicurati di avere un'esperienza utente positiva solo con la tastiera
  • Esprimi la semantica della tua interfaccia con la scelta corretta degli elementi e il feed ARIA
  • Per eseguire il test, usa ChromeVox su computer e TalkBack su Android.
  • Prova l'estensione di Chrome Strumenti per sviluppatori Accessibilità
  • Un pubblico più diversificato si sta diffondendo online, il che amplifica ulteriormente la necessità di rendere i siti accessibili

Creare app mobile con Chrome WebView di Matt Guant

Conosciamo tutti i problemi che gli sviluppatori hanno avuto in passato nella realizzazione di WebView: funzioni HTML5 limitate, nessuno strumento di debug, nessuno strumento di creazione. Con l'introduzione di un componente WebView basato su Chromium in Android 4.4 (Lollipop) ora gli sviluppatori hanno a disposizione una vasta gamma di nuovi strumenti per creare fantastiche app native utilizzando WebView.

WebView supporta il debug remoto completo con gli stessi strumenti che utilizzi per Chrome. Puoi anche completare il tuo flusso di lavoro affidabile per lo sviluppo web con Grunt e integrarlo nei tuoi strumenti per stack nativi tramite Gradle. Unendo ulteriormente i mondi, c'è un modo intelligente per usare Chrome DevTools per testare il tuo codice nativo da JavaScript.

Presentazioni: creare app mobile con Chrome WebView

Efficaci concetti chiave sullo sviluppo di WebView

  • Non sono le nuove funzionalità che sono importanti, ma gli strumenti che ora puoi utilizzare per velocizzare il tuo flusso di lavoro
  • Non provare a emulare l'interfaccia utente nativa. Assicurati però di rimuovere alcuni messaggi che indicano che si tratta di contenuti web.
  • Se necessario, utilizza le implementazioni native delle funzionalità. Ad esempio, utilizza DownloadManager invece di XHR per i file di grandi dimensioni.

Ottimizzare il flusso di lavoro per un mondo cross-device di Matt Gaunt

Se dovessimo sviluppare soluzioni per computer desktop, dispositivi mobili, tablet, dispositivi indossabili e altri fattori di forma, come puoi ottimizzare il flusso di lavoro per ridurre lo stress? Esiste un solido approccio multi-dispositivo per l'iterazione rapida con LiveReload, Grunt, Yeoman e il nuovo Mini Mobile Device Lab, presentato di recente. Infine, se non disponi dell'hardware fisico da testare, alcuni provider lo rendono disponibile attraverso il cloud.

Presentazioni: ottimizzare il flusso di lavoro per un mondo cross-device

Punti chiave

  • Il numero di dispositivi di cui dovremo occuparci potrà solo aumentare
  • Gestisci il flusso di lavoro nel modo giusto con Grunt e Yeoman
  • Semplificare i test cross-browser e cross-device con Mini Mobile Device Lab
  • Scegli l'emulazione in modo intelligente utilizzando l'emulazione di Chrome DevTools, gli emulatori di stock, gli emulatori basati su cloud come Saucelabs, Browserstack, appexperience e l'emulatore di terze parti Genymotion
  • I test su dispositivi mobili non significano solo testare la connessione Wi-Fi; puoi utilizzare un proxy per simulare velocità di rete inferiori

Connettività di rete: facoltativa di Jake Archibald

Abbiamo imparato molte cose da questo discorso: Jake non indossa scarpe durante le presentazioni; Business Kinlan ha un nuovo libro in uscita a breve; la modalità offline è presa sul serio dai fornitori di browser e presto avrai a disposizione gli strumenti che ti aiuteranno a creare esperienze straordinarie che funzionano bene quando sei offline.

ServiceWorker ci darà la flessibilità necessaria per creare facilmente esperienze offline efficaci e senza subire gli inconvenienti causati da AppCache. Puoi persino sperimentare con l'API utilizzando un Polyfill.

Presentazioni: Connettività di rete: facoltativa

Service worker in soccorso

  • Nella prossima generazione di miglioramenti progressivi, trattiamo la rete come un potenziale miglioramento
  • ServiceWorker ti offre un controllo completo, eseguibile tramite script e di cui è possibile eseguire il debug sulle richieste di rete
  • Se disponi di un'esperienza offline, non aspettare che la rete smetta di funzionare prima di visualizzarla, poiché l'operazione potrebbe richiedere del tempo.