Google+ Você sabe o que é Web Design Adaptativo? ← Rcastro Comunicação e Design Digital

Você sabe o que é Web Design Adaptativo? 1

Nos dias de hoje, o acesso a internet é feito com os mais variados tipos de dispositivos, como smartphones, tablets, notebooks, netbooks e desktop, onde cada qual possuem tamanhos de telas variados, temos que entregar a melhor comunicação adequada a cada tela, temos que começar a pensar em como adaptar nossos layouts para esses dispositivos e para isso temos que trabalhar com layouts adaptativos.
Os “Media Queries”  adaptam layouts aos mais variados tipos de resolução de tela, mas como isso funciona ?
Através de Media queries podemos ter vários layouts para a mesma página HTML, podemos determinar o css que será aplicado para cada resolução de tela, exemplo podemos aplicar um background diferente para quem visualiza o site com uma resolução de 800×600  e  1024×768.

Exemplo:

Para a resolução de 800×600 foi determinado um css.

@media screen and (max-width: 800px) {
body {     background-image: url(bg1.jpg);}
 }

Já  para a resolução de 1024 foi determinado outro css.

@media screen and (max-width: 1024px) {
body {     background-image: url(bg2.jpg);}
 }

Desta forma podemos adaptar o mesmo layout para varias resoluções de tela,  trabalhando com css especifico para cada uma das resoluções desejadas.

Veja nesse link vários exemplos de layout desenvolvidos com esse conceito.

http://mediaqueri.es/

 

Nesse link, temos um site que mostra como pode ser feita a implementação de um layout adaptativo com Media queries

One comment on “Você sabe o que é Web Design Adaptativo?

  1. Responder Ema Gonçalves out 10, 2012 11:36

    Gostei imenso do vosso site,gostaria imenso de trabalhar convosco. Sou designer gráfica/ Infografista/ ilustradora com experiência de 12 anos na estática,livros revistas, outdoors… mas com bases/curso recente de Flash Html etc. e muita vontade de trabalhar, progredir,criar,colaborar, avançar e aprender mais! já tentei fazer outras coisas mas é esta área que me fascina.
    Vou ficar por aqui a navegar um pouco e beber da vossa fonte informativa!

    Votos de muito sucesso!
    Ema

Deixe um comentário