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

Divulgación: «Este artículo es una opinión personal de una investigación basada en mi experiencia de casi 20 años. No hay publicidad de terceros en esta página. o enlaces monetizados de cualquier tipo. Los enlaces externos a sitios de terceros son moderados por mí. Descargo de responsabilidad. «Shaun Anderson, Hobo

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

• 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ñe para pantallas de tabletas desde 601 × 962 hasta 1280 × 800
• Consulte 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 rápido y receptivo. Utilice un diseño líquido o receptivo que se transforme en el tamaño de la ventana del usuario actual.
• Supervise las alertas de usabilidad y optimizadas para dispositivos móviles de Google Search Console

Aún debe verse bien y funcionar bien en todos los tamaños, por lo que * solía * recomendar un diseño de líquido altamente accesible utilizando anchos porcentuales para controlar el diseño. Ahora la recomendación es una plantilla de sitio web adaptable.

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

• Visibilidad inicial de la página web: es clave información visible en la mitad superior de la página para que los usuarios puedan verla sin necesidad de desplazarse? Esta es una compensación entre la cantidad de elementos que se muestran y la cantidad de detalles que 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 recomiendan que considere los tres criterios en la gama completa de tamaños. Verifique 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 debe funcionar en incluso Tamaños cada vez más pequeños, aunque estos extremos son menos importantes.

Aunque estos usuarios deberían poder acceder a su sitio, ofrecerles un diseño que no sea tan bueno a veces es un compromiso aceptable.

Las diez resoluciones de pantalla más comunes

Análisis de visitantes de casi medio millón de visitantes en los primeros 6 meses de 2020:

Una plantilla de sitio web adaptable es una buena apuesta

CITA: «Diseño web adaptable: ofrece el mismo código HTML en la misma URL independientemente del dispositivo del usuario (por ejemplo, escritorio, tableta, dispositivo móvil, visual del navegador), pero puede representar la pantalla de manera diferente según el tamaño de la pantalla. Google recomienda el diseño web adaptable porque es el patrón de diseño más fácil de implementar y mantener «. Guías para desarrolladores de Google, 2020

En el mundo actual, muchas personas utilizan dispositivos portátiles (tabletas y teléfonos inteligentes) para navegar por la web y diseñar sitios web adaptables ( RWD) ha surgido como una solución muy probable (todavía es debatido por los aficionados) a 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 responde 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.

Por tanto, sea cual sea el dispositivo que una persona esté usando para ver su sitio web, puede brindarle la experiencia más completa posible.

Tabla de contenido

Google prefiere los sitios optimizados para dispositivos móviles

Google dicta el flujo y reflujo del comercio en línea y acaban de dictar que necesita diseñar para una experiencia de usuario satisfactoria en varios dispositivos SI desea obtener una clasificación alta para palabras clave competitivas en Google.

COTIZACIÓN: «Google utiliza dos rastreadores diferentes para rastrear sitios web: un rastreador móvil y un rastreador de escritorio. Cada tipo de rastreador simula que un usuario 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 que rastrea Google se rastrean mediante el rastreador principal. El rastreador principal de 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, a nivel mundial, la forma en que un sitio optimizado para dispositivos móviles ha afectado el rendimiento de clasificación de 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:

CITA: «Tengo 20 años de experiencia practicando SEO profesional. Este tutorial de SEO es mi colección de consejos y mejores prácticas de SEO que utilizo para clasificar sitios web en Google». Shaun Anderson, Hobo 2020

El SEO ahora se basa, en parte, en una buena experiencia de usuario del sitio web, como lo cuantifica Google, al menos para los usuarios de dispositivos móviles.

CITA: «Ahora que las búsquedas móviles superan las búsquedas en ordenadores, es importante que su sitio sea compatible con dispositivos móviles. Googlebot ahora usa un rastreador móvil como el rastreador predeterminado para sitios web «. Directrices para webmasters de Google, 2020

