Web Design Responsivo — O Que É e Como Usá-lo

Hoje em dia, todas as empresas desejam uma versão responsiva de seu site. É praticamento obrigatório, afinal, um design para computador, tablet, smartphones, smart TVs, Kindle e todas as outras resoluções disponíveis também devem ser compatíveis.

Na área de design e programação web, estamos rapidamente chegando ao ponto de não conseguirmos acompanhar todas as novas resoluções de telas e dispositivos. Para muitos websites, a criação de uma versão para cada resolução existente seria impossível ou pelo menos impraticável. Mas qual seria a OUTRA opção?

O que é Web Design Responsivo?

É uma prática que sugere que o design e a programação devem responder ao comportamento e ao ambiente do usuário com base no tamanho, plataforma e orientação da tela do mesmo. Conteúdo e desempenho também são necessários em todos os dispositivos para garantir usabilidade e satisfação com um design web responsivo.

A prática consiste em uma combinação de grids, imagens e layouts flexíveis, e um uso inteligente de CSS Medias Queries¹. No momento que o usuário muda do computador para um tablet, ou um smartphone, o site deve se ajustar automaticamente para “encaixar” na resolução, ajustando também o tamanho de imagens e módulos de scripts. Isso eliminaria a necessidade de uma versão diferente de design e programação para cada novo dispositivo do mercado.

Vamos pensar em um site “fixo” tradicional. Quando visualizado em um computador, por exemplo, o site pode mostrar três colunas de conteúdo. Mas quando você visualiza o mesmo layout em um tablet, com menor resolução, isso pode força-lo a rolar horizontalmente, algo que os usuários não gostam, ou os elementos podem ficar ocultos ou parecer distorcidos.

Como funciona o Web Design Responsivo?

Fácil. Funciona através do CSS (Cascading Style Sheets), usando várias configurações para atender diferentes propriedades de estilo, dependendo do tamanho da tela, orientação, resolução, capacidade de cor e outras características do dispositivo do usuário.

Sites responsivos também usam fluid grids². Todos os elementos da página são dimensionados por proporção, em vez de pixels. Portanto, se você tiver três colunas, não diria exatamente o tamanho de cada uma, mas a largura delas em relação às outras colunas. A coluna 1 deve ocupar metade da página, a coluna 2 deve ocupar 30% e a coluna 3 deve ocupar 20%, por exemplo.

Ajustando a Resolução da Tela

Com mais dispositivos no mercado, vêm mais resoluções e orientações de tela variadas. Alguns estão na “paisagem”, outros no “retrato”, outros ainda completamente “quadrados”. Como todos sabem pela crescente e infinita popularidade dos smartphones, muitos usuários podem mudar de “retrato” para “paisagem” conforme sua vontade.

E a questão provavelmente mais importante, é considerar também as centenas de tamanhos de telas diferentes. Claro, conseguimos agrupar as mesmas em categorias principais, pensar no design para cada um deles e tornar tão flexível quanto necessário. Mas isso pode ser trabalhoso e cansativo, e quem sabe como vai ser os números de telas daqui uns cinco anos? Além disso, muitos usuários nem maximizam seus navegadores, o que deixa muito espaço para a variedade de tamanhos de telas.

Criando Experiências Eficazes

O design e a programação do site precisam trabalhar em conjunto para garantir uma experiencia eficaz em todos os dispositivos. Um design responsivo geralmente se resume em resolver um quebra-cabeça, como reorganizar elementos em telas maiores para “caber” em páginas mais finas e longas ou vice-versa.

Quando os elementos “se movem” pela página, a experiência do usuário pode ser completamente diferente de uma tela para a outra. Por isso o trabalho conjunto do design com a programação web deve ser conjunto, não apenas para determinar como o conteúdo deve ser organizado, mas também para ver como o resultado final desses ajustes afetam a experiência do usuário.

Muitos desenvolvedores recorrem a estruturas populares de web design responsivo, como o Bootstrap, para ajudar a criar layouts. Essas mesmas podem ser de grande ajuda para acelerar o desenvolvimento. Sempre recomendamos a realização de testes de usabilidade em nossos projetos, também testes em várias plataformas.

Outras Questões

• Mouse VS Touch: O design para dispositivos móveis também traz a questão do mouse contra o touch. Em computadores, o usuário normalmente possui um mouse para navegar e selecionar itens. Em um smartphone ou tablet, o usuário geralmente usa os dedos e toca na tela. O que pode parecer fácil de selecionar com um mouse, pode ser difícil de selecionar com um dedo em um pequeno ponto na tela. Na hora de desenhar um layout, deve levar em consideração o toque.
• Mídias e velocidade: Em dispositivos móveis, pode ser um bom conselho exibir menos mídias, para que o site não demore uma eternidade para carregar no smartphone.

Meu site é responsivo?

Você pode ver rapidamente se o seu website é responsivo diretamente no seu navegador.

• Abra o Google Chrome
• Acesse o seu site
• Pressione “Ctrl + Shift + I” para abrir as Ferramentas de Desenvolvedor do Chrome
• Pressione “Ctrl + Shift + M” para alternar a visualização do dispositivo.
• Visualize sua página para celular, tablet ou computador.

Você também pode usar ferramentas gratuitas, como Teste de compatibilidade com dispositivos móveis do Google, para verificar se as páginas do seu site são compatíveis com dispositivos móveis. Embora você possa alcançar a compatibilidade com dispositivos móveis com outras abordagens de design, como o design adaptável, o web design responsivo é o mais comum devido às suas vantagens.

Conclusão

O design responsivo é uma prática, não a solução completa. Embora o uso do design responsivo tenha muitas vantagens ao planejar um website para vários dispositivos, o uso da técnica não garante uma experiência eficaz. Os desenvolvedores devem se concentrar nos detalhes do conteúdo, design e desempenho para oferecer um suporte completo aos usuário em todos os dispositivos.

1. CSS Medias Queries: Módulo do CSS3 que permite que a renderização de conteúdo se adapte a condições como resolução de tela.
2. Fluid Grids: Grade de colunas que se moldam conforme o tamanho da tela, normalmente calculado com 12 colunas.