O design adaptativo (design responsivo)

Os usuários que acessam a Internet por meio de tablets e celulares estão aumentando. Isso, como você já sabe, significa que não basta projetar uma boa página da web que fique bem em nosso computador: ela também deve ser vista em cada dispositivo móvel. O problema? Diferentes tamanhos e resoluções de tela. Por isso é tão difícil fazer um design que se adapte corretamente a todas as mídias (o famoso projeto ágil, traduzido como design adaptativo).

Aqui estão algumas dicas a serem lembradas ao fazer um design com essas características. Presta atenção!

Dicas para design adaptativo

1. Faça um modelo simplesPor simples, não quero dizer insípido. Estou falando sobre o estrutura HTML do seu site: quanto mais claro, melhor. Lembre-se de que uma tela de computador pode caber em três colunas verticais; na tela de um celular, você só vai caber um. Pense nisso e em como você reposicionará os elementos.
2. Elimine tudo desnecessárioEvite efeitos jQuery, animações em Flash e qualquer outro código que retarde o carregamento de sua página. Quanto menos conteúdo desse tipo você tiver, mais rápido a web carregará.
3. Defina um estilo css para cada "tamanho"Crie um tiny.css, small.css e big.css (por exemplo) que é executado com base no dispositivo em que é visualizado. Por exemplo:
   

   @import url (tiny.css) (largura mínima: 300px);

   @import url (small.css) (largura mínima: 600px);

   @import url (big.css) (largura mínima: 900px);

4. As resoluções mais usadas320 px / 480 px / 720 px / 768 px / 900 px / 1024 px
5. Torne o seu modelo FLEXÍVELSempre que puder, trabalhe com porcentagens em vez de valores fixos. Aqui estão algumas equivalências de referência: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Tipografia É mais importante do que nunca Às vezes, a tela do dispositivo pode ser tão pequena que tudo o que você vê é texto. É por isso que temos que selecionar com muito cuidado as melhores fontes em nosso site, para que quando forem reduzidas em tamanho não percam a legibilidade. Além disso, temos que saber combinar fontes mais neutras com outras com personalidade que dêem à web o caráter necessário. Portanto, a primeira dica é que você gaste tempo selecionando as fontes que vai usar.
7. Usar imagens de alta qualidadeÀ medida que o espaço é reduzido, as imagens o acompanharão. Selecione aqueles que não perdem qualidade quando reduzidos e que funcionam da mesma forma quando redimensionados. Uma imagem de baixa qualidade fará com que seu site fique ruim.
8. Que suas imagens sejam sempre vistas na íntegraEvite que suas fotos sejam cortadas adicionando o código img (largura: 100%;) em seu css. Desta forma, você está dizendo ao dispositivo para recalcular a altura a ser dada à imagem para que sua largura possa ser vista cem por cento.
9. Tudo baixo o mesmo URLEsqueça subdomínios como www.mysite.com/mobile, pois o mesmo arquivo index.html na pasta raiz funcionará para todos os dispositivos (se você fizer o design adaptativo corretamente). Você já conhece a vantagem: quanto menos subdomínios, mais rápido será o carregamento da página.
10. Aproveite os apoios: Seja criativo Não é a mesma coisa acessar um site de um computador desktop do que de um iPad ou telefone celular. Com a primeira, você navegará de forma tranquila e relaxada. Com este último, você o fará nas horas ociosas e fechará a janela assim que ficar entediado. Aproveite essas condições para entreter o usuário e fazer com que ele se divirta nos poucos minutos que vai dedicar a você. Talvez quando ele chegar em casa decida visitá-la de uma forma mais descontraída.
11. Inspire Nas publicações digitais, você se perguntará por que esse conselho. Muito fácil: revistas digitais (bom) sabe tirar proveito do suporte e seu design é muito inteligente. Inspire-se com eles e faça um site que seja difícil de sair.

Mais informação - Revistas digitais

Fonte - divisão, 960.gs, colunal