Por el momento, eso esencialmente ahora significa un diseño de sitios web receptivo y optimizado para dispositivos móviles, especialmente con Google «haciendo que nuestro índice sea el primero en dispositivos móviles «.

Estadísticas de resolución de pantalla de escritorio en todo el mundo, mayo de 2019 – mayo de 2020

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

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

• 1366 × 768 – 23,49%
• 1920 × 1080 – 19,91%
• 1536 × 864 – 8,65%
• 1440 × 900 – 7,38%
• 1280 × 720 – 4,89%
• 1600 × 900 – 4.01%
• 1280 × 800 – 3.33%

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

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

• 360 × 640 – 17,91%
• 375 × 667 – 7.61%
• 414 × 896 – 6.52%
• 360 × 780 – 5.56%
• 360 × 760 – 5.06%
• 414 × 7 36 – 3.74%

Estadísticas de resolución de pantalla de la tableta en todo el mundo, mayo de 2019 – mayo de 2020

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

• 768 × 1024 – 51.98%
• 1280 × 800 – 7.11%
• 800 × 1280 – 5.34%
• 601 × 962 – 4.47%
• 600 × 1024 – 2.85%
• 1024 × 1366 – 1.96%

Estadísticas de resolución de pantalla de escritorio en EE. UU. Mayo de 2019 – mayo de 2020

Resoluciones de pantalla principales en EE. UU. (2020)

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

• 1920 × 1080 – 19.15%
• 1366 × 768 – 14.91%
• 1440 × 900 – 9.59%
• 1536 × 864 – 7.7%
• 1280 × 720 – 4.89%
• 1600 × 900 – 4.28%
• 1280 × 800 – 3.92%

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

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

• 414 × 816 – 17.89%
• 375 × 667 – 14.2%
• 375 × 812 – 11.97%
• 360 × 640 – 8.55%
• 414 × 736 – 8.54%
• 412 × 846 – 4.7%
• 360 × 740 – 4.39%

Estadísticas de resolución de la pantalla de la tableta en los EE. UU. Mayo de 2019 – Mayo de 2020

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

• 768 × 1024 – 54.68%
• 800 × 1280 – 5.75%
• 1280 × 800 – 5.73%
• 601 × 962 – 5.41%
• 1024 × 1366 – 3.06%
• 600 × 1024 -2.57%

Estadísticas de resolución de pantalla de escritorio en el Reino Unido Mayo de 2019 – Mayo de 2020

Resoluciones de pantalla superior en el Reino Unido (2020)

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

• 1920 × 1080 – 20.62%
• 1366 × 768 – 17.32%
• 1440 × 900 – 11.65%
• 1536 × 864 – 8.38%
• 1280 × 720 – 5.2%
• 1280 × 800 – 4.73%

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

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

• 375 × 667 – 16.66%
• 414 × 816 – 14.11%
• 360 × 640 – 9.95%
• 375 × 812 – 8.55%
• 360 × 740 – 5.67%
• 360 × 780 – 5.39%
• 414 × 736 – 4.75%

Estadísticas de resolución de la pantalla de la tableta en el Reino Unido, mayo de 2019 – mayo de 2020

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

• 768 × 1024 – 58,31%
• 1280 × 800 – 6,92%
• 800 × 1280 – 6,02%
• 601 × 962 – 3,68%
• 600 × 1024 – 3,26%
• 1024 × 1366 – 1,71%

Participación de mercado mundial de escritorio, móvil o tableta

Computadora de escritorio, móvil o tableta, participación de mercado en todo el mundo

1. Móvil: 50,48%
2. Computadora de escritorio: 46,51%
3. Tableta: 3.0%

* Nota: las estadísticas anteriores provienen de una fuente (aunque creíble), por lo que podrían estar sesgadas de maneras que tal vez no conozcamos. Gráficos proporcionados por http://statcounter.com/.

¿Cómo puedo diseñar un sitio que se vea igual en todos los navegadores & Resolución?

No puedes.

