Screenfly
La mayoría de nosotros utilizamos los diferentes dispositivos para probar nuestras aplicaciones, pero podemos deshacernos de este problema utilizando la función de emulación en el navegador Chrome. (Encontrarás esta opción en Chrome 32 o la última versión)
Haz clic en la opción de dispositivo como se muestra en la imagen de abajo y selecciona el dispositivo en el que quieres probar tu aplicación. Te proporciona los últimos dispositivos móviles, incluyendo iPhone, iPads, teléfonos y tabletas Nexus, etc.
Si quieres probar tu aplicación en una resolución personalizada, hay una opción Resolución justo debajo de la opción Modelo (ver la imagen de abajo). Allí puedes establecer el valor de la anchura, la altura y la relación de píxeles de la pantalla retina que desees.
Me ayuda mucho a comprobar mi aplicación en un solo lugar. Esto es muy útil pero no lo tomes como una opción alternativa para interactuar con tu aplicación en un dispositivo real para evaluar la experiencia UX completa.
Simulador de resolución
Imagínese la situación cuando el 5% de los nuevos visitantes del sitio web utilizan el último iPad o iPhone, pero el diseño de su sitio web está en la versión anterior. Los visitantes esperan que su sitio web sea responsivo, y están dispuestos a vivir una experiencia de usuario maravillosa. Debido a que su diseño está anticuado, la interfaz estará distorsionada, los botones serán poco legibles y todos los elementos esenciales como los CTA, los enlaces o los formularios de contacto se expandirán más allá de los tamaños de pantalla. Piensa que este 5% de los nuevos visitantes tienen una mala primera experiencia. ¿Están dispuestos a volver a su sitio web? Lo más seguro es que no. Esto puede tener efectos dramáticos en la conversión del sitio web y, por lo tanto, en los ingresos.
Dado que las resoluciones de pantalla y los dispositivos cambian constantemente, exigen actualizaciones y mejoras rápidas y cualificadas. En este artículo queremos mostrar las últimas estadísticas de resolución de pantalla y recomendar las mejores prácticas para implementarlas en su diseño.
Para empezar, nos gustaría definir qué es el diseño responsivo. El diseño web responsivo es un enfoque de diseño que permite adaptar el contenido a las dimensiones del sitio web y a los tamaños de las ventanas, como las de los ordenadores de sobremesa, los móviles y las tabletas. Este enfoque ayuda a visualizar el aspecto de la pantalla en diferentes pantallas para que sea responsive de todos modos. El diseño responsivo también da la capacidad de transformar el contenido de acuerdo a los tamaños de pantalla particulares para cualquier aplicación como ERP PMS o sistemas de punto de venta.
Resolución del dispositivo
Hubo un tiempo en el que podías saltarte las pruebas multiplataforma y seguir haciendo un sitio web funcional. Hoy en día, es un sueño desafiante, de hecho. Con muchas personas que utilizan sus teléfonos inteligentes y tabletas para acceder a su sitio web, no puede ignorar estos dispositivos que no son de escritorio. Por lo tanto, tiene que asegurarse de que su sitio web funciona bien con diferentes resoluciones de pantalla.
Pero aquí está el problema. Es posible que no tenga acceso a todos los dispositivos con diferentes resoluciones. Incluso si los tiene, probar su sitio web en todos los dispositivos es una tarea ardua. Afortunadamente, es donde entran en escena las herramientas de prueba de diseño responsivo. Estas herramientas facilitan la prueba de sitios web en diferentes resoluciones de pantalla. En este artículo, hemos recomendado las 8 mejores herramientas de prueba de diseño responsivo.
Responsive Web Design Testing Tool es la forma más fácil de comprobar si su sitio web funciona en diferentes configuraciones de resolución. Sin embargo, no viene con ninguna característica de lujo. Puedes introducir la URL del sitio web y la herramienta simulará cómo se vería tu sitio web en navegadores con diferentes anchos. También puedes comprobar los sitios web en función de los tamaños de los dispositivos. Le ofrece una vista simulada para un teléfono pequeño, un iPhone, una tableta pequeña, un iPad vertical y un iPad horizontal. Puede alojar esta herramienta en su servidor si lo desea.
Prueba de respuesta en todos los dispositivos
En este artículo, conoceremos el concepto de imágenes responsivas -imágenes que funcionan bien en dispositivos con tamaños de pantalla, resoluciones y otras características muy diferentes- y veremos qué herramientas proporciona HTML para ayudar a implementarlas. Esto ayuda a mejorar el rendimiento en diferentes dispositivos. Las imágenes responsivas son sólo una parte del diseño responsivo, un futuro tema de CSS que debes aprender.
¿Por qué imágenes responsivas? Examinemos un escenario típico. Un sitio web típico puede contener una imagen de cabecera y algunas imágenes de contenido debajo de la cabecera. La imagen de la cabecera probablemente abarcará todo el ancho de la cabecera, y la imagen del contenido encajará en algún lugar dentro de la columna de contenido. Este es un ejemplo sencillo:
Esto funciona bien en un dispositivo de pantalla ancha, como un portátil o un ordenador de sobremesa (puedes ver el ejemplo en vivo y encontrar el código fuente en GitHub.) No hablaremos mucho del CSS en esta lección, excepto para decir que:
Sin embargo, los problemas surgen cuando empiezas a ver el sitio en un dispositivo de pantalla estrecha. La cabecera de abajo se ve bien, pero empieza a ocupar gran parte de la altura de la pantalla para un dispositivo móvil. Y a este tamaño, es difícil ver las caras de las dos personas dentro de la primera imagen de contenido.
