Design responsivo
Há pouco tempo atrás a internet era acessada basicamente através de um computador
pessoal ou desktop que contava com uma resolução ou tamanho de tela padrão
em sua grande maioria, então era só desenvolver um desenho que se enquadrasse
neste tamanho de tela e pronto, seu conteúdo estava acessível a todos os visitantes.
Porém, além dos computadores passarem a oferecer diversos tipos de monitores,
widescreen, HD, full HD, etc., também surgiram no mercado os tablets e smartphones
tornando a experiência de navegação de alguns sites praticamente nula quando
visualizados através destes dispositivos. E para complicar ainda mais hoje
já é possível navegar pela internet através do painel de seu automóvel, de
um ponto de acesso, um relógio, etc.
Esta nova realidade transformou a rotina dos desenvolvedores e webdesigners
que precisaram encontrar uma solução para que seus projetos, que além de atender
esta variedade de dispositivos pudessem garantir a adaptabilidade para os
novos que naturalmente viessem a surgir. Assim a partir de 2010, tendo como
marco inicial deste movimento o artigo de Ethan
Marcotte, “Responsive
Web Design” e principalmente com as possibilidades oferecidas pelo HTML
5.0 e o CSS 3.0, alterou-se a forma de desenvolvimento dos projetos web.
Veja nos exemplos abaixo o mesmo conteúdo apresentado nos diversos dispositivos
mantendo sempre a boa visualização dos elementos em uma experiência agradável
de navegação:
Muito além das aparências
A partir de Dezembro de 2014 o Google passou a dar preferência para resultados
que contemplem os diferentes dispositivos com foco em dispositivos móveis
(mobile). Abaixo trecho de matéria publicada em 18 de novembro de 2014 no
site para Desenvolvedores do Google (leia
matéria completa):
Você
já tocou em um resultado da Pesquisa Google no seu smartphone e acabou em
uma página com um texto pequeno demais e links minúsculos, precisando rolar
horizontalmente para ver todo o conteúdo? Isso geralmente acontece quando
o site não foi otimizado para visualização em um smartphone.
Essa experiência pode ser frustrante para os usuários que realizam pesquisas
para dispositivos móveis. A partir de hoje, para que as pessoas encontrem
as informações que estão procurando mais facilmente, haverá um rótulo "para
mobile" adicionado aos nossos resultados de pesquisa para dispositivos móveis.
Uma página estará qualificada para o rótulo "para mobile" se atender aos seguintes
critérios detectados pelo Googlebot:
- Evitar softwares que não sejam comuns em dispositivos móveis, como Flash;
- Usar textos que sejam legíveis sem aumentar o zoom;
- Dimensionar o conteúdo no tamanho da tela para que os usuários não precisem
rolar horizontalmente nem aplicar zoom;
- Posicionar os links afastados o suficiente para que se possa tocá-los com
facilidade.