¿Cuáles son los mejores tamaños de pantalla para el diseño web receptivo en 2022?

¿Cuál es el mejor tamaño de pantalla para diseñar en 2022?

 

 

No hay un mejor tamaño de pantalla para diseñar. Los sitios web deben transformarse de manera receptiva y rápida en todas las resoluciones de pantalla en diferentes navegadores y plataformas. Accesible. Compatible con dispositivos móviles. Diseñe para su audiencia, primero. Diseño desde 360×640 hasta 1920×1080.

 

También:

 

• Diseño para pantallas de escritorio desde 1024×768 hasta 1920×1080.
• Diseño para pantallas móviles desde 360×640 hasta 414×896.
• Diseño para pantallas de tabletas desde 601×962 hasta 1280×800.
• Verifique Google Analytics y optimice para los tamaños de resolución más comunes de su público objetivo.
• No diseñe para un tamaño de monitor o resolución de pantalla. Los tamaños de pantalla y el estado de la ventana del navegador varían entre los visitantes.
• El diseño debe ser receptivo y rápido. Use un diseño fluido o receptivo que se transforme al tamaño de la ventana del usuario actual.
• Supervise las alertas de usabilidad y compatibilidad con dispositivos móviles de Google Search Console.

 

Su sitio web aún debe verse bien y funcionar bien en todos los tamaños, razón por la cual Hobo Web *solía* recomendar un diseño líquido altamente accesible usando anchos porcentuales para controlar el diseño. Ahora la recomendación aceptada es tener una plantilla de sitio web receptiva.

Los tres criterios principales para optimizar el diseño de una página para un determinado tamaño de pantalla son:

 

• Visibilidad inicial de la página web: ¿Toda la información clave está visible en la parte superior de la página para que los usuarios puedan verla sin desplazarse? Esta es una compensación entre cuántos elementos se muestran y cuántos detalles se muestran para cada elemento.

 

• Legibilidad de la página web: ¿Qué tan fácil es leer el texto en varias columnas, dado el ancho asignado?

 

• Estética de la página web: ¿Qué tan bien se ve su página cuando los elementos tienen el tamaño y la ubicación adecuados para este tamaño de pantalla? ¿Todos los elementos se alinean correctamente, es decir, están los subtítulos inmediatamente al lado de las fotos, etc.?

 

Las pautas de usabilidad también recomendaron que considere los tres criterios en la gama completa de tamaños. Compruebe la ventana del navegador con resoluciones de pantalla de 360 × 640 a 1920 × 1080.

Su página debe obtener una puntuación alta en todos los criterios en todo el rango de resolución.

Su página también debería funcionar en tamaños incluso más pequeños y más grandes, aunque estos extremos son menos importantes.

Aunque dichos usuarios ciertamente deberían poder acceder a su sitio, darles un diseño menos que excelente a veces es un compromiso aceptable.

Las 10 resoluciones de pantalla más comunes

 

Análisis de visitantes de casi medio millón de visitantes en el último año:

 

1 – 1920×1080 (22,62%)
2 – 1366 × 768 (11,20%)
3 – 1440×900 (9,55%)
4 – 1536×864 (8,60%)
5 – 2560×1440 (7,41%)
6 – 1680×1050 (4,28%)
7 – 1280×720 (3,55%)
8 – 1280×800 (2,33%)
9 – 1792 × 1120  (2,06%)
10 – 1600 × 900 (1,87%)

 

Debe usar una plantilla de sitio web receptivo en 2022:

 

CITA: «Google recomienda el diseño web receptivo porque es el patrón de diseño más fácil de implementar y mantener» Guías para desarrolladores de Google, 2021

 

En 2022, muchas personas utilizan dispositivos portátiles (tabletas y teléfonos inteligentes) para navegar por la web y el diseño de sitios web receptivos (RWD) ha surgido como una solución muy probable (aún lo debaten los aficionados) para los desafíos del tamaño de la pantalla.

