Responsive design

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.)

Da mesma forma, no email marketing, também se fala em design responsivo sobre a visualização correta de campanhas de email marketing nos diferentes dispositivos nos quais os assinantes podem abrir os emails.

1. Web responsive design e web design adaptável

Muitas vezes, web responsive design 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 usem media queries e folhas de estilos, a fim de se auto-ajustar proporcionalmente a maneira como o conteúdo de um site é visualizado para 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

A ascensão de smartphones e tablets fez com que qualquer conteúdo consumido através destes dispositivos precise de instruções específicas de exibição; o responsive design desempenha um papel vital neste processo.

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.
• Você nunca mais precisará duplicar conteúdo. Não é mais necessário ter uma versão específica para quem acessa o site a partir de um dispositivo móvel e, assim, você não precisará publicar diferentes versões da mesma página (o SEO do seu site agradecerá). A versão responsive é uma só.
• Economia de custos de manutenção e desenvolvimento Web. Essa vantagem é óbvia, pois como você só precisa manter uma versão do site, o custo será reduzido.
• Melhora a estratégia de SEO. A velocidade de carregamento do site irá melhorar, os visitantes terão menos problemas de exibição, o que irá aumentar o tempo médio das visitas, afetando positivamente o posicionamento do site responsivo.
• Aumentar as opções de viralidade. A maior parte do tráfego Web chega a partir de dispositivos móveis, onde os diferentes aplicativos de mídia social são instalados. 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 responsive design

O responsive design foi criado em 2010, quando o designer gráfico Ethan Marcotte usou HTML e CSS para criar um site responsivo.

Mas apenas alguns anos depois, em 2013, começou a ser amplamente usado para resolver problemas de exibição de conteúdo, conforme mais e mais usuários acessavam a Internet a partir de dispositivos móveis.

O design precisa obedecer a uma série de regras e ter certas características para ser considerado responsive:

• O layout deve ser adaptado à largura do dispositivo, corretamente e instantaneamente.
• Usar media-queries de CSS3.
• Oferecer o conteúdo e as imagens ao visitante com fluidez total.
• Reorganizar os elementos da página para disposições 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 o compartilhamento do conteúdo rapidamente.