Comprobación de adaptación. ¿Cómo probar el diseño receptivo? El valor de la etiqueta meta de la ventana gráfica no está establecido

¡Saludos! Así que es hora de hablar sobre la adaptabilidad del sitio. Esto, como probablemente sepa, es un parámetro muy importante. Con cada nuevo día, la cantidad de usuarios de tabletas y teléfonos inteligentes aumenta. Mi blog recibe el 30% del tráfico desde dispositivos móviles. Cuando aumentó el porcentaje de tráfico móvil, comencé a pensar en el diseño adaptable, que te aconsejo que hagas también. ¿Qué te dará? Esto aumentará la lealtad al blog tanto de los robots de búsqueda como de los visitantes.

Incluso un gran número ya viene con un diseño receptivo. Por supuesto, el diseño no siempre se realiza con alta calidad, por lo que debe realizar todo tipo de ediciones y mejoras usted mismo. ¿Cómo verificar la capacidad de respuesta del sitio web? Hay muchas herramientas y servicios útiles para esto.

La adaptabilidad y el diseño de alta calidad de su sitio web lo comprobaremos utilizando la funcionalidad integrada de los navegadores, así como varios servicios en línea. Bueno, ¿comencemos? Comencemos primero con los servicios en línea.

7 servicios para verificar la adaptabilidad del sitio web en línea

1. Servicio en línea ami.responsivedesign.is

Has llegado a la página principal del servicio.

Desplácese hasta la parte inferior y en el campo de entrada escriba la dirección de su blog. Haga clic en el botón "Ir".

Después de un tiempo, podrá ver cómo el sitio se adapta a varios dispositivos. El servicio es muy bueno, pero hay un pequeño defecto. Y radica en el hecho de que no puede mostrar adaptabilidad en varias de las resoluciones más populares.

Las tabletas y los teléfonos móviles tienen diferentes tamaños de pantalla y, por lo tanto, diferentes resoluciones. Por lo tanto, no esperará un análisis completo de este servicio)).

2. Servicio en línea deviceponsive.com

Aquí todo es igual que en el servicio anterior. Pegue la dirección del sitio web en el campo de entrada y haga clic en "Ir".

Ahora tenemos que bajar un poco, donde veremos el primer dispositivo "MacBook", que tiene una resolución de 1280 x 800 píxeles.

Puede desplazarse hacia abajo en la página y hacer clic en los elementos necesarios y comprobar la adaptabilidad. Desplácese hacia abajo para ver cómo se ve su proyecto en otros dispositivos, desde 1280x800 hasta 320x240 píxeles. Este servicio le mostrará la imagen completa, a diferencia del anterior.

3. Servicio en línea responsinator.com

En la esquina superior izquierda, inserte el nombre de su recurso en la ventana, haga clic en "Ir". Tendrás que esperar un poco mientras carga la página y podrás ver el resultado.

El ancho de cada pantalla de los dispositivos está firmado aquí, y hay muchos aquí.

4. Servicio en línea quirktools.com

Otro servicio con el que puedes comprobar la adaptabilidad del sitio online. Introduzca el nombre del sitio web en el campo y haga clic en "Ir".

Lo que me gusta aquí es que el servicio puede mostrar la adaptabilidad de incluso un televisor)).

5. Servicio en línea symby.ru

Seguimos los pasos que le son familiares y nos regocijamos con el resultado.

6. Servicio en línea responsive.is

Un proyecto maravilloso para probar la adaptabilidad del sitio. Hay muchas resoluciones de pantalla para teléfonos y tabletas.

7. Servicio en línea mattkersley.com

El servicio más simple para comprobar el diseño adaptativo del sitio. Casi todas las resoluciones conocidas de dispositivos móviles están disponibles aquí.

Verifique el sitio web para ver la capacidad de respuesta móvil usando el navegador Mozilla

El famoso navegador Mozilla Firefox tiene una rica funcionalidad. Con la ayuda de esta herramienta de Mozilla, comprobaremos la adaptabilidad del sitio. Realizamos los siguientes pasos: ir al "menú" - "desarrollo" - "diseño responsivo". Estas acciones se pueden realizar usando el teclado presionando varias teclas ++[M] simultáneamente.

Después de haber realizado los pasos, verá lo siguiente.

Al cambiar la resolución, puede ver cómo se muestra su proyecto a una audiencia móvil.

Prueba de capacidad de respuesta del sitio web de Google

