En la actualidad los sitios web son cada vez más orientados a dispositivos de diferentes tamaños de pantalla. Con el diseño web adaptativo (o responsivo) se busca tener un solo sitio web que sea capaz de adaptarse a diferentes resoluciones, en lugar de tener varios sitios (uno para móviles, otro para tablets, laptops y desktops, etc.) como se hacía hace tiempo atrás.
Con la llegada del HTML5, CSS3 y los Media Queries los diseñadores buscan alcanzar esta meta, para ello se basan en nuevas técnicas y herramientas que facilitan en cierta forma el desarrollo de los sitios web adaptativos.
Las herramientas que les traigo tratan de facilitar un poco el trabajo visual, adaptando de manera automática el tamaño de la ventana del navegador, simulando ser la pantalla de un dispositivo móvil, smartphone o tablet, como también puede ser la resolución de una laptop, o desktop.
1. Viewport Resizer
Esta herramienta diseñada por Malte Wasserman nos permite lograr el objetivo muy fácilmente sólo arrastramos el botón en el marcador, luego accedemos al sitio al cual queremos aplicar el tamaño de pantalla y presionamos el botón «<–> Resizer». El botón utiliza una función en javascript y recarga la página con los controles necesarios para redimensionar el navegador.
Permite seleccionar varias resoluciones pre-establecidas, desde los 320×480 píxeles en modo retrato, y sin limite superior (si ingresamos la resolución manualmente). Con la posibilidad de intercambiar entre retrato y paisaje con un solo clic.
Sitio: Malte Wassermann
2. Codebomber Resizer
Esencialmente igual al anterior, con la ventaja de ser más rápido en la carga de los controles y la pequeña desventaja de no permitir resoluciones manuales. Muy simple, posee 4 posibilidades de resoluciones de pantalla y sus correspondientes modos de retrato a paisaje y viceversa.
Las resoluciones que permite son:
- 320×480
- 460×640
- 768×1024
- 1200×800
* Cada una con su correspondiente modo landscape (paisaje).
Sitio: Codebomber
Estas dos herramientas nos permiten testear rápidamente el comportamiento del diseño de un sitio web responsivo en diferentes resoluciones de pantalla, si bien no son esenciales para el desarrollo, facilitan en gran medida el trabajo a la hora de realizar las pruebas.