Este método deja de usar sitios web de ancho fijo y, en su lugar, usa Media Queries en hojas de estilo CSS para crear un sitio web que responda en tamaño a las diferentes ventanas de visualización de los dispositivos portátiles y las pantallas más pequeñas que usa la gente.

Entonces, sea cual sea el dispositivo que una persona pueda estar usando para ver su sitio web, puede brindarles la experiencia más completa posible.

Google prefiere los sitios optimizados para dispositivos móviles

 

Google dicta el flujo y reflujo del comercio en línea y acaba de dictar que debe diseñar para una experiencia de usuario satisfactoria en múltiples dispositivos SI desea esperar una clasificación alta para las palabras clave competitivas en Google.

 

CITA: “Google utiliza dos rastreadores diferentes para rastrear sitios web: un rastreador móvil y un rastreador de escritorio. Cada tipo de rastreador simula un usuario que visita su página con un dispositivo de ese tipo. Google utiliza un tipo de rastreador (móvil o de escritorio) como rastreador principal para su sitio. Todas las páginas de su sitio web que rastrea Google se rastrean con el rastreador principal. El rastreador principal para todos los sitios web nuevos es el rastreador móvil. Además, Google vuelve a rastrear algunas páginas de su sitio con el otro tipo de rastreador (móvil o de escritorio). Esto se denomina rastreo secundario y se realiza para ver qué tan bien funciona su sitio con el otro tipo de dispositivo”. Directrices para webmasters de Google, 2020

 

Desde el 21 de abril de 2015, en todo el mundo, la compatibilidad con dispositivos móviles de un sitio ha afectado el rendimiento de clasificación de los sitios web en una variedad de dispositivos.

Si crea sitios web para pequeñas empresas, sabrá que quieren un sitio web que funcione bien en las listas orgánicas de Google, sabrá que están interesados en la optimización de motores de búsqueda:

El SEO ahora se basa, en parte, en un buen sitio web UX, como lo cuantifica Google, al menos para los usuarios móviles.

 

CITA: “Con las búsquedas móviles que ahora superan las búsquedas de escritorio, es importante que su sitio sea compatible con dispositivos móviles. Googlebot ahora usa un rastreador móvil como rastreador predeterminado para los sitios web”. Directrices para webmasters de Google, 2020

 

Por el momento, eso significa esencialmente un diseño de sitio web receptivo y compatible con dispositivos móviles, especialmente con Google su «índice móvil primero».

La compatibilidad con dispositivos móviles es una de las señales de experiencia de la página de Google.

Para obtener más información, lea: «Su sitio no tiene URL con una buena experiencia de página».

Estadísticas de resolución de pantalla de escritorio en todo el mundo Ago 2020 – Ago 2021

 

Como referencia, aquí hay una lista de las resoluciones de pantalla principales actuales en todo el mundo registradas recientemente (2020):

 

 

Tamaños de resolución de pantalla de escritorio más comunes en todo el mundo

 

1920×1080 – 21.04%
1366×768 – 20.48%
1536×864 – 10.05%
1440×900 – 6.17%
1280×720 – 5.79%
1600×900 – 3.68%

Estadísticas de resolución de pantalla móvil en todo el mundo Ago 2020 – Ago 2021

 

 

Tamaños de resolución de pantalla móvil más comunes en todo el mundo

 

360×640 – 9.25%
414×896 – 7.29%
360×800 – 7.13%
360×780 – 5.43%
375×667 – 5,25%
360×780 – 4.76%

Estadísticas de resolución de pantalla de tablets en todo el mundo Ago 2020 – Ago 2021

 

 

Tamaños de resolución de pantalla de tablets más comunes en todo el mundo

 

768×1024 – 40,53%
1280×800 – 6,91%
800×1280 – 5.36%
601×962 – 5,21%
810×1080 – 4.47%
962×601 – 3,79%

Estadísticas de resolución de pantalla de escritorio en los EE. UU. Ago 2020 – Ago 2021

 

 