Es imposible diseñar un sitio web para que se vea igual en todos los navegadores, plataformas y resoluciones de pantalla, así que evita 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 los visitantes O puede considerar buscar soluciones de diseño receptivo que logren casi lo mismo.

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

CITA: «sitios que hacen uso del diseño web receptivo e implementan correctamente la publicación dinámica (que incluye todo el contenido de escritorio y el marcado) generalmente no tiene que hacer nada «. Google NOV 2017

MÓVIL ESTÁ EN AUMENTO, por lo que si está desarrollando un nuevo sitio web, DEBE pensar en qué tan amigable para dispositivos móviles es su sitio web desde el principio.

Mi objetivo es simplificar las cosas cuando en realidad estoy codificando cosas.

No lo harás, no puedes complacer a todos, y la pregunta sobre qué tamaño de sitio web es mejor sigue siendo un tema candente debate por diseñadores con más usabilidad y experiencia en UX que yo.

Lo que sí sé por experiencia es que es de vital importancia para usted identificar SU audiencia y los dispositivos que utilizan, y construir su sitio web (en todo) para adaptarse a ESA audiencia.

Y esa audiencia incluye GOOGLEBOT.

¿Su sitio móvil redirige a otra URL & Versión de ¿Su sitio?

Bueno, eso no es ideal. De hecho, nunca lo ha sido.

En el pasado, algunas personas usaban versiones SOLO TEXTO de un sitio web para producir contenido para usuarios / navegadores que no admitían elementos de su web sitios – en un intento (generalmente en vano) de hacer su contenido más accesible.

El W3C incluso solía recomendarlo. Creo que 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 ninguna otra manera. El contenido de las páginas de solo texto se actualizará siempre 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 al entregar contenido para dispositivos móviles o teléfonos inteligentes si usted es pensando en crear una versión «móvil» de su sitio. Esto, por supuesto, puede ser AÚN MÁS IMPORTANTE si Google se está moviendo a un PRIMER ÍNDICE MÓVIL.

Google puede muy bien calificarlo PRINCIPALMENTE en su dispositivo móvil experiencia en un futuro cercano, por lo que todos debemos estar al tanto de los grandes cambios que podríamos ver muy pronto en las SERP de Google.

Cuando Google es el visitante, generalmente es aún más importante entregar solo una URL debido a los desafíos de las URL canónicas 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» (que vemos como contenido web normal, ya que generalmente es una norma l página HTML, recién modificada en el diseño para pantallas más pequeñas) puede usar rel = canonical para apuntar a su versión de escritorio. Esto nos ayuda a centrarnos en la versión de escritorio para la búsqueda web. 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 es necesario utilizar subdominios / subdirectorios para sitios para teléfonos inteligentes y móviles. Sin embargo, es incluso mejor utilizar las mismas URL y mostrar la versión adecuada del contenido sin redireccionar John Mueller, Google

Ignorar las recomendaciones de Google a menudo no es una decisión inteligente

CITA: En resumen, actualmente nuestros sistemas de rastreo, indexación y clasificación suelen mirar en el escritorio. versión del contenido de una página, lo que puede causar problemas a los buscadores móviles cuando esa versión es muy diferente de la versión móvil. La indexación de dispositivos móviles primero significa que usaremos la versión para dispositivos móviles del contenido para indexar y clasificar, para ayudar mejor a nuestros usuarios, principalmente de dispositivos móviles, a encontrar lo que buscan. Los webmasters verán un rastreo significativamente mayor por parte del robot de Google para teléfonos inteligentes, y los fragmentos de los resultados, así como el contenido de 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 comprobar que su sitio está preparado para el índice móvil primero, pero básicamente, si está utilizando un diseño web adaptable plantilla 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 los elementos importantes , contenido de alta calidad. Esto incluye texto, imágenes (con atributos alternativos) y videos, en los formatos indexables y rastreables habituales.