Con la ayuda del megagigante Google Chrome, también puedes comprobar la adaptabilidad de tu proyecto. Hacemos lo siguiente: vaya al "menú", luego al elemento "Herramientas adicionales" y "herramientas de desarrollador ()".

Comprobando la adaptabilidad del sitio Yandex

Si desea verificar la adaptabilidad de Yandex en el sitio, debe registrarse en Yandex. Administrador de página web. Vamos al webmaster, luego encontramos el elemento "Comprobación de páginas móviles", hacemos clic en este elemento y miramos el resultado.

Conclusión

Creo que en el trabajo diario con el diseño de sitios web será más fácil utilizar la funcionalidad de los navegadores de Google y Mozilla. Bueno, para calmar el alma, use los servicios en línea para verificar la adaptabilidad del sitio. Verifique la adaptabilidad de su proyecto, realice cambios, corrija errores. Bueno, eso es todo para mí. ¡Chau a todos!

Atentamente, Vyacheslav Koptyakov!

Hoy no hay necesidad de convencer a nadie de la necesidad de una versión móvil del sitio. Después de todo, cada día hay más y más visitantes desde teléfonos inteligentes y tabletas. En el momento de escribir este artículo, alrededor del 20 % de los visitantes de mi blog utilizan dispositivos móviles para navegar. Es decir, cada quinto visita mi sitio desde un teléfono o tableta.

Hace unos años, ni siquiera pensaba en tales visitantes, pero cuando su número superó el 10% del total, comencé a utilizar el diseño adaptable. Esto permitió mostrar correctamente el contenido en los dispositivos móviles y aumentar la lealtad de los visitantes y los motores de búsqueda al sitio.

La versión móvil del sitio y el diseño adaptativo no son lo mismo. Este artículo se centrará en probar el diseño adaptable, cuando el diseño del sitio cambia según la resolución de pantalla del dispositivo del visitante.

Para asegurarse de que su sitio se muestre correctamente en dispositivos móviles, debe verificar, y para esto existen varios servicios y herramientas útiles.

Comprobación rápida del diseño adaptable

Navegador de Internet popular (navegador) Mozilla Firefox está equipado con una herramienta integrada para comprobar la idoneidad del diseño del sitio para su visualización en dispositivos móviles. Para usarlo, vaya a "Menú" - "Desarrollo" - "Diseño adaptativo". O simplemente presione tres teclas en el teclado al mismo tiempo ++[M]

Debería ver algo como esto:

Al cambiar la resolución y la orientación de la pantalla, puede verificar cómo se mostrará su sitio a los visitantes móviles.

Navegador de Google Cromo también tiene soporte incorporado para verificar la adaptabilidad del diseño del sitio. Para hacer esto, vaya al menú, seleccione el elemento "Herramientas adicionales" y luego "herramientas de desarrollador" (o presione la tecla ).

Después de eso, presione el ícono de diseño receptivo (o presione simultáneamente en el teclado ++[M]):

En el medio de la pantalla verás cómo se mostrará tu sitio en las pantallas de los dispositivos móviles:

Pruebas SEO de diseño móvil

Como saben, los dos líderes mundiales de búsqueda, Google y Yandex, tienen su propia opinión poco modesta sobre cómo debe verse el sitio en las pantallas de los dispositivos móviles. Y si el sitio se reconoce como un inconveniente para los visitantes móviles, se cae en los resultados de búsqueda. Entonces, desde el punto de vista de SEO, si no desea perder visitantes móviles, entonces no solo debe tener un diseño receptivo, sino que los motores de búsqueda deben considerarlo receptivo, es decir, compatible con dispositivos móviles.

Para verificar la adaptabilidad utilizando el servicio de Google, vaya a la siguiente dirección e ingrese el nombre de su sitio: https://www.google.com/webmasters/tools/mobile-friendly/.

Así es como se ve el resultado de revisar mi blog:

Con Yandex, es un poco más complicado, para verificar, debe registrarse en el servicio Yandex.Webmaster y usar la versión beta de la interfaz:

Servicios en línea para comprobar la adaptabilidad

La tarea principal de estos servicios es presentar (mostrar) cómo se verá su sitio en un dispositivo móvil. Hay muchos sitios con esa funcionalidad. Citaré sólo algunos de ellos. En la mayoría de los casos, duplican la funcionalidad integrada de FireFox y Chrome.

cambio de tamaño de Google

Empezaré de nuevo con Google, que tiene su propio servicio de demostración de adaptabilidad: http://design.google.com/resizer/#

