divulgación: «este artículo es opinión personal de la investigación basada en mi experiencia de casi 20 años. No hay publicidad de terceros en esta página o enlaces monetizados de ningún tipo. Los enlaces externos a sitios de terceros son moderados por mí. Descargo. «Shaun Anderson, Hobo
no hay un mejor tamaño de pantalla para diseñar. Los sitios web deben transformarse rápida y responsablemente en todas las resoluciones de pantalla en diferentes navegadores y plataformas., Accesible. Compatible con dispositivos móviles. Primero diseña para tu audiencia. Diseño desde 360×640 hasta 1920×1080.
- Diseño para pantallas de escritorio de 1024×768 a 1920×1080
- Diseño para pantallas móviles de 360×640 a 414×896
- Diseño para pantallas de tabletas de 601×962 a 1280×800
- compruebe 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 responsivo y rápido., Utilice un diseño líquido o adaptable que se transforme al tamaño de la ventana del usuario actual.
- Monitor Google Search Console mobile-friendly and usability alerts
aún debe verse bien y funcionar bien en todos los tamaños, por lo que *solía* recomendar un diseño 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 visible toda la información clave sobre el pliegue para que los usuarios puedan verla sin desplazarse? Esta es una compensación entre la cantidad de elementos que se muestran frente a 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 su ancho asignado?
- estética de la página Web: ¿qué tan buena se ve su página cuando los elementos están en el tamaño y la ubicación adecuados para este tamaño de pantalla?, Hacer que todos los elementos se alineen correctamente-es decir, son subtítulos inmediatamente al lado de las fotos, etc.?
las pautas de usabilidad también recomiendan considerar los tres criterios en la gama completa de tamaños,. Compruebe la ventana del navegador de 360×640 a 1920×1080 resoluciones de pantalla.
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 tamaños aún más pequeños y más grandes, aunque tales extremos son menos importantes.,
aunque estos usuarios ciertamente deberían poder acceder a su sitio, darles un diseño menos que excelente 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 Responsive es una buena apuesta
cita: «Diseño Web Responsive: sirve el mismo código HTML en la misma URL, independientemente del dispositivo del usuario (por ejemplo, pero puede representar la pantalla de manera diferente en función del tamaño de la pantalla. Google recomienda el Diseño Web Responsivo porque es el patrón de diseño más fácil de implementar y mantener.,»Google Developer Guides, 2020
en el mundo actual, muchas personas están utilizando dispositivos de mano (tabletas y teléfonos inteligentes) para navegar por la web y el diseño de sitios web responsive (RWD) ha surgido como una solución muy probable (todavía es debatida por los aficionados) para los desafíos de tamaño de pantalla.
este método se aleja del uso de sitios web de Ancho fijo y en su lugar utiliza consultas de medios en hojas de estilo CSS para crear un sitio web que responda en tamaño a las diferentes vistas de dispositivos portátiles y pantallas más pequeñas que las personas utilizan.,
así que cualquier dispositivo que una persona pueda estar utilizando para ver su sitio web que son capaces de darles la experiencia más completa posible.
tabla de contenidos
Google prefiere sitios compatibles con dispositivos móviles
Google dicta el flujo y reflujo del comercio en línea y solo dictan que necesita diseñar para una experiencia de usuario satisfactoria en múltiples dispositivos si desea esperar posicionarse alto para 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 tu página con un dispositivo de ese tipo. Google utiliza un tipo de rastreador (móvil o de escritorio) como el rastreador principal para tu sitio. Todas las páginas de tu sitio que son rastreadas por Google son rastreadas usando el rastreador principal. El rastreador principal para todos los nuevos sitios web es el rastreador móvil. Además, Google recrawls algunas páginas en su sitio con el otro tipo de rastreador (móvil o de escritorio). Esto se llama rastreo secundario, y se hace 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, cómo un sitio compatible con dispositivos móviles ha afectado el rendimiento de clasificación de sitios web en una variedad de dispositivos.
si haces sitios web para pequeñas empresas, sabrás que quieren un sitio web que funcione bien en Google organic listings, sabes 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 uso 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 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 el rastreador predeterminado para sitios web.»Google Webmaster Guidelines, 2020
en este momento, eso esencialmente ahora significa un diseño de sitio web receptivo y compatible con dispositivos móviles, especialmente con Google «haciendo que nuestro índice sea primero móvil».,
desktop Screen Resolution Stats Worldwide May 2019 – May 2020
para referencia, aquí hay una lista de las resoluciones de pantalla principales actuales en todo el mundo según lo registrado 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 2019 – Mayo 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×736 – 3.74%
tablet screen resolution stats worldwide may 2019 – May 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%
desktop Screen Resolution Stats in the US May 2019 – May 2020
Top Screen Resolutions in the US (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 2019 – Mayo 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%
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%
Reino Unido mayo 2019 – mayo 2020
principales resoluciones de pantalla 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 Mayo 2019 – Mayo 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%
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%
compartir en todo el mundo
desktop vs mobile vs tablet market share worldwide
- mobile – 50.48%
- desktop – 46.51%
- tablet – 3.0%
*Nota – las estadísticas anteriores son de una fuente (aunque creíble), por lo que podrían ser sesgadas de maneras puede que no lo sepamos. Gráficos suministrados por http://statcounter.com/.,
¿cómo Puedo diseñar un sitio que tenga el mismo aspecto en cada navegador & resolución?
no se puede.
Es imposible diseñar un sitio web para que tenga el mismo aspecto en cada navegador, plataforma y resolución de pantalla, así que evita intentarlo.
Puede optar por un diseño fluido sin tablas para su diseño, con % anchos que se expanden y contraen para adaptarse a una configuración de navegador de visitantes o podría considerar buscar soluciones de diseño receptivo que logren casi lo mismo.,
Google favorece los diseños responsive, lo cual es una buena noticia para aquellos que lo han adoptado:
cita: «los sitios que hacen uso del diseño web responsive e implementan correctamente el servicio dinámico (que incluyen todo el contenido de escritorio y el marcado) generalmente no tienen que hacer nada.»Google NOV 2017
MOBILE está en aumento, por lo que si desarrolla un nuevo sitio web, debe pensar en lo amigable que es su sitio web desde el principio.
mi objetivo es mantener las cosas simples cuando realmente estoy codificando cosas.,
Usted no – no – puede – complacer a todo el mundo-y la pregunta qué tamaño del sitio web es el mejor sigue siendo un tema candente para el debate de los diseñadores con más usabilidad y experiencia de UX que yo.
lo que sé por experiencia es que es de importancia crítica para usted identificar a su audiencia y los dispositivos que utilizan, y construir su sitio web (en general) para adaptarse a esa audiencia.
y esa audiencia incluye GOOGLEBOT.
¿Su Sitio Móvil Redirigir a Otra URL & Versión De Su Sitio?
Bueno, eso no es ideal. De hecho, nunca lo ha sido.,
hace mucho tiempo, algunas personas usaban versiones de solo texto de un sitio web para producir contenido para usuarios/navegadores que no soportaban elementos de sus sitios web, en un intento (generalmente 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á cada vez que cambie la página principal. Sección 508
siempre ha sido ideal entregar una URL a un visitante con fines de accesibilidad, y no hay diferencia al 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, puede ser aún más importante si Google se está moviendo a un índice de mobile FIRST.,
Google puede muy bien calificarlo principalmente en su experiencia móvil en un futuro cercano, por lo que todos realmente necesitamos estar al tanto de los grandes cambios que podríamos ver muy pronto en las SERPs de Google.
Cuando Google es el ‘visitante’, generalmente es aún más importante entregar una sola URL debido a los desafíos de URL canónicas para los motores de búsqueda, y este ha sido el caso antes de la implementación del elemento canonical link hace algún tiempo.
así que la situación ideal es entregar una URL en todo momento.,
Si tiene contenido de «smartphone» (que vemos como contenido web normal, ya que generalmente es una página HTML normal, solo retocada 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 en la 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 URL, por lo que no es necesario usar subdominios / subdirectorios para sitios de teléfonos inteligentes y móviles., Sin embargo, aún mejor es usar las mismas URL y mostrar la versión apropiada del contenido sin una redirección John Mueller, Google
ignorar las recomendaciones de Google a menudo no es un movimiento inteligente
cita: para recapitular, actualmente nuestro rastreo, indexación, y los sistemas de 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., Mobile-first indexing significa que usaremos la versión móvil del contenido para indexar y clasificar, para ayudar mejor a nuestros usuarios, principalmente móviles, a encontrar lo que están buscando. Los Webmasters verán un aumento significativo del rastreo por el Googlebot de teléfonos inteligentes, 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 Nov 2017
Google ofrece los siguientes consejos para verificar que su sitio esté preparado para el índice mobile first, pero esencialmente, si está utilizando una plantilla de diseño web adaptable para su sitio, debe tener problemas mínimos con este cambio:
-
asegúrese de que la versión móvil del sitio también tenga contenido de calidad. Esto incluye texto, imágenes (con atributos alt) y videos, en los formatos rastreables e indexables habituales.,
-
Los datos estructurados son importantes para las funciones de indexación y búsqueda que los usuarios adoran: 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 se actualicen a la versión móvil en las páginas móviles.
-
los Metadatos deben estar presentes en ambas versiones del sitio. Proporciona pistas sobre el contenido de una página para indexar y servir., 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 son necesarios cambios para la interconexión con Url móviles separadas (sitios M.-dot). Para sitios que usan URL móviles separadas, mantenga los elementos link rel=canonical y link rel=alternate existentes entre estas versiones.
-
compruebe los enlaces hreflang en URL móviles separadas., Cuando se utilizan elementos link rel = hreflang para la internacionalización, enlace entre las direcciones URL móviles y de escritorio por separado. Hreflang de sus URLs móviles debe apuntar a las versiones de otros idiomas/regiones en otras URLs móviles, y de manera similar vincular escritorio con otras URLs de escritorio utilizando 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 usan diseño web responsivo y servicio dinámico, solo a los sitios donde la versión móvil está en un host separado, como m.example.com.
los usuarios esperan desplazarse por una página
como el primer criterio implica, el desplazamiento es siempre una consideración clave. A los usuarios generalmente no les gustaba desplazarse si no lo necesitaban, aunque, con los años, eso ha cambiado.
por lo tanto, cuando diseñes, debes considerar cuánto pueden ver los usuarios si se desplazan solo una o dos pantallas llenas., Más de cinco pantallas de largo podría ser una indicación para usted 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 en profundidad y los usuarios esperarían esperar un poco más para ver algunos tipos de contenido y contenido de la página.
tanto el desplazamiento como la visibilidad inicial dependen obviamente del tamaño de la pantalla: las pantallas más grandes muestran más contenido sobre el pliegue y requieren menos desplazamiento.
¿un cambio a un sitio móvil responsivo 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 compatible con dispositivos móviles es más o menos para asegurarse de mantener el tráfico que ya está recibiendo, no necesariamente darle más tráfico libre de Google.
Si aún no recibes mucho tráfico de los visitantes móviles, No estoy seguro de si esta actualización de Google tendrá un efecto notable en tus niveles de tráfico (al menos en analytics) al principio, pero con el tiempo, probablemente será un desafío extremadamente importante navegar.,
el listón de calidad está siendo elevado de nuevo por Google y sus usuarios, y si quieres competir en SERPs orgánicos cada vez más competitivos, este es otro obstáculo para que las pequeñas empresas lo superen.
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 del móvil a menudo son menos que en el escritorio.,
Google ha dicho que este algoritmo compatible con dispositivos móviles tendrá un mayor impacto en las SERPs que los Algoritmos de Google Penguin y Google Panda, y descubriremos más a medida que pase el tiempo.
Cómo verificar si hay problemas importantes de usabilidad móvil en su sitio
Google Search Console
debería poder rastrear los errores móviles en Google Search Console (también conocido como Google Webmaster Tools) y ver que los errores desaparecen con el tiempo si su sitio está configurado correctamente.,»>
Parte 1 – PageSpeed Insights, prueba amigable para móviles y usabilidad móvil
Parte 2-Viewports, zoom y plugins
Parte 3-Tap targets, márgenes y tamaños de fuente
parte 4 – redirecciones
los desarrolladores web deberían encontrar útil mi otra publicación reciente ahora que la velocidad del sitio es un factor de clasificación en Google:
cita: «la versión móvil de un sitio web debería cargarse idealmente en menos de 3 segundos y cuanto más rápido mejor., Un sitio muy lento puede ser un factor de Ranking negativo (confirmado por Google). No hay un umbral establecido o una puntuación de velocidad que cumplir, solo para hacer que su página sea lo más rápida posible.»Shaun Anderson, Hobo 2020
Descargo de responsabilidad
Descargo de responsabilidad: «Aunque he hecho todo lo posible para garantizar que la información que he proporcionado es correcta, no es un consejo.; No puedo aceptar ninguna responsabilidad u obligación por cualquier error u omisión. El autor no responde por los 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 acepta 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, Hobo