• Los datos estructurados son importantes para las funciones de indexación y búsqueda que les encantan a los usuarios: deben estar tanto en la versión móvil como en la versión 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 indexar y publicar. Por ejemplo, asegúrese de que los títulos y las meta descripciones sean equivalentes en ambas versiones de todas las páginas del sitio.

• No es necesario realizar cambios para la interconexión con URL móviles independientes (sitios m.-dot). Para los sitios que utilizan URL móviles independientes, mantenga el vínculo existente rel = canonical y link rel = elementos alternativos entre estas versiones.

• Compruebe los enlaces hreflang en URL móviles independientes. Cuando utilice los elementos link rel = hreflang para la internacionalización, vincule las URL de dispositivos móviles y de escritorio por separado. El hreflang de sus URL móviles debe apuntar a las versiones de otros idiomas / regiones en otras URL móviles y, de manera similar, vincular el escritorio con otras URL de escritorio utilizando elementos de enlace hreflang allí.

• Asegúrese de que los servidores que alojan el sitio tengan la capacidad suficiente para manejar una frecuencia de rastreo potencialmente aumentada. Esto no afecta a los sitios que utilizan el diseño web adaptable y la publicación dinámica, solo a los sitios en los que la versión para móviles está en un host independiente, como m.example.com.

Los 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 es necesario, aunque, con el paso de los años, eso ha cambiado.

Por lo tanto, cuando diseñe, debería considerar cuánto pueden ver los usuarios si sólo se desplazan un pantalla completa o dos. Más de cinco pantallas de largo podría indicarle que puede 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 en profundidad y los usuarios esperarían un poco más para ver algunos tipos de contenido y contenido de la página.

Tanto el desplazamiento como el inicial obviamente, la visibilidad depende 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 generará mucho más tráfico de Google?

No necesariamente, pero tal vez.

Como muchas cosas que hacer con la optimización de Google, tener un sitio web optimizado para dispositivos móviles es más o menos para garantizar que MANTENGA el tráfico que ya está obteniendo, no necesariamente para brindarle más gratis tráfico 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 ) al principio, pero con el tiempo, probablemente será un desafío extremadamente importante para navegar.

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

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 computadoras de 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 Para comprobar si hay problemas importantes de usabilidad móvil en su sitio

Google Search Console

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

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

• Herramienta de inspección de URL de Search Console
• Pagespeed Insights
• Think With Google
• Prueba de optimización para dispositivos móviles

Cómo hacer que su sitio web sea compatible con dispositivos móviles

Parte 1: PageSpeed Insights, prueba optimizada para dispositivos móviles y usabilidad móvil

Parte 2: ventanas gráficas, zoom y complementos

Parte 3: objetivos de toque, márgenes y tamaños de fuente

Parte 4 – Redirecciones

Los desarrolladores web deberían encontrar mi otro Publicación útil ahora que la velocidad del sitio es un factor de clasificación en Google:

QUOTE: «La versión móvil de un sitio web debería cargarse idealmente en menos de 3 segundos y el más rápido, mejor. UN SITIO MUY LENTO puede ser un factor de clasificación NEGATIVO (confirmado por Google). No hay un umbral establecido o una puntuación de velocidad que cumplir, ju st para hacer su página lo más rápido posible «. Shaun Anderson, Hobo 2020

Descargo de responsabilidad

Descargo de responsabilidad: «Mientras tengo Hice todo lo posible para asegurar que la información que he proporcionado sea correcta. No es un consejo. No puedo aceptar ninguna responsabilidad u obligación por errores u omisiones. El autor no responde por sitios de terceros o cualquier servicio de terceros. Visite sitios de terceros bajo su propio riesgo. No estoy asociado directamente con Google ni con ningún otro tercero. Este sitio web utiliza cookies solo para análisis y funciones básicas del sitio web. Este artículo no constituye asesoramiento legal. El autor no asume ninguna responsabilidad que pudiera derivarse del acceso a los datos presentados en este sitio. Los enlaces a páginas internas promueven mi propio contenido y servicios «. Shaun Anderson, vagabundo