Testando layouts responsivos em diferentes dispositivos

Nessa nova “era” em que possuímos diferentes tipos de resoluções de telas, seja ela em um pc com altíssima resolução, notebooks, tablets ou celulares, fica impraticável desenvolver uma versão do site para cada dispositivo, porém com a chegada do CSS3 a situação fica um pouco diferente, agora podemos com apenas algumas linhas de estilo criar layouts que se adaptam de acordo com a resolução utilizada.

Caso você ainda desenvolva sites estáticos ou fluídos, você pode testá-lo em várias resoluções utilizando um dos aplicativos online que escrevi nesse post: Visualizar sites em diversas resoluções.

Para saber como funciona um layout responsivo (responsive design), recomendo dar uma lida no artigo super completo do site Ferramentas Blog – Tudo sobre Layout Responsivo.

Como testar seu site em diferentes resoluções

Responsive Design Bookmarklet

Responsive Design Bookmarklet

Recentemente descobri esse excelente script, o Responsive Design Bookmarklet, que nos ajuda a testar nosso layout em diversas resoluções.

Para utilizá-lo é muito simples, basta adicionar o código abaixo em seus favoritos e toda vez que desejar testar um site, basta com o site aberto, clicar nesse item de seus favoritos.

Ou então acesse o site deles e arraste o botão para sua barra de favoritos. Acesse aqui.

Veja um exemplo do script em funcionamento num tema WordPress encontrado no ThemeForest: http://clemin.wpelement.com/

Layout Full

Layout Full

Layout iPad

Layout iPad

Layout iPhone

Layout iPhone

 

Update

Segue uma lista com mais alguns sites e serviços para testar seus sites responsivos:

1 ComentárioComente

Deixe uma resposta

Seu email não será publicado. Campos marcados com * são obrigatórios.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.