A Google acaba de publicar uma série de guias e códigos de referência para criação de websites responsivos e multiplataforma.
Ciente dos desafios encontrados por desenvolvedores dada a existência de uma grande variedade de dispositivos, especialmente móveis, a Google acaba de publicar o Web Fundamentals, um conjunto de guias e melhores práticas para desenvolvimentos web modernos. O Web Fundamentals inclui orientações com exemplos de código em HTML, CSS e JavaScript para as seguintes áreas:
- Ferramentas - Selecionar um editor, configurar ferramentas de desenvolvimento, configurar um processo de build, depuração com Chrome Dev Tools, testar nos dispositivos, no emulador e na nuvem, entre outros.
- Layout - A Google recomenda projetos de websites responsivos usando CSS3 Media Queries com múltiplos pontos de quebra para diferentes tamanhos de monitores, padrões para websites responsivos - Fluid Layout, Column Drop, Layout Shifter, Off Canvas - além de padrões para navegação e tomadas de ação - App, Tab e Bottom Bars, Navigation Drawer.
- Formulários e Entrada de dados - Escolher formulários que funcionem em dispositivos móveis, lidar com validações em tempo real, lidar com toques e implementar gestos customizados.
- Imagens, Áudio e Vídeo - Orientações para usar a tag <img>, fundos CSS, SVG para ícones, problemas de desempenho com imagens, lidar com vídeos, plataforma legadas, problemas com acessibilidade, etc.
- Performance - Otimizar o Critical Rendering Path (Caminho crítico de renderização), usar o PageSpeed, ajustar o desempenho de conteúdo eliminando downloads desnecessários, otimizar o encoding e imagens, usar o caching HTTP, entre outros.
- Sensores e Capacidades de Dispositivos - Orientação sobre como acessar localização do usuário, orientação e movimento do dispositivo, fazer chamadas.
Além dos guias, a Google está disponibilizando o Web Starter Kit (WSK), um pacote com códigos prontos e ferramentas para criar websites multi-dispositivos. Inspirado no Mobile Boilerplate, o Web Starter Kit inclui código para páginas HTML de dispositivos móveis, layout responsivo, um guia de estilo de componentes visuais e a ferramenta opcional de build gulp.js.
O WSK funciona nas duas últimas versões do Chrome, Firefox, Safari, Opera, IE 10 e 11, mas também nos navegadores de dispositivos móveis Android, iOS, Windows Phone e Blackberry.
Tanto os códigos relacionados ao Web Fundamentals como os códigos do Web Starter Kit são open source e estão disponíveis no GitHub.