BT

Guias para o design de websites responsivos

| por Abel Avram Seguir 11 Seguidores , traduzido por André Dias Seguir 0 Seguidores em 06 out 2014. Tempo estimado de leitura: 2 minutos |

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

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

Dê sua opinião

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão
Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

Dê sua opinião

Faça seu login para melhorar sua experiência com o InfoQ e ter acesso a funcionalidades exclusivas


Esqueci minha senha

Follow

Siga seus tópicos e editores favoritos

Acompanhe e seja notificados sobre as mais importantes novidades do mundo do desenvolvimento de software.

Like

Mais interação, mais personalização

Crie seu próprio feed de novidades escolhendo os tópicos e pessoas que você gostaria de acompanhar.

Notifications

Fique por dentro das novidades!

Configure as notificações e acompanhe as novidades relacionada a tópicos, conteúdos e pessoas de seu interesse

BT