Resoluciones de pantalla principales en los EE. UU. (2021)

Tamaño de resolución de pantalla de escritorio más común en los Estados Unidos de América

 

1920×1080 – 21,52 %
1366×768 – 13,95 %
1440×900 – 8,58 %
1536×864 – 8.17%
1280×720 – 5.01%
1280×1024 – 4.02%

Estadísticas de resolución de pantalla móvil en los EE. UU. Ago 2020 – Ago 2021

 

 

Tamaño de resolución de pantalla móvil más común en los Estados Unidos de América

 

414×816 – 17,62%
375×812 – 10,04%
375×667 – 9.88%
390×844 – 6,1%
414×736 – 4.25%
428×926 – 4.07%

Estadísticas de resolución de pantalla de tablets en los EE. UU. Ago 2020 – Ago 2021

 

 

Tamaño de resolución de pantalla de tablets más común en los Estados Unidos de América

 

768×1024 – 41,63%
800×1280 – 7.98%
1280×800 – 7.57%
601×962 – 6,33%
910×1080 – 4.78%
962×601 -4.12%

Estadísticas de resolución de pantalla de escritorio en el Reino Unido de agosto de 2020 a agosto de 2021

 

Resoluciones de pantalla principales en el Reino Unido (2021)

 

 

Tamaño de resolución de pantalla de escritorio más común en el Reino Unido

 

1920×1080 – 24,53%
1366×768 – 14,1%
1536×864 – 9.28%
1440×900 – 6,87%
1280×720 – 5,9%
768×1024 – 5.25%

Estadísticas de resolución de pantalla móvil en el Reino Unido de agosto de 2020 a agosto de 2021

 

 

Tamaño de resolución de pantalla móvil más común en el Reino Unido

 

414×816 – 14,51%
375×667 – 12,47%
375×812 – 7.21%
360×640 – 5,43%
412×915 – 5,18%
360×780 – 5.04%

Estadísticas de resolución de pantalla de tablets en el Reino Unido agosto de 2020 – agosto de 2021

 

 

Tamaños de resolución de pantalla de tablets más comunes en el Reino Unido

 

768×1024 – 48,64%
1280×800 – 7.55%
800×1280 – 7.44%
601×962 – 4.5%
810×1080 – 4.41%
600×1024 – 2.95%

Cuota de mercado de escritorio vs móvil vs tableta en todo el mundo agosto de 2020 – agosto de 2021

 

 

Desktop vs Mobile vs Tablet Cuota de mercado en todo el mundo

Móvil – 56,94%
Escritorio: 40,3 %
Tableta – 2,76%

*Nota: las estadísticas anteriores provienen de una fuente (aunque creíble), por lo que estarán sesgadas de formas desconocidas. Gráficos suministrados por http://statcounter.com/.

Cómo diseñar un sitio que se vea igual en todos los navegadores y resoluciones

 

No puede diseñar un sitio que se vea igual en todos los navegadores y resoluciones.

Es imposible que diseñe un sitio web para que se vea igual en todos los navegadores, plataformas y resoluciones de pantalla, así que evite intentarlo.

Puede optar por un diseño fluido sin tablas para su diseño, con anchos porcentuales que se expanden y contraen para adaptarse a la configuración del navegador de un visitante O podría considerar buscar soluciones de diseño receptivo que lograrán más o menos lo mismo.

Google favorece los diseños receptivos, lo cual es una buena noticia para quienes lo han adoptado:

CITA: «Los sitios que utilizan un diseño web receptivo e implementan correctamente el servicio dinámico (que incluye todo el contenido de escritorio y el marcado) generalmente no tienen que hacer nada». Google NOV 2017

 

EL DISPOSITIVO MÓVIL ESTÁ EN AUMENTO, por lo que si desarrolla un nuevo sitio web, DEBE pensar en qué tan optimizado para dispositivos móviles es realmente su sitio web desde el principio.

