¿Cuál es la resolución de pantalla más común en Colombia en 2022?

Respuesta rápida:

1366x768px con el 40% de usuarios

Pero..¿por qué es tan importante la resolución?

Todos los usuarios esperan que 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.

En otras palabras, necesitan un diseño responsive, es decir, que se adapte a la pantalla de los usuarios.

Pero, como todo diseñador sabe, la ejecución del diseño responsive tiene que empezar por saber para qué tamaños de pantalla hay que diseñar. Empecemos primero dejando claro las preguntas básicas:

¿Qué es el diseño responsive?

El diseño web responsive se refiere a una estrategia de diseño que crea sitios web que funcionan bien para dispositivos móviles, tabletas y para computadores de escritorio. Los sitios web sin diseño responsive corren el riesgo de alejar a un número significativo de usuarios: el 80% de los usuarios han afirmado que rechazan los sitios web que no funcionan bien en su dispositivo.

Además, Google tiene en cuenta la "compatibilidad con los dispositivos móviles" como parámetro de clasificación en el posicionamiento web.

¿Qué es la resolución de pantalla?

Una pantalla de ordenador utiliza millones de píxeles para mostrar las imágenes. Estos píxeles están dispuestos en una cuadrícula horizontal y vertical. El número de píxeles horizontales y verticales se denomina resolución de pantalla.

La resolución de pantalla suele escribirse como 1024 x 768 (o 1366 x 768, 1920 x 1080). Esto significa que la pantalla tiene 1024 píxeles horizontales y 768 píxeles verticales (o 1366 píxeles horizontales y 768 píxeles verticales, y así sucesivamente).

Tamaño de la pantalla vs. Resolución de la pantalla

El tamaño y la resolución de la pantalla no están directamente relacionados. Por ejemplo, puedes tener una tableta de 10,6" con una resolución de 1920 x 1080 y un monitor de escritorio de 24" con la misma resolución. Como la resolución de ambos dispositivos es la misma, podrán mostrar exactamente la misma imagen (en términos de número de píxeles), sólo que la imagen en la pantalla del ordenador se verá mucho más grande debido a las mayores dimensiones físicas del monitor.

Los diseñadores web tienen la tarea de trabajar en base a las resoluciones que más se usen en el mercado al que están dirigidos. Por ejemplo, los diseñadores de Colombia deben tener en cuenta las resoluciones de pantallas más comúnmente usadas por los usuarios para diseñar mejores sitios web.

Las resoluciones más usadas en el país son:

1366x768 - 40.34%  
1920x1080 - 16.36% 
1536x864 - 6.32%
1600x900 - 5.84%
1440x900 - 5.13%
1280x720 - 4.23%

Mejores prácticas para implementar un diseño responsive

Resulta mucho más fácil diseñar un sitio web para múltiples tamaños de pantalla con las siguientes consejos:

Conoce tus puntos de interrupción: en el diseño responsive, un punto de ruptura es el "punto" en el que el contenido y el diseño de un sitio web se adaptarán de una manera determinada para ofrecer la mejor experiencia posible al usuario. Para que un sitio web sea responsive, los diseñadores deben añadir un punto de ruptura cuando el contenido parezca desalineado. Dependiendo del número de dispositivos a los que se alinee el sitio, hay que establecer varios puntos de interrupción para garantizar su capacidad de respuesta. 

Crea diseños fluidos: el diseño fluido se refiere a un diseño que puede cambiar (expandirse y contraerse) para adaptarse a la ventana gráfica del dispositivo en el que se está ejecutando. Un diseño fijo se distorsionará indeseablemente en cada ventana gráfica a la que no esté alineado. Trabaja en los diseños utilizando unidades en % y anchos máximos para asegurarte de que el diseño se ajusta a las ventanas de los dispositivos móviles sin ser demasiado ancho en las ventanas de los dispositivos de escritorio.

Disminuir la fricción: esto significa básicamente que el diseño debe ser fácil de usar en múltiples dispositivos. El diseño responsive no sólo incluye el aspecto de un sitio web, sino también su rendimiento en términos de accesibilidad y usabilidad. Hay que prestar especial atención a la fricción en las pantallas pequeñas, porque a medida que el tamaño de las mismas disminuye, los elementos de la web tienen menos espacio para representarse y son más propensos a revolverse y distorsionarse.

Diseña primero en el móvil: dado que es más probable que la fricción se produzca en pantallas pequeñas, diseñe con un enfoque primero en el móvil. Es más difícil adaptar un diseño de escritorio a una pantalla de móvil, mientras que hacer lo contrario es más fácil. Cuando se diseña con el enfoque móvil primero, el diseñador incluye lo que es absolutamente necesario para proporcionar una experiencia óptima al usuario.

He aquí algunas formas de proceder con el diseño mobile-first para adaptarse a más tamaños de pantalla:

- Dar prioridad a las opciones de menú importantes

- Eliminar todas las distracciones visuales

- Optimizar el diseño para que se pueda tocar: hacer que todo sea fácil de tocar

- Eliminar los formularios y campos de información innecesarios

- Destacar el CTA principal

- Ofrece de forma destacada las funciones de búsqueda y filtrado

Más funcionalidad, menos escritura: obviamente, escribir es más difícil en los dispositivos móviles que en los de escritorio. Así que tiene sentido minimizar la necesidad de escribir en las versiones móviles de los sitios web. Sustituye el tecleo por el aprovechamiento consciente de las funciones del dispositivo, como el GPS, la lectura de códigos QR, la identificación biométrica, etc. Facilita que los usuarios compartan, envíen por correo electrónico o llamen a números relevantes colocando enlaces que inicien las funciones necesarias. Ten en cuenta que el mejor diseño responsive implica simplificar y eliminar las interacciones móviles incómodas.

Prueba, prueba, prueba: para asegurarte de que el sitio web se visualiza realmente de la forma prevista en los dispositivos para los que se ha creado, es necesario probarlo. Una forma sencilla de hacerlo es utilizar un comprobador de diseño responsivo. En lugar de pasar el sitio web por dispositivos individuales con diferentes puertos de visualización, introduzca la URL en el comprobador y vea cómo aparece en una variedad de dispositivos más recientes con diferentes resoluciones de dispositivos de uso frecuente. 

Aunque un diseño responsive puede parecer difícil de ejecutar, si sigues nuestros consejos seguro que lograrás crear un sitio web adaptable y amigable a todos los usuarios.

Si necesitas crear un sitio web para tu tienda online o para cualquier negocio que tengas y necesites darle presencia online, no dudes en contactar con nuestro servicio. ¡Ofrecemos todo tipo de soluciones web!