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.
Desejo receber orientações de como melhorar meu site