Debe intentar mantener las cosas simples al codificar sitios web.
No podrá complacer a todos, y la cuestión de qué tamaño de sitio web es mejor sigue siendo un tema candente de debate entre los diseñadores con experiencia en usabilidad y UX.

Es de vital importancia que identifique SU audiencia y los dispositivos que utiliza, y construya su sitio web (en general) para adaptarse a ESA audiencia.

Y esa audiencia incluye GOOGLEBOT.

¿Su sitio móvil redirige a otra URL y versión de su sitio?

 

Eso no es ideal. Nunca lo ha sido, de hecho.

Hace mucho tiempo, algunas personas usaban versiones SOLO DE TEXTO de un sitio web para producir contenido para usuarios/navegadores que no admitían elementos de sus sitios web, en un intento (generalmente en vano) de hacer que su contenido fuera más accesible.

El W3C incluso lo recomendaba si todo lo demás fallaba:

 

Se proporcionará una página de solo texto, con información o funcionalidad equivalente, para que un sitio web cumpla con las disposiciones de esta parte, cuando el cumplimiento no se pueda lograr de otra manera. El contenido de las páginas de solo texto se actualizará cada vez que cambie la página principal. SECCIÓN 508

 

SIEMPRE ha sido ideal entregar una URL a un visitante por motivos de accesibilidad, y no hay diferencia entre entregar contenido móvil o de teléfono inteligente si está pensando en crear una versión «móvil» de su sitio. Esto, por supuesto, bien puede ser AÚN MÁS IMPORTANTE si Google se está moviendo hacia un PRIMERO ÍNDICE PARA MÓVILES.

Se ha confirmado que Google califica su sitio web PRINCIPALMENTE en su experiencia móvil.

Cuando Google es el «visitante», por lo general es aún más importante entregar solo una URL debido a los desafíos de URL canónica para los motores de búsqueda, y este ha sido el caso antes de la implementación del elemento de enlace canónico hace algún tiempo.

Entonces, la situación ideal es entregar una URL en todo momento.

Si tiene contenido de «teléfono inteligente»… puede usar rel=canonical para apuntar a su versión de escritorio…. Cuando los usuarios visitan esa versión de escritorio con un teléfono inteligente, puede redirigirlos a la versión móvil. Esto funciona independientemente de la estructura de la URL, por lo que no necesita usar subdominios/subdirectorios para sitios de teléfonos inteligentes y dispositivos móviles. Sin embargo, aún mejor es usar las mismas URL y mostrar la versión adecuada del contenido sin una redirección John Mueller, Google

 

Ignorar las recomendaciones de Google a menudo no es un movimiento inteligente

 

CITA: los sistemas de rastreo, indexación y clasificación suelen mirar la versión de escritorio del contenido de una página, lo que puede causar problemas para los buscadores móviles cuando esa versión es muy diferente de la versión móvil. La indexación móvil primero significa que usaremos la versión móvil del contenido para indexar y clasificar, para ayudar mejor… principalmente móvil: los usuarios encuentran lo que buscan. Los webmasters verán un aumento significativo en el rastreo por Smartphone Googlebot, y los fragmentos en los resultados, así como el contenido en las páginas de caché de Google, serán de la versión móvil de las páginas. Google noviembre de 2017

 

Google ofrece los siguientes consejos para verificar que su sitio esté preparado para el índice móvil primero, pero esencialmente, si está utilizando una plantilla de diseño web receptivo para su sitio, debería tener problemas mínimos con este cambio:

 

Asegúrese de que la versión móvil del sitio también tenga contenido importante y de alta calidad. Esto incluye texto, imágenes (con atributos alternativos) y videos, en los formatos rastreables e indexables habituales.

Los datos estructurados son importantes para las funciones de indexación y búsqueda que a los usuarios les encantan: deben estar tanto en la versión móvil como en la de escritorio del sitio. Asegúrese de que las URL dentro de los datos estructurados estén actualizadas a la versión móvil en las páginas móviles.

