¿Qué es Responsive Design?

Seguramente han escuchado esa frase, en español se traduce como Diseño Web Sensible, si eso aún no te suena a nada básicamente significa que tu diseño para un sitio web se adapten al dispositivo en el que se usan, para ello se usan imágenes y diseños que sean elásticos, ojo esto no es lo mismo que tener una versión para pc y otra para dispositivos móbiles, esto es hacer que la misma versión del diseño funcione bien y se adapte a los iphone, ipad, tanto en la posición horizontal como vertical.

Esto suena bien pero seguro ahora te preguntas y cómo se logra eso pues para eso existen los media queries de CSS3, si tampoco te suena esto último tal vez lo haz usado antes y no te habías dado cuenta de su potencial

Claro es lo que siempre haz utilizado para invocar al CSS, pero también se usa para crear versiones CSS para imprimir

Ahora aquí viene lo interesante, también se puede usar esto para tener hojas de estilo que se adpaten a dispositivos con distintas resoluciones de pantalla

En este caso se agrega una hoja de estilos especial para aquellos dispositivos que tengan un ancho de 800px, en un post en el futuro, haré un ejemplo más específico con las resoluciones para iphone, ipad, etc. La idea no es que en esta hoja de estilos crees un nuevo CSS desde cero, la idea es que sobreescribas sólo ciertos estilos para que el sitio web se vea bien en estos dispositivos, obviamente tieens que haber diseño tu sitio pensando en que elementos serán elásticos.

iPhone: Emular sitios desde Safari para Windows

El tema era cómo probar mi sitio web en un iphone pero sin tener un iphone, yo se existen algunos sitios que prometen esto pero en realidad lo único que hacen es mostrar tu página web en un iframe del tamaño de pantalla de un iphone y bueno te da una idea de como lucirá pero si tienes un plugin que muestra un CSS distinto o una plantilla distinta para iphones entonces estos sitios son totalmente inútiles.
La otra opción era un emulador para iphone pero el oficial es para MAC y el que hay para Windows no te dan binarios y probablmente compilar los sources te resulte una odisea, entonces ¿Qué hacer? Pues veamos al solución.

¿Cómo probar tu sitio web en iphone o ipad sin tener iphone?

Paso 1

Primero descarga el Safari, el común y corriente para tu sistema operativo

Paso 2

Entra al menu preferencias y elige la pestaña advanced y activa la opción “Show develop menu in menu bar”

Paso 3

Ahora verás que en el menu ha aparecido una opción llaamda Develop, elige User Agent y te dará varios dispositivos posibles para probar

Y eso es todo, la próxima vez que abras tu sitio lo verás tal como luciría en un iphone o un ipad ya sólo sería cuestión que ajustes el tamaño de pantalla del navegador. Espero que este truco les haya sido tan util como a mi