Mosca de pantalla Quirktools

El segundo buen servicio es http://quirktools.com/screenfly/. ¡Mostrará cómo su sitio puede verse incluso en la televisión!

Adaptación de Symby.ru

Bueno, para no ofender al "fabricante nacional", daré un ejemplo de otro sitio: http://symby.ru/adaptest/. En una página, verá varias vistas con diferentes resoluciones de pantalla a la vez.

La velocidad de la versión móvil del sitio.

Después de asegurarse de que su sitio responde y se muestra correctamente en las pantallas de la mayoría de los dispositivos, debe verificar la velocidad de su trabajo. De nuevo en relación con los visitantes móviles.

Perspectivas de velocidad de página

Google siempre está a la vanguardia: https://developers.google.com/speed/pagespeed/insights/ . Este servicio mostrará cómo se ve el sitio en la pantalla del teléfono y dará recomendaciones sobre cómo optimizar el código para aumentar la velocidad de descarga en los dispositivos móviles.

Prueba de página web

Y en conclusión, daré un ejemplo de un servicio que no solo mostrará cómo se ve el sitio en un dispositivo móvil, sino que también mostrará la velocidad de su trabajo: http://www.webpagetest.org/

conclusiones

En mi opinión, en el trabajo diario, al realizar cambios en el diseño del sitio, es más fácil utilizar las funciones integradas de los navegadores FireFox y Chrome. Después de eso, por supuesto, debe verificar la lealtad de los motores de búsqueda a su diseño. Y solo entonces, para calmar el alma o presumir, puede usar los servicios en línea.

Un usuario moderno navega por sitios web no solo desde una computadora, sino también desde un teléfono inteligente o tableta. Para la comodidad de las personas, los creadores del sitio deben hacerlo receptivo para mostrarse en todos los dispositivos comunes y en todas las resoluciones. Por lo tanto, todo diseñador web y desarrollador web debe conocer los principios del diseño receptivo. Para verificar la adaptabilidad del sitio, hay muchos servicios especiales, de los cuales hemos seleccionado los más convenientes y funcionales, cuyo uso es gratuito.

XResponder

Esta herramienta admite una gran selección de dispositivos que se pueden ver al desplazar el sitio hacia los lados. Le recomendamos que marque XRespond como favorito.

Repatrocinar

El servicio Responsinator le permite verificar la visualización del sitio en orientación horizontal y vertical en iPhone, teléfonos inteligentes Nexus y iPad. También existe la posibilidad de cambiar entre HTTP y HTTPS.

Comprobador de diseño receptivo

El verificador de diseño receptivo brinda la capacidad de verificar la adaptabilidad del sitio en teléfonos inteligentes, incluidos teléfonos nuevos, como Google Pixel, tabletas, diferentes resoluciones de monitor, y también le permite ajustar el tamaño de la ventana usted mismo.

matt kersley

Matt Kersley, un diseñador y desarrollador de Inglaterra, lanzó su propio servicio en su sitio web, donde se puede comprobar la adaptabilidad del sitio, donde el ancho predeterminado es de 240 píxeles. Kersley decidió no agregar tamaños adicionales y se limitó a cinco: 240 px, 320 px, 480 px, 768 px, 1024 px.

El diseñador publicó el código de la herramienta en github para aquellos que deseen instalarlo en su sitio.

¿Soy receptivo?

¿Soy receptivo? es una excelente opción si necesita verificar rápidamente la adaptabilidad del sitio en varios dispositivos y demostrárselo al cliente en una captura de pantalla.

Prueba compatible con dispositivos móviles

Google tiene muchos servicios para ayudar al webmaster y Mobile-Friendly Test es uno de ellos. La prueba de compatibilidad con dispositivos móviles es diferente del resto de los servicios web de nuestra lista: no se puede usar para ver cómo se muestra el sitio en diferentes dispositivos. Su función es verificar la optimización del sitio en dispositivos móviles, mientras brinda consejos sobre cómo solucionar problemas. No hay duda sobre el valor de los consejos de Google.

“Gerente de proyectos del equipo de Business Motor, webmaster, redactor.
La adaptación móvil es una etapa importante del trabajo con el sitio. Con la introducción del factor de clasificación móvil, la incorporación se ha vuelto aún más importante. Te contamos cómo realizar pruebas básicas de movilidad del sitio»