Los metadatos deben estar presentes en ambas versiones del sitio. Proporciona sugerencias sobre el contenido de una página para su indexación y publicación. Por ejemplo, asegúrese de que los títulos y las metadescripciones sean equivalentes en ambas versiones de todas las páginas del sitio.

No se necesitan cambios para la interconexión con URL móviles separadas (sitios m.-dot). Para los sitios que usan URL móviles independientes, mantenga el vínculo existente rel=canonical y el vínculo rel=elementos alternativos entre estas versiones.

Verifique los enlaces hreflang en URL móviles separadas. Cuando utilice elementos link rel=hreflang para la internacionalización, vincule las URL móviles y de escritorio por separado. El hreflang de su URL móvil debe apuntar a las versiones de otros idiomas o regiones en otras URL móviles y, de manera similar, vincular el escritorio con otras URL de escritorio usando elementos de enlace hreflang allí.

Asegúrese de que los servidores que alojan el sitio tengan suficiente capacidad para manejar una tasa de rastreo potencialmente mayor. Esto no afecta a los sitios que utilizan un diseño web receptivo y un servicio dinámico, solo a los sitios en los que la versión móvil se encuentra en un host independiente, como m.example.com.

Sus usuarios esperan desplazarse hacia abajo en una página

 

Como implica el primer criterio, el desplazamiento es siempre una consideración clave. Por lo general, a los usuarios no les gustaba desplazarse si no lo necesitaban, aunque, con los años, eso cambió.

Por lo tanto, cuando diseñe, debe considerar cuánto pueden ver los usuarios si se desplazan solo una o dos pantallas completas. Más de cinco pantallas de largo podrían ser una indicación de que podría haber demasiada copia en la página. Por supuesto, esto se equilibra con la opinión de que algunos artículos están destinados a ser piezas de información detallada y los usuarios esperarían esperar un poco más para ver el contenido de una página y tipos de contenido.

Tanto el desplazamiento como la visibilidad inicial obviamente dependen del tamaño de la pantalla: las pantallas más grandes muestran más contenido en la mitad superior de la página y requieren menos desplazamiento.

¿Un cambio a un sitio móvil receptivo mejorará las clasificaciones?

 

No necesariamente, pero tal vez.

Como muchas cosas relacionadas con la optimización de Google, tener un sitio web optimizado para dispositivos móviles es más o menos para garantizar que MANTENER el tráfico que ya está recibiendo, no necesariamente para brindarle más tráfico gratuito de Google.

Si aún no recibe mucho tráfico de visitantes móviles, no estoy seguro de si esta actualización de Google tendrá un efecto notable en sus niveles de tráfico (al menos en análisis) desde el principio, pero con el tiempo, probablemente será un desafío sumamente importante para navegar.

Google y sus usuarios están elevando el nivel de calidad, una vez más, y si desea competir en SERP orgánicos cada vez más competitivos, este es otro obstáculo que las pequeñas empresas deben superar.

A LARGO plazo, esta conversión móvil solo puede ser algo bueno para sus usuarios, pero a corto plazo, será interesante ver qué efecto tiene en las tasas de conversión de las pequeñas empresas, ya que las tasas de conversión a través de dispositivos móviles suelen ser menores que en escritorio.

Google ha dicho que este algoritmo compatible con dispositivos móviles tendrá un mayor impacto en las SERP que los algoritmos de Google Penguin y Google Panda, y descubriremos más a medida que pase el tiempo.

 

Cómo verificar problemas importantes de usabilidad móvil en su sitio

 

Consola de búsqueda de Google

Debería poder realizar un seguimiento de los errores móviles en Google Search Console (también conocido como Google Webmaster Tools) y ver cómo desaparecen los errores con el tiempo si su sitio está configurado correctamente.

Herramienta para probar la compatibilidad de su sitio con dispositivos móviles

 

Search Console Url Inspection Tool

 

• Pagespeed Insights
• Think With Google
• Mobile-Friendly Test