Web design responsivo (RWD) normalmente usa consultas de mídia CSS3 para ajustar o layout de uma página da Web com base no tamanho da área de visualização do usuário.
Você usa o mesmo HTML para exibir um layout de página da Web diferente para desktops, tablets, dispositivos móveis, TVs etc.
Vantagens do Web Design Responsivo
- Paridade de conteúdo: seu site contém o mesmo conteúdo e marcação HTML, independentemente do dispositivo usado, proporcionando aos usuários uma experiência semelhante. Isso crescerá em importância à medida que mais pessoas confiam em seus smartphones como seu principal meio de acesso à Web.
- Um único URL para páginas da web: isso facilita o compartilhamento e o link para seu conteúdo.
Nenhum redirecionamento é necessário para levar os dispositivos à visualização otimizada (em comparação com um site móvel dedicado).
Desvantagens do Web Design Responsivo
- O conteúdo não será totalmente otimizado para dispositivos móveis: a menos que você use uma abordagem que prioriza dispositivos móveis , suas páginas da Web conterão as mesmas informações que suas contrapartes para computadores. Compare isso com um site móvel separado, onde você poderia personalizar o conteúdo de uma página da Web apenas para usuários móveis.
- Desempenho mais lento: a página da Web média hoje é de cerca de 1,3 MB, de acordo com dados de janeiro de 2013 do HTTP Archive. É possível evitar downloads desnecessários ao usar o RWD, mas, na prática, a maioria dos sites de web design responsivos são do mesmo tamanho ou maiores.
86% dos sites testados pelo pesquisador de desempenho móvel Guy Podjarny eram iguais ou maiores em tamanho, conforme relatado em uma apresentação sobre o desempenho do site móvel .
- Pode ser mais difícil navegar no site: os usuários de dispositivos móveis geralmente desejam realizar tarefas diferentes dos usuários de desktop. Eles também podem estar mais acostumados a padrões de design de interface do usuário específicos para dispositivos móveis . A menos que você personalize a estrutura de navegação para cada dispositivo, pode haver problemas de usabilidade.
Exemplos de Web Design Responsivo
Starbucks
O site da Starbucks é um excelente exemplo que mostra os prós e contras do web design responsivo.
Todo o seu conteúdo é acessível em dispositivos móveis, cada página usa a mesma URL e não há redirecionamento. Infelizmente, o site deles é um download pesado (cerca de 15 segundos em um smartphone 3G) e há muita rolagem necessária para ler uma página da web inteira. Resultados de desempenho:
- Tempo médio de carregamento: 14,99 segundos
- Tamanho médio da página: 1.193,88 KB
- Número de solicitações HTTP: 142
World Wildlife Fund
O site do World Wildlife Fund é uma boa implementação de web design responsivo.
A navegação é otimizada para tarefas móveis. No entanto, o tempo de carregamento é um pouco lento em um smartphone 3G (demora cerca de 7 segundos). Além disso, algumas páginas internas (por exemplo, seu formulário de adoção ) não foram otimizadas para dispositivos móveis e são difíceis de usar no meu dispositivo móvel.
Resultados de desempenho:
- Tempo médio de carregamento: 6,91 segundos
- Tamanho médio da página: 885,97 KB
- Número de solicitações HTTP: 72
O Boston Globe
O site do Boston Globe é sem dúvida uma das melhores implementações de RWD para um site de grande escala. O site usa imagens responsivas e otimiza o JavaScript para não prejudicar o desempenho em dispositivos móveis. Resultados de desempenho:
- Tempo médio de carregamento: 5,55 segundos
- Tamanho médio da página: 605,27 KB
- Número de solicitações HTTP: 87