Con la gran diversidad de dispositivos móviles que existen actualmente a distintas resoluciones de pantalla, por ejemplo dispositivos como el Samsung Galaxy Note que se ubica entre un smartphone y un tablet, se hace absolutamente importante que nuestras aplicaciones o paginas web móviles se muestren correctamente mas aun cuando el uso que le damos a estos dispositivos crece de forma vertiginosa.

Hay muchas herramientas que nos permiten pre-visualizar como va quedando nuestro trabajo a distintas resoluciones, sin embargo normalmente se limitan a resoluciones preestablecidas y en algunos casos podemos definirlas.

Si estas en MacOSX hay una opción bien interesante para ver como nos esta quedando nuestros css media queries para configurar la “sensibilidad”  a distintas resoluciones simplemente cambiando el tamaño de la ventana.

Para esto vamos a utilizar Automator que es una utilidad que viene en MacOSX para programar y automatizar de manera gráfica distintas tareas y acciones, como por ejemplo copia de archivos por lotes, re-escalar imágenes en lotes y todo tipo de tareas repetitivas o especificas. Automator trabaja con acciones que conforman el flujo de trabajo donde cada acción tiene entradas y salidas. En nuestro caso crearemos un flujo de trabajo tipo aplicación que contendrá 3 acciones.

Utilizo MacOS en inglés así que los pasos corresponden a la versión en inglés.

Los pasos son los siguientes:

1. Abrir Automator que esta ubicada en Aplications.
2. Nos pregunta por el tipo de documento que vamos a crear, indicamos tipo de documento: Aplication.
3. Vemos del lado izquierdo las distintas acciones disponibles organizada por categoría en la Librería de acciones. Buscamos en la Librería Internet la acción llamada Website Popup o en español seria “Abrir sitio web” y la arrastramos al área de la derecha.
4. En Website Popup indicamos la resolución inicial. Podemos dejar la resolución por defecto del iPhone de 320×480. En User agent podemos dejar Safari ya que no queremos emular un iPhone o iPad en este caso.
5. Ahora agregamos una forma para indicar el URL. Seleccionamos y arrastramos la acción llamada Ask for Text que esta en la Librería Text, la arrastramos arriba de la acción Website Popup, indicamos algún texto como: “Introduzca el URL:” y en la parte de abajo ingresamos el URL por defecto.
6. Ahora agregamos de igual manera la acción Extract Data from Text. La colocamos luego de Ask for Text. Le indicamos que extraiga URL.
7. Guardamos nuestra aplicación asignándole nombre, por ejemplo Responsive Browser.
8. Le cambiamos el ícono y lo agregamos a nuestras aplicaciones en el Dock. :)
9. Para su uso simplemente lo abrimos le indicamos el URL a cargar y voilà, probamos re-escalando la ventana y vemos como cambia responde nuestra app a las distintas resoluciones. Para el modo landscape simplemente re-dimensionamos la ventana con el ancho mayor que lo alto.