Los dispositivos móviles ya comprenden una gran parte, si no la mayoría, de lectores en línea para muchos sitios web, por lo que es crucial asegurarse de que su sitio se vea y funcione correctamente en un iPhone o tableta. Hay muchos servicios que ofrecen vistas previas de diseño móvil para una URL determinada, pero Apple hizo que probar sitios web para la preparación móvil sea mucho más fácil con Safari 9 en OS X El Capitan. Una nueva característica llamada Modo de diseño receptivo puede previsualizar rápidamente el aspecto de un sitio web en una variedad de dispositivos Apple, así como las resoluciones comunes de pantalla móvil. Así es como funciona.
Es importante reiterar que el Modo de diseño receptivo es una nueva característica que es exclusiva de Safari 9 en OS X El Capitan, por lo que deberá ejecutar al menos estas versiones de navegador y sistema operativo para acceder a ella. Si su Mac cumple con este requisito, primero deberá habilitar el Modo de desarrollador de Safari. Para hacerlo, inicie Safari y haga clic en Safari en la barra de menú. Luego seleccione Preferencias> Avanzado .
En la pestaña Avanzado de la ventana de Preferencias de Safari, marque la casilla "Mostrar menú de desarrollo en la barra de menú". Como lo indica el nombre de la opción, verá que aparece un nuevo menú "Desarrollo" en la barra de menú de Safari a la derecha de "Marcadores".
A continuación, cierre la ventana de Preferencias de Safari y navegue a un sitio web que le gustaría probar en el Modo de diseño receptivo. Una vez que el sitio web esté completamente cargado en su navegador, use el atajo de teclado Comando-Opción-R y verá que la ventana del navegador se convierte en una vista previa de una de varias resoluciones de dispositivos móviles (también puede acceder al Modo de diseño receptivo haciendo clic en Desarrollar en la barra de menú de Safari y seleccionando Entrar en modo de diseño receptivo ).
Safari Responsive Design Mode te permite previsualizar cómo se ve un sitio web en todas las resoluciones de dispositivos móviles de Apple, desde el iPhone 4S de 3.5 pulgadas hasta el iPad Pro de 12.9 pulgadas. Los usuarios también tienen la opción de seleccionar una resolución “Retina” 1x, 2x o 3x y cambiar el agente del navegador para imitar el comportamiento de los navegadores más populares como Chrome, Firefox y Edge.
Para cada dispositivo y tamaño de pantalla, los usuarios pueden hacer clic en el icono del dispositivo para cambiar entre la orientación vertical y horizontal o, para dispositivos como el iPad Air y el iPad Pro que admiten la vista dividida, puede hacer clic para rotar entre varios diseños de vista dividida.
Si bien el Modo de diseño receptivo de Safari carece de algunas de las opciones de herramientas preexistentes similares, tenerlo integrado directamente en Safari puede ahorrar mucho tiempo a los diseñadores web y una gran herramienta de aprendizaje y prueba para los propietarios de sitios web que desean asegurarse de que sus visitantes móviles están obteniendo la mejor experiencia independientemente de la resolución o el tamaño de la pantalla.
Una vez que haya terminado las pruebas, puede salir del Modo de diseño receptivo cerrando la ventana o pestaña del navegador, o presionando el atajo Comando-Opción-R nuevamente.
