A Chrome Dev Summit foi concluída há algumas semanas, e esta é a primeira de uma série de relatórios sobre o evento. Houve uma grande ênfase no desenvolvimento móvel e entre dispositivos, então vamos começar com isso.
Melhores padrões de UX para apps da Web para dispositivos móveis por Paul Kinlan
Após uma análise da compatibilidade com dispositivos móveis dos mil principais sites, encontramos algumas áreas problemáticas: 53% ainda oferecem apenas uma experiência para computadores, 82% dos sites têm problemas com a interatividade em dispositivos móveis e 64% dos sites têm textos que os usuários terão dificuldade de ler.
Hits rápidos para melhorar consideravelmente sua experiência na Web para dispositivos móveis
- Sempre definir uma janela de visualização
- Ajustar o conteúdo na janela de visualização
- Mantenha o tamanho da fonte em um nível legível
- Limitar o uso de fontes da Web
- Dimensione e espaçar os pontos 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 se seu site é otimizado para dispositivos móveis. Ele ajudará você a encontrar problemas comuns na experiência do usuário em dispositivos móveis do seu site. Não deixe de conferir!
Apresentações: Melhores padrões de UX em apps da Web para dispositivos móveis
Acessibilidade multidispositivo, de Alice Boxhall
Os usuários vão acessar seus sites e serviços em uma grande variedade de dispositivos com diferentes requisitos de acessibilidade. Ao usar os elementos semânticos e funções ARIA corretos, você ajuda a dar ao navegador e à tecnologia assistiva uma melhor compreensão da sua página.
Apresentações: Acessibilidade multidispositivo
Principais formas de entender e resolver problemas de acessibilidade
- Garantir uma boa experiência do usuário que use apenas o teclado
- Expresse a semântica da sua interface com a escolha de elemento correta e ARIA
- Use o ChromeVox no computador e o TalkBack no Android para fazer testes.
- Teste a extensão do Chrome "Ferramentas para desenvolvedores de acessibilidade"
- Um público mais diversificado está ficando on-line, o que aumenta ainda mais a necessidade de tornar seus sites acessíveis
Crie apps para dispositivos móveis usando o Chrome WebView por Matt Guant
Todos nós conhecemos os problemas que os desenvolvedores tiveram no passado ao criar o WebView: recursos HTML5 limitados, ferramentas de depuração e ferramentas de compilação não disponíveis. Com a introdução de um WebView com a tecnologia do Chromium no Android 4.4 (KitKat), os desenvolvedores agora têm uma grande variedade de novas ferramentas para criar ótimos apps nativos usando o WebView.
A WebView é compatível com a depuração remota completa com as mesmas ferramentas que você usa para o Chrome. Você também pode integrar seu fluxo de trabalho confiável de desenvolvimento da Web com o Grunt às ferramentas de pilha nativas via Gradle. Em meio à fusão de mundos, há um truque inteligente para usar o Chrome DevTools para testar seu código nativo em JavaScript.
Apresentações: Criar apps para dispositivos móveis usando o Chrome WebView
Aprendizados eficazes do desenvolvimento de WebView
- Não são os novos recursos que importam, mas as ferramentas que agora você pode usar para acelerar seu fluxo de trabalho.
- Não tente emular a interface nativa. Mas lembre-se de remover algumas das sinalizações de que se trata de conteúdo da web.
- Use implementações nativas de recursos quando apropriado. Ou seja, use o DownloadManager em vez do XHR para arquivos grandes.
Como otimizar seu fluxo de trabalho em um mundo entre dispositivos, por Matt Gaunt
Se temos que desenvolver para computador, celular, tablet, wearables e outros formatos, como você pode otimizar seu fluxo de trabalho para tornar sua vida menos estressante? Há uma abordagem sólida para vários dispositivos para iteração rápida com o LiveReload, Grunt, Yeoman e o recém-lançado Mini Mobile Device Lab. Por fim, se você não tem o hardware físico que quer testar, alguns provedores o disponibilizam na nuvem.
Apresentações: como otimizar o fluxo de trabalho para um mundo entre dispositivos
Pontos principais
- O número de dispositivos que vamos ter para atender só vai aumentar
- Como ter o fluxo de trabalho certo com Grunt e Yeoman
- Simplifique os testes entre navegadores e dispositivos com o Mini Mobile Device Lab
- Escolha de maneira inteligente sua emulação usando a emulação do Chrome DevTools, os emuladores do Stock, os emuladores baseados na nuvem, como o Saucelabs, o Browserstack, o appexperience e o Genymotion de terceiros.
- O teste de dispositivos móveis é mais do que apenas testar a 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 lançou um novo livro em breve. O modo off-line está sendo levado a sério pelos fornecedores de navegadores, e em breve você terá as ferramentas que ajudam a criar ótimas experiências que funcionam bem quando você está off-line.
O ServiceWorker vai oferecer a flexibilidade necessária para criar experiências off-line envolventes com facilidade, sem os problemas causados pelo AppCache. Você pode até fazer testes com a API usando um Polyfill.
Apresentações: Conectividade de rede: opcional
ServiceWorker ao resgate
- Na próxima geração de aprimoramento progressivo, tratamos a rede como um aprimoramento potencial
- O ServiceWorker oferece controle total, programável e depurável sobre as solicitações de rede
- Se você tem uma experiência off-line, não espere a rede falhar para mostrá-la, já que isso pode levar mais tempo.