Esta notícia inclui diversos guias de boas práticas para a criação de websites voltados aos diversos tamanhos de telas e formulários existentes no mercado.
Durante o evento QA TechWeek deste ano, David Walker, diretor de tecnologia da empresa QA apresentou alguns guias de boas práticas (guidelines) para a criação de Websites Responsivos durante a sessão Going Responsive com Foundation. Walker mencionou várias formas de criar sites para aplicações móveis partindo de uma aplicação desktop existente: Aplicação Nativa - uma para cada Sistema Operacional móvel, com HTML5 embarcado - utilizando PhoneGap ou outro similar, filtrando informações no servidor - separação de websites entre desktops e dispositivos móveis com redirecionamentos entre as duas pontas.
Após demonstrar os prós e contras de cada um desses métodos, Walker introduziu o conceito de Design Responsivo de Websites (Responsive Website Design - RWD) que envolve a criação de web sites simples cujo layout, formato e conteúdo são ajustados em tempo de execução para o dispositivo que o acessa utilizando HTML5, JavaScript e CSS. Os principais benefícios do RWD são: redução de duplicação de conteúdo; ter o website preparado a quaisquer tipos de dispositivos; e tamanho de telas existentes, incluindo os novos tamanhos que possam surgir no mercado. Dentre os pontos contra dessa abordagem, ele destacou: a necessidade de excelentes conhecimentos técnicos de CSS e JavaScript; além disso, alguns recursos podem ser muito grandes para alguns dispositivos móveis, e RWD requer retro compatibilidade para browsers antigos.
Para viabilizar a criação de um design responsivo, Walker sugeriu os seguintes guidelines:
- Criando um layout fluído. Todas as larguras dos containers devem ser definidas como percentuais do browser utilizado;
- Utilizando CSS3 Media Queries. Diferentes estilos são aplicados a diferentes tipos de mídia - telas, impressões, TV, etc. - e parâmetros destas mídias - largura, altura, cor, resolução, etc;
- Utilizando imagens fluídas. O tamanho da imagem deve ser ajustado, sendo não ultrapassando a largura máxima do display.
Para decidir que estilo utilizar para cada tipo de mídia é necessário estabelecer quais as diferentes larguras de display que requerem diferentes estilos. Por exemplo, www.time.com utiliza até 40 estilos diferentes associados a media queries. Eles podem ser visualizados com o Responsive Inspector, uma extensão do Chrome. Utilizando todos estes estilos, o conteúdo do site time.com é redesenhado conforme o tipo de navegador e é apresentado em dispositivos com diferentes larguras sem a necessidade barra de rolagem horizontal na página.
De acordo com Walker, para a realização de RWD é necessário também levar em consideração os seguintes pontos:
- Otimização de imagens para diferentes dispositivos e velocidades de conexão;
- Mudança de padrões de navegação para interfaces e interação de usuários em dispositivos móveis (UI - User Interface / UX - User Experience);
- Reestilização de links e botões que funciona com toque;
- Redimensionamento dinâmico de fontes se ajustam as diferentes resoluções de telas existentes;
- Carregamento de conteúdo sob demanda, não ocultando-o da tela posteriormente;
- Disponibilizar versões de gráficos para resolução de telas de retina.
Walker também demonstrou como criar sites responsivos com Foundation, o framework responsivo de código aberto. Outra solução similar é o conhecido Bootstrap, um framework inicialmente desenvolvido pelo Twitter.