O Chrome Dev Summit terminou há algumas semanas, e este é o primeiro de uma série de relatórios do evento. Houve uma grande ênfase no desenvolvimento para dispositivos móveis e multiplataforma, então vamos começar por aí.
Melhores padrões de UX para apps da Web para dispositivos móveis, por Paul Kinlan
Depois de analisar a compatibilidade com dispositivos móveis dos 1.000 sites mais acessados, encontramos alguns problemas: 53% ainda oferecem apenas uma experiência para computadores, 82% dos sites têm problemas de interatividade em dispositivos móveis e 64% têm textos que os usuários não conseguem ler.
Dicas rápidas para melhorar drasticamente sua experiência na Web para dispositivos móveis
- Sempre defina uma janela de visualização
- Ajustar o conteúdo dentro da janela de visualização
- Mantenha o tamanho da fonte em um nível legível
- Limitar o uso de fontes da Web
- Dimensionar e distribuir as áreas de toque adequadamente
- Usar os tipos semânticos para elementos de entrada
O PageSpeed Insights acaba de lançar uma análise de UX para determinar a compatibilidade com dispositivos móveis do seu site. Ela vai ajudar você a encontrar problemas comuns na UX para dispositivos móveis dos seus sites. Faça um teste
Slides: Melhores padrões de UX para apps da Web para dispositivos móveis
Acessibilidade em vários dispositivos por Alice Boxhall
Os usuários vão acessar seus sites e serviços em vários dispositivos com uma ampla variedade de requisitos de acessibilidade. Ao usar os elementos semânticos e as funções ARIA corretas, você ajuda o navegador e a tecnologia adaptativa a entender melhor sua página.
Apresentações: acessibilidade em vários dispositivos
Principais maneiras de entender e resolver problemas do a11y
- Garantir uma boa experiência do usuário somente com teclado
- Expressar a semântica da interface com a escolha correta de elementos e ARIA
- Use o ChromeVox no computador e o TalkBack no Android para testar.
- Teste a extensão das Ferramentas para desenvolvedores de acessibilidade do Chrome.
- Um público mais diversificado está on-line, o que aumenta ainda mais a necessidade de tornar seus sites acessíveis.
Criar apps para dispositivos móveis usando a WebView do Chrome por Matt Guant
Todos nós conhecemos os problemas que os desenvolvedores tiveram no desenvolvimento para a WebView: recursos limitados do HTML5, sem ferramentas de depuração e sem ferramentas de build. Com a introdução de uma WebView com tecnologia do Chromium no Android 4.4 (KitKat), os desenvolvedores agora têm uma grande variedade de novas ferramentas à disposição para criar apps nativos incríveis usando a WebView.
A WebView oferece suporte à depuração remota completa com as mesmas ferramentas usadas no Chrome. Você também pode usar seu fluxo de trabalho de desenvolvimento da Web confiável com o Grunt e integrá-lo às ferramentas de pilha nativa pelo Gradle. Além disso, há um truque inteligente para usar o Chrome DevTools para testar seu código nativo do JavaScript.
Slides: Crie apps para dispositivos móveis usando a WebView do Chrome
Pontos importantes do desenvolvimento eficaz da WebView
- Não são os novos recursos que são importantes, mas as ferramentas que você pode usar para acelerar seu fluxo de trabalho
- Não tente emular a interface nativa. Mas remova alguns dos sinais de que é conteúdo da Web.
- Use implementações nativas de recursos quando apropriado. ou seja, use o DownloadManager em vez de XHR para arquivos grandes.
Como otimizar seu fluxo de trabalho para um mundo com vários dispositivos, por Matt Gaunt
Se você precisa desenvolver para computador, dispositivos móveis, tablets, wearables e outros formatos, como otimizar seu fluxo de trabalho para tornar sua vida menos estressante? Há uma abordagem sólida para vários dispositivos para iterações rápidas com o LiveReload, Grunt, Yeoman e o recém-lançado Mini Mobile Device Lab. Por fim, se você não tiver o hardware físico que quer testar, alguns provedores disponibilizam o hardware na nuvem.
Slides: Optimizing your Workflow for a Cross-device world
Pontos principais
- O número de dispositivos que vamos atender só vai aumentar.
- Como configurar seu fluxo de trabalho com o Grunt e o Yeoman
- Simplifique os testes entre navegadores e dispositivos com o Mini Mobile Device Lab.
- Escolha a emulação certa usando a emulação do Chrome DevTools, emuladores padrão e emuladores baseados em nuvem, como Saucelabs, Browserstack e appexperience, além do emulador de terceiros Genymotion.
- O teste em dispositivos móveis significa mais do que apenas testar sua conexão Wi-Fi. Use um proxy para simular velocidades de rede mais lentas.
Conectividade de rede: opcional por Jake Archibald
Aprendemos muitas coisas com essa palestra: Jake não usa sapatos ao apresentar; Business Kinlan tem um novo livro que será lançado em breve; o modo off-line é levado a sério pelos fornecedores de navegadores, e você terá em breve as ferramentas necessárias para criar experiências incríveis que funcionam bem quando você está off-line.
O ServiceWorker vai nos dar a flexibilidade necessária para criar experiências atraentes off-line com facilidade e não sofrer com as dificuldades causadas pelo AppCache. Você pode até testar a API usando um Polyfill.
Apresentações: conectividade de rede: opcional
ServiceWorker para ajudar
- Na próxima geração de melhoria progressiva, tratamos a rede como uma melhoria potencial
- O ServiceWorker oferece controle total, com script e debugável, sobre as solicitações de rede
- Se você tiver uma experiência off-line, não espere a rede falhar antes de mostrar, porque isso pode levar muito tempo.