Dicas para desenvolvimento de sites responsivo

Atualmente um dos termos mais populares no desenvolvimento de sites é o layout responsivo. Porém, o que realmente é um layout responsivo? Qual a sua utilidade e benefícios? Daqui para frente pretendo abordar o assunto de uma forma simples e objetiva como também abordando um pouco da área técnica.

O que é layout responsivo?

Design responsivo nada mais é do que uma estrutura de um website flexível as diversas resoluções de dispositivos digitais com acesso à internet capazes de visualizarem sua página. Passando de computadores, notebooks, smartphones, tablets e agora as smart tv.

Consiste, basicamente, na previsão do design para essas resoluções dentro do projeto de diagramação de conteúdo do site. Posteriormente, já no desenvolvimento, o jeito mais simples de aplicarmos isso ao resultado final é utilizando apenas estrutura CSS com “media queries” e “sprite”.

Lembrando que este não é a única forma de produzir uma página com layout responsivo, porém é a qual eu acredito ser a ideal atualmente.

Por onde começar?

Tudo começa na diagramação do conteúdo, basicamente do “mock up” do layout, quando estiver desenhando o “wireframe” do projeto. Muitos dizem, especificamente tratando-se de layout responsivo, que o ideal seria pensar primeiramente no “mobile” e posteriormente no desktop. Na minha opinião é indiferente.

Desde sempre acabei por optar em desenvolver sites com estrutura de grade fixa, ou seja, largura fixa através de uma resolução mínima. Atualmente, quando o projeto incluí o layout responsivo, o que muda é que existem várias resoluções mínimas para fixar a largura da página, basicamente esse é o pensamento.

Veja dois rascunhos abaixo, um para modelo desktop, utilizando uma grade de largura fixa na faixa de 1000 pixles (não é incomum desenvolvedores adotarem algo entre 950/980 pixels para layouts não responsivo, sendo como base a resolução mínima de 1024x768px).

Mock up para Design Responsivo Desktop

Wire Frame para Design Responsivo Desktop

Em seguida o mesmo ideal diagramado em uma tela de smartphone (320x480px).

Mock up para Design Responsivo para Smartphone

Wire Frame para Design Responsivo para Smartphone

Atualmente no projeto final, acabo optando por cinco modelos de resolução mínima

• 320 pixels - Smartphones retrato
• 480 pixels - Smartphones paisagem
• 768 pixels - Tablets retrato
• 960 pixels - Tablets paisagem
• 1024 ou 1280 pixels - Desktops e notebooks em geral

Lembrando que essa definição pode mudar de acordo com seu foco e projeto. Também existem muitos trabalhos com “grids” complexos, porém o resultado é extremamente semelhante.

Qual a utilidade e benefícios?

As vantagens podem ser classificadas em ordens diferentes de acordo com as prioridades de cada projeto, mas basicamente trata-se do alcance digital do site e da manutenção mais rígida de sua identidade visual. Projetos de sites com versão “mobile” (não responsivo, ou seja, um segundo site projetado para dispositivos móveis) quase sempre acabam sendo feitos de forma distinta, perdendo bastante o foco da identidade visual.

Uma identidade visual uniforme, acaba tornando a usabilidade mais fácil para um site em suas diferentes experiências por qualquer que seja o dispositivo de acesso. Isso acaba sendo de grande utilidade para empresas que buscam grande engajamento com os usuários.

Dicas

Procure trabalhar com layout de colunas com números múltiplos. Ex.: 4 - 2 - 1 (quatro colunas para desktop, 2 colunas para tablets e uma coluna para smartphone). Evite por exemplo trabalhar com 3 - 2 - 1, isso vai facilitar o seu trabalho de css, evitando chegar a regras de css mais complexas.

Utilize técnicas de CSS sprite para itens do tipo "ícones", "sombras" ou "efeitos visuais" no site. Vai otimizar a velocidade de carregamento em qualquer situação, principalmente quando necessário rede móvel de internet no dispositivo.

Buscar ao máximo a manutenção da identidade visual. Nesse quesito, quase sempre o item que sofre mais é o menu de navegação. Atente que existem certos padrões de navegação bem inseridos no cotidiano de usuários que utilizam smartphones e tablets para navegar, como clicar em um ícone que arrasta todo layout horizontalmente abrindo um menu de navegação vertical. Utilize pensamentos com esse tipo de lógica sem esquecer de manter o padrão visual.

Considerações

Pensando na questão de imagens, acabo por optar pelo processo criativo do “maior para o menor”. Penso no site para desktop para depois projetar suas versões para resoluções inferiores. Atualmente com monitores FullHD, 2k e Retina, já é mais comum acessarmos layouts com foco em grandes imagens e textos com tamanhos de fonte ampliados, pois estes equipamentos possuem uma densidade de pixels maior e necessitam de tipografia e imagens com mais resolução. Outro argumento é que os browsers tem respondido bem a renderização de imagens redimensionadas dentro de boxes, por isso eu prefiro projetar as imagems grandes e ir redimensionando elas com css para demais variações no layout.

Para você que já realiza trabalhos com layout responsivo, está começando nessa área ou simplesmente quer verificar como está o seu site em relação a layout responsivo recomendo o a ferramenta online e gratuita “Viewport Resizer”.

Passado mais de um ano de estudos e produções ainda nos bastidores do desenvolvimento responsivo, o site da agência ainda não passou por reformulação completa, mas você já pode encontrar layout responsivo em nosso portfólio.

Dúvidas, sugestões, dicas e críticas são bem vindas nos comentários.