Responsive design
O que é responsive design ou design responsivo?
O responsive design, também conhecido como design responsivo, é uma técnica de web design criada para exibir conteúdo igualmente, independentemente do tamanho da tela em que está sendo visto.
O objetivo é criar conteúdo que irá se adaptar automaticamente a diferentes tipos de telas e plataformas (computadores desktop, laptops, tablets, celulares, televisores, etc.)
Do mesmo modo, no email marketing também se fala de responsive design em relação à correta visualização das campanhas de email marketing nos diferentes dispositivos em que os assinantes podem abrir as newsletters.
1. Web design responsive e web design adaptável
Muitas vezes, web design responsive e web design adaptável se confundem, pois ambos buscam oferecer uma boa visualização dos sites em qualquer circunstância, mas não são a mesma coisa.
O web design responsive é uma técnica para desenvolver interfaces que usam media queries e folhas de estilo, a fim de ajustar automaticamente, de forma proporcional, a maneira como o conteúdo de um site é visualizado em diferentes resoluções.
Funciona de maneira percentual, com base nas porcentagens do espaço de tela disponível e, é claro, na resolução exigida.
Por outro lado, o web design adaptável funciona com base no uso de tamanhos de tela pré-estabelecidos: 320px, 480px, 760px, 960px, 1200px, etc.
É criado um design para cada um dos tamanhos, de modo que, ao identificar o tipo de dispositivo usado, o design apropriado seja escolhido, entre as opções disponíveis. Funciona com medidas fixas, não com base em tamanhos percentuais.
2. Vantagens do responsive design
O auge dos smartphones e tablets torna vital que qualquer conteúdo consumido a partir desses dispositivos seja exibido corretamente, por isso é de vital importância usar o responsive design.
Além disso, oferece uma série de vantagens em comparação com designs não responsivos. Essas vantagens incluem:
- Melhora a experiência dos usuários. Quem visitar o conteúdo terá uma experiência de usuário unificada, independente do tipo de dispositivo que utilize e se posteriormente acessar por outro, não perceberá alterações relevantes.
- Adeus ao conteúdo duplicado. Não é mais necessário ter uma versão específica para quem acessa o site pelo celular e, com isso, conteúdo duplicado (o SEO do seu site agradece). A versão responsive é uma só.
- Economia de custos de manutenção e desenvolvimento web. Essa vantagem é óbvia: como só é necessário manter uma versão do site, o custo de manutenção é reduzido em comparação a ter versões para cada tipo de dispositivo.
- Melhora o SEO. A velocidade de carregamento do site melhora e, como os visitantes têm uma melhor visualização do conteúdo, o tempo médio da visita tende a ser maior, o que impulsiona positivamente o posicionamento do site responsive.
- Aumenta as opções de viralidade. A maior parte do tráfego web vem de dispositivos móveis, onde estão instalados os diferentes aplicativos de redes sociais. Portanto, graças ao design responsive e ao seu excelente comportamento em dispositivos móveis, os usuários estarão mais dispostos a compartilhar o conteúdo que é exibido de maneira correta e atraente.
3. Características de um design responsive
O responsive design surgiu em 2010, quando o designer gráfico Ethan Marcotte usou HTML e CSS para criar um site responsive.
Só alguns anos depois, em 2013, seu uso começou a se generalizar para dar conta da enorme quantidade de tráfego web gerado a partir de celulares.
Os designs precisam ter uma série de características para serem considerados responsive:
- Adaptar-se à largura do dispositivo, de forma correta e instantânea.
- Usar media-queries de CSS3.
- Oferecer o conteúdo e as imagens ao visitante com fluidez total.
- Ser capaz de reorganizar os elementos do site para layouts horizontais e verticais.
- Se necessário, alterar a aparência de certos elementos e até removê-los.
- Evitar a existência de conteúdo duplicado.
- Compensar o tamanho e o espaçamento dos tipos de letra para uma melhor legibilidade.
- Facilitar ao visitante o compartilhamento rápido do conteúdo.