BT

Disseminando conhecimento e inovação em desenvolvimento de software corporativo.

Contribuir

Tópicos

Escolha a região

Início Notícias Guias para o design de websites responsivos

Guias para o design de websites responsivos

Favoritos

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.

Avalie esse artigo

Relevância
Estilo/Redação

Conteúdo educacional

BT