Diseño web tamaño pantalla
Resolución del teléfono
En 2020, habrá 3.500 millones de usuarios de teléfonos inteligentes en el mundo. Esto supone el 45% de la población mundial. En 2019, las personas accedieron a Internet con más de 9000 dispositivos distintos. Todos los usuarios esperan que todos los sitios web a los que acceden se reproduzcan perfectamente en su dispositivo móvil. Esto significa que los desarrolladores de sitios web tienen que diseñar sitios web que se muestren en una multitud de tamaños de pantalla en todo el mundo.
Pero como todo diseñador sabe, la ejecución del diseño responsivo tiene que empezar por saber para qué tamaños de pantalla hay que diseñar. Este artículo explora esta cuestión y analiza los mejores tamaños de pantalla para el diseño responsivo.
El diseño web responsivo se refiere a una estrategia de diseño que crea sitios web que funcionan bien para dispositivos móviles, tabletas y de escritorio. Los sitios web sin diseño responsivo corren el riesgo de alejar a un número significativo de usuarios: el 80% de los usuarios han afirmado que rechazarán los sitios web que no funcionen bien en su dispositivo.
«A partir del 21 de abril (2015), ampliaremos el uso de la facilidad de uso para móviles como señal de clasificación. Este cambio afectará a las búsquedas móviles en todos los idiomas del mundo y tendrá un impacto significativo en nuestros resultados de búsqueda. En consecuencia, a los usuarios les resultará más fácil obtener resultados de búsqueda relevantes y de alta calidad que estén optimizados para sus dispositivos.»
Resoluciones de pantalla habituales
Las aplicaciones de Windows pueden ejecutarse en cualquier dispositivo con Windows, lo que incluye teléfonos, tabletas, ordenadores de sobremesa, televisores, etc. Con un gran número de objetivos de dispositivos y tamaños de pantalla en todo el ecosistema de Windows 10, en lugar de optimizar la interfaz de usuario para cada dispositivo, recomendamos diseñar para unas pocas categorías de anchura clave (también llamadas «puntos de interrupción»):
Cuando diseñes para puntos de ruptura específicos, diseña para la cantidad de espacio de pantalla disponible para tu aplicación (la ventana de la aplicación), no para el tamaño de la pantalla. Cuando la aplicación se ejecuta a pantalla completa, la ventana de la aplicación tiene el mismo tamaño que la pantalla, pero cuando la aplicación no es de pantalla completa, la ventana es más pequeña que la pantalla.
Aunque la mayoría de los televisores son físicamente bastante grandes (entre 40 y 65 pulgadas es lo habitual) y tienen altas resoluciones (HD o 4k), diseñar para un televisor de 1080P que se ve a tres metros de distancia es diferente a diseñar para un monitor de 1080p que está a un metro de distancia en tu escritorio. Cuando se tiene en cuenta la distancia, los 1080 píxeles del televisor son más parecidos a los de un monitor de 540 píxeles que está mucho más cerca.
El sistema de píxeles efectivos de UWP tiene en cuenta automáticamente la distancia de visualización. Cuando especificas un tamaño para un control o un rango de puntos de interrupción, en realidad estás utilizando píxeles «efectivos». Por ejemplo, si creas un código responsivo para 1080 píxeles o más, un monitor de 1080 utilizará ese código, pero un televisor de 1080p no lo hará, porque aunque un televisor de 1080p tiene 1080 píxeles físicos, sólo tiene 540 píxeles efectivos. Esto hace que diseñar para un televisor sea similar a diseñar para un teléfono.
El tamaño de pantalla más pequeño para el que diseñar
Antes de que se popularizaran los smartphones y las tabletas, los diseñadores web creaban páginas de ancho fijo que funcionaban en los tamaños de pantalla más comunes: normalmente 1024 píxeles de ancho por 768 píxeles de alto. Todo esto cambió alrededor de 2013 con el aumento masivo del uso del iPhone para navegar por la web. Ahora no hay una única respuesta a «¿qué tamaño debe tener mi página web?» – todos los sitios web deben ser responsivos.
El diseño responsivo significa crear páginas web que se adapten a diferentes dispositivos y tamaños de pantalla. Utiliza el mismo contenido, pero lo presenta de forma diferente según se utilice un teléfono móvil, un iPad, un portátil o un ordenador de sobremesa. Responde a las diferentes interacciones, como los estados hover para los usuarios con ratón y los eventos de clic para las pantallas táctiles, y cambia el diseño para adaptarse a la pantalla disponible.
Un punto a tener en cuenta es que el hecho de tener espacio de pantalla disponible no significa que haya que utilizarlo. Los diseños que se extienden a todo lo ancho en todos los tamaños de pantalla pueden resultar ilegibles en pantallas muy anchas. Por ejemplo, una página de 1300px de ancho es legible en dos columnas, pero es lo máximo que la mayoría de la gente puede leer cómodamente en una sola columna de texto. Nos resulta más fácil seguir el texto que se envuelve en bloques más pequeños.
Diseño web responsivo
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 CTAs, enlaces o 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 del sitio web a diversos tamaños de pantalla y 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 posibilidad de transformar el contenido de acuerdo a determinados tamaños de pantalla.