La comodidad de visualización del sitio en dispositivos móviles es un factor cuya importancia ha ido en aumento en los últimos años. Y el punto aquí no está solo en el creciente número de usuarios que ven sitios desde teléfonos inteligentes y tabletas, sino también en la clasificación a nivel de los motores de búsqueda.

Google anunció oficialmente la influencia de este factor en la posición del sitio el 21/04/2015. Más recientemente, apareció información sobre Yandex en el blog. El algoritmo, que tiene en cuenta la conveniencia de mostrar el sitio en dispositivos móviles, se llamó "Vladivostok" y, según los representantes de Yandex, ya se está implementando activamente en Rusia.

La importancia de adaptar los sitios web a las necesidades de los usuarios móviles es cada vez mayor y seguirá creciendo en el futuro. La adaptación móvil se reflejará tanto en las conversiones de visitantes como en la clasificación de la página en los resultados de búsqueda. Pero, ¿cómo saber si su proyecto cumple con estos requisitos? ¿Cómo determinar si un sitio es compatible con dispositivos móviles en todos los detalles? Hablaremos de esto en nuestra revisión de hoy.

¿El sitio es compatible con dispositivos móviles?

La primera etapa del diagnóstico es abrir el sitio en dispositivos móviles usted mismo. Pero incluso aquí no todo es tan simple como podría parecer, porque ciertos problemas de adaptabilidad pueden manifestarse solo en ciertos navegadores y en ciertos tamaños de pantalla. Por esta razón, recomendamos probar:

• en un teléfono inteligente con una orientación de pantalla vertical (incluso en pantallas estrechas de aproximadamente 300 píxeles de ancho);
• en un teléfono inteligente con una orientación de pantalla horizontal (desde 480 píxeles de ancho);
• en tabletas con una orientación de pantalla vertical y horizontal (desde 768 píxeles de ancho).

Es natural que probar un sitio en diferentes dispositivos no siempre sea un inconveniente. Aunque solo sea porque a la mano puede no ser todos los dispositivos necesarios para esto. Puede resolver este problema utilizando varios emuladores de pantalla móvil. Sin embargo, no es necesario ponerse en contacto con un servicio de terceros: un emulador similar está preinstalado en Google Chrome. Para usarlo, simplemente abra el sitio de interés, presione F12 (llame a la consola del desarrollador) y haga clic en el icono con la imagen de un teléfono móvil:

Es sumamente importante tener en cuenta las características de los navegadores móviles, porque también pueden tener sus propias características. Al realizar la prueba, es importante ver el sitio en:

• navegador con sistema operativo Android preinstalado;
• Google Chrome móvil;
• navegadores "rápidos", por ejemplo, Opera Mini o UC Browser;
• Safari (por ejemplo, en el iPhone).

¿Cómo ven los motores de búsqueda tu sitio?

La primera prueba automática que debe pasar si está interesado en el problema de adaptabilidad de su sitio es prueba compatible con dispositivos móviles de google. Esta herramienta es bastante simple y da un veredicto inequívoco con respecto a la optimización de páginas para dispositivos móviles. Y si la respuesta es no, es casi seguro que el sitio se considera inconveniente para pantallas pequeñas y al nivel de los algoritmos de Google, con todas las consecuencias que ello conlleva.

Si hay algún reclamo sobre el formato de contenido en las pantallas de los teléfonos inteligentes, se enumerarán aquí. Esto le permitirá diagnosticar rápidamente problemas de visualización específicos y pasar directamente a resolverlos:

Tenga en cuenta que una captura de pantalla de un sitio en una pantalla móvil en los resultados del escaneo puede no coincidir con la forma en que lo ve en un teléfono inteligente. En la mayoría de los casos, esto se debe al hecho de que solo los archivos indexados por el motor de búsqueda participan en la prueba compatible con dispositivos móviles, y los archivos de estilo (css) y los scripts (js) a menudo se cierran para la indexación en el nivel de robots.txt. Por cierto, de acuerdo con las últimas recomendaciones de Google, deberían hacerse visibles para los motores de búsqueda.

Optimización de sitios web para dispositivos móviles en la oficina del webmaster de Google y Yandex

Es importante tener en cuenta que la información sobre cómo el sitio corresponde a las ideas de los motores de búsqueda sobre la conveniencia de mostrar en dispositivos móviles se puede obtener en las oficinas de los webmasters: Consola de búsqueda de Google y Yandex.Webmaster (hasta ahora solo en la versión beta de la nueva cuenta).

En Google Search Console, los resultados de la comprobación de la página actual están disponibles aquí: Tráfico de búsqueda => Experiencia móvil. Esta página duplica la información que podemos obtener mediante la prueba de compatibilidad con dispositivos móviles, pero se proporciona para todas las páginas indexadas del sitio a medida que las rastrean los robots de Google:

En la oficina del nuevo webmaster en Yandex, los datos de verificación actuales en masa aún no se muestran. En su lugar, puede encontrar una herramienta similar a la prueba amigable para dispositivos móviles de Google. Con él, puede verificar manualmente si los algoritmos del motor de búsqueda consideran que una página en particular es conveniente para ver en los teléfonos inteligentes.

PD

Cómo los motores de búsqueda perciben el sitio y su adaptabilidad es un tema extremadamente importante, pero la experiencia del usuario es igualmente importante. Entonces, de acuerdo con las características formales, la página puede cumplir completamente con los requisitos de facilidad de visualización en dispositivos móviles, pero en realidad, para los usuarios "en vivo", esta conveniencia será dudosa. El resultado directo de esto es conversiones más bajas, pérdida de ventas, peores factores de comportamiento (que, a su vez, también afectan las clasificaciones).

En el próximo artículo de este ciclo en una semana, le diremos cómo ver el sitio a través de los ojos de sus visitantes, cómo encontrar cuellos de botella en la visualización móvil y qué criterios se deben utilizar para evaluar su conveniencia.

conclusiones

La facilidad de visualización de un sitio en dispositivos móviles está desempeñando un papel cada vez más destacado tanto en la conversión como en la clasificación de búsqueda de las páginas.

El primer paso para evaluar la adaptabilidad del sitio es probarlo en diferentes pantallas y en diferentes navegadores móviles.

Para averiguar cómo los motores de búsqueda evalúan la conveniencia de mostrar un sitio en dispositivos móviles, ayudará la prueba móvil amigable de Google, así como la funcionalidad correspondiente en las oficinas del webmaster (Google Search Console y la nueva oficina del webmaster en Yandex).

En muchos países, los teléfonos inteligentes se usan más comúnmente para navegar por Internet que las computadoras. Por lo tanto, es muy importante adaptar el sitio para dispositivos móviles. Para saber si sus páginas son adecuadas para usuarios de teléfonos inteligentes, una herramienta especial en Search Console lo ayudará.

Uso

Comprobar si una página es adecuada para verla en un teléfono inteligente es fácil: simplemente ingrese su URL completa. La comprobación suele tardar menos de un minuto. Si hay redireccionamientos en la página, también serán procesados.

Según los resultados de la verificación, verá cómo se ve la página en un teléfono inteligente y descubrirá qué problemas pueden surgir al verla. En la mayoría de los casos, se trata de letra pequeña (difícil de leer en una pantalla pequeña) y elementos Flash (no compatibles con la mayoría de los dispositivos móviles).

El valor de la etiqueta meta de la ventana gráfica no está establecido

El código de la página no especifica la propiedad de la ventana gráfica, que le indica al navegador cómo cambiar correctamente el tamaño de los elementos de la página para que se ajusten al tamaño de la pantalla del dispositivo. Para que su sitio se muestre correctamente en diferentes tamaños de pantalla, ajuste la ventana gráfica usando la etiqueta meta de la ventana gráfica. Los detalles sobre esto se proporcionan en la sección Conceptos básicos de diseño web receptivo de nuestra guía.

La metaetiqueta de la ventana gráfica debe tener un valor de ancho de dispositivo

La adaptación de la página para pantallas de diferentes tamaños es imposible, ya que la propiedad de la ventana gráfica con un ancho fijo se especifica en su código. En este caso, debe aplicar un diseño receptivo ajustando la escala de la página según el tamaño de la pantalla.

Contenido más ancho que la pantalla

Este informe identifica las páginas en las que debe desplazarse horizontalmente para ver el texto y las imágenes. Este problema ocurre cuando los tamaños de CSS se establecen en valores absolutos o cuando se usan imágenes diseñadas para un ancho de ventana de navegador específico. Asegúrate de que los valores de ancho y posición de los elementos CSS sean relativos y que las imágenes se escalen. Se proporciona información detallada sobre esto en la sección Tamaños de contenido de la ventana gráfica de nuestra guía.

Fuente demasiado pequeña

Este informe enumera las páginas con letra pequeña que requieren que los usuarios se acerquen para leer. Después de configurar la ventana gráfica, debe determinar los tamaños de fuente para que se muestren correctamente en ella.