Um site responsivo deve abrir direito em quais tamanhos? 320px, 480px, 600px, 768px e 960px? Errado! Responsividade de verdade é abrir em todo tipo de resolução, até as incomuns – como os 533px do meu Android.

Ferramentas de testes para mobile e responsive design costumam focar nas resoluções dos dispositivos mais famosos – iPhones e iPads. Faltava uma ferramenta que permitisse testar um design verdadeiramente responsivo em todas as resoluções possíveis.

Assim nasceu meu pet project chamado Responsive Playdisponível no Github. Com ele, você pode gerar um vídeo mostrando seu design responsivo em centenas de resoluções. Como o vídeo abaixo do ArquiteturaJava.com.br, um site responsivo em que trabalhei:

ArquiteturaJava.com.br no Responsive Play

Rodar o projeto é bem fácil:

play http://www.arquiteturajava.com.br

Você pode ainda passar opções como o o intervalo das resoluções a ser usado e até o tempo do vídeo:

play http://www.arquiteturajava.com.br 320 960

Mais um demo: um vídeo do Boston Globe, um famoso caso de design responsivo que funciona em todo tipo de resolução:

BostonGlobe.com no Responsive Play

Browser edition

Além disso, o Responsive Play tem uma versão web pra você rodar no navegador e visualizar seu site em diversas resoluções, sem gerar o vídeo. É só acessar a página e colocar o endereço de teste.

ArquiteturaJava.com.br no Responsive Play, Browser Edition

Mais

E o que você acha de testar sites responsivos em centenas de resoluções ao invés de algumas poucas de dispositivos famosos? Saiu um artigo na Smashing Magazine essa semana que trata justo do porquê sites responsivos deveriam funcionar em todo tipo de resolução.