¿La ventana gráfica de su sitio web está configurada para usuarios móviles? Aquí está cómo hacerlo

¿Qué Tal? hablemos de ¿La ventana gráfica de su sitio web está configurada para usuarios móviles? Aquí está cómo hacerlo

Estás afuera con amigos, riendo, pasando un buen rato, cuando alguien le pregunta al grupo un acertijo total: «¿Por qué no existen las baterías ‘B’?»

Estás perplejo. Tus amigos están perplejos. Sacas tu teléfono inteligente y escribes la pregunta en la máquina de Google. Y boom: aparece la publicación de blog de una compañía de baterías sobre las especificaciones uniformes a nivel nacional para el tamaño de las celdas de la batería. Es exactamente lo que estabas buscando, nerd.

Pero aquí está la cosa: el contenido del sitio web se carga como si estuviera mirando el sitio en el escritorio. En otras palabras, la fuente y las imágenes son realmente diminuto, y descubre que tiene que acercar y desplazarse hacia adelante y hacia atrás para leer e interactuar con el contenido. Ahora eso es una experiencia de usuario molesta.

Este es un ejemplo de un problema de ventana gráfica.

¿Qué es una ventana gráfica?

La ventana gráfica de un sitio web controla el ancho de una página web para el dispositivo en el que el usuario la está viendo.

Si no configura correctamente la ventana gráfica de su sitio web, está condenando a sus visitantes móviles a varios minutos frustrantes de pellizcar y hacer zoom. (Es decir, si incluso eligen permanecer en su sitio). Y créanme, eso es probablemente un lote de los visitantes de su sitio web, ya que las consultas de búsqueda móviles ya han comenzado a superar a las de escritorio.

Si su sitio web está construido en CMS Hub, no necesita preocuparse por configurar una ventana gráfica. Su sitio se ajustará automáticamente a la ventana gráfica de cualquier dispositivo. Pero si no es así, incluso si está utilizando un diseño receptivo, deberá configurar su ventana gráfica para ofrecer una buena experiencia a sus visitantes móviles.

En esta publicación, te mostraré cómo hacer precisamente eso. Pero primero, comprendamos un poco mejor cómo funcionan las ventanas gráficas y cómo se ven.

Cómo se ve su sitio con una ventana gráfica y sin ella

Cuando no establece una ventana gráfica para dispositivos móviles, esos dispositivos mostrarán una página web con el ancho de una pantalla de escritorio típica y luego se escalarán para ajustarse a la pantalla de modo que el texto y los gráficos sean muy pequeños. Esto se denomina «ancho de reserva» y oscila entre 800 y 1024 píxeles.

Cuando usted hacer establecer una ventana gráfica para dispositivos móviles, el ancho de la página web se adaptará automáticamente al dispositivo móvil del usuario, brindándole una experiencia mucho mejor.

¿Cómo se ve eso? A continuación, la pantalla de la izquierda no tiene una ventana gráfica configurada, por lo que el navegador móvil asume el ancho del escritorio. La pantalla de la derecha hace tenga una ventana gráfica configurada, de modo que el navegador móvil sepa que debe coincidir con el ancho del dispositivo y escalar la página para que el contenido sea fácilmente legible.

Credito de imagen: Desarrolladores de Google

Primero, verifique si ya tiene una ventana gráfica configurada

Para comprobar, vaya a el sitio web Google Mobile Ready Check. Pegue su URL en el campo vacío y presione «Enviar» en la parte inferior. La herramienta ejecutará su sitio web a través de la prueba compatible con dispositivos móviles de Google y, si su ventana gráfica no está configurada, se lo indicará.

Si su ventana gráfica no está configurada, siga leyendo.

Cómo configurar la ventana gráfica de su sitio web

Para configurar una vista móvil, todo lo que tiene que hacer es agregar una metaetiqueta de ventana gráfica a todas y cada una de las páginas web que le gustaría que sean compatibles con dispositivos móviles.

Para hacer esto, simplemente copie el fragmento HTML a continuación y péguelo en el encabezado de su sitio.

ancho del dispositivoescala-inicial=1″>

En muchos casos, colocar esta etiqueta de ventana gráfica en el archivo de encabezado hará que la ventana gráfica se extienda por todo el sitio, lo que hará que todo su sitio web sea más compatible con dispositivos móviles. Pero tenga en cuenta que es posible que tenga que añade el etiqueta de viewport a todas y cada una de las páginas web individualmente, especialmente si usa diferentes software para su sitio web versus tus páginas de aterrizaje. Si no está utilizando una solución integrada como Páginas de destino de HubSpot o Centro de CMStendrá que verificar manualmente para asegurarse de que sus páginas de destino, las páginas del sitio y el blog tengan esta etiqueta de ventana gráfica para que sean compatibles con dispositivos móviles.

Nota: Agregando esta etiqueta no hacer que su sitio web responda a los dispositivos móviles; ese es un proceso completamente diferente, descrito aquí pero será haz que los usuarios de dispositivos móviles no tengan que acercar y alejar ni desplazarse hacia adelante y hacia atrás para leer e interactuar con el contenido de tu sitio web.

¿Qué pasa con el texto rojo?

Si deja el texto rojo («ancho del dispositivo») como está, eso solo significa que no desea establecer un ancho específico para mostrar su contenido, y su página web tomará el tamaño de su usuario. dispositivo automáticamente. La mayoría de ustedes querrá hacer esto.

Si tu hacer desea mostrar una pieza específica de contenido para un dispositivo específico por una razón u otra, entonces querrá reemplazar ese texto rojo con el ancho de píxel del dispositivo deseado. Al establecer un ancho dentro de la etiqueta (que, de nuevo, no es obligatorio), cualquier dispositivo se renderizará con ese ancho específico. (Por lo general, esto no se recomienda a menos que haya diseñado una página/sitio para un tamaño de pantalla específico. Además, no puede establecer más de una etiqueta de ventana gráfica; tendrá que elegir un tamaño de dispositivo y ceñirse a él).

Pero digamos que desea establecer un ancho específico. por ejemplo, el el ancho de los iPhones varía, pero digamos que desea que su sitio se muestre específicamente para un iPhone 6 cuando una persona lo sostiene en posición horizontal. Los iPhone 6 tienen un ancho horizontal de 667 px, por lo que colocaría esta etiqueta en su sitio:

667escala-inicial=1″>

Todos los iPads tienen un ancho horizontal de 1024 px, por lo que colocaría esta etiqueta en su sitio:

1024escala-inicial=1″>

¿Tener sentido? Aquí hay una lista completa de tamaños de ventana gráfica para tu referencia.

Tenga en cuenta que bSi indica que el ancho de su diseño es igual al ancho del dispositivo, tendrá problemas cuando los usuarios giren sus dispositivos móviles. Para evitar esto, *podría* usar JavaScript para elegir condicionalmente con qué atributos de etiqueta meta ir, como señala Ian Yates en esta publicación de blog … pero la solución más simple parece ser ignorar el ancho por completo y simplemente mantenerlo en «ancho del dispositivo».

La parte de «escala inicial» de la etiqueta HTML puede permanecer en uno pase lo que pase. Simplemente garantiza que cuando alguien abra su contenido, el diseño se mostrará correctamente en una escala de 1:1. Esto ayuda a que su página web aproveche el ancho total del paisaje sin importar la orientación del dispositivo móvil (vertical versus horizontal).

¡Eso es todo! ¿Tiene preguntas? Pregúntales en la sección de comentarios.

Para obtener más consejos sobre cómo mejorar el rendimiento de su sitio web, consulte nuestro recientemente renovado Calificador de sitios web. Esta herramienta en línea gratuita genera informes personalizados basados ​​en el rendimiento de su sitio, la preparación móvil, el SEO, la seguridad y más.

Hasta luego fué un gusto

sobre el autor

Estuardo Monroy

Te gustaría saber más sobre el autor, te invito que veas la sección de Nosotros en Consultor SEO, donde se extiende hablando sobre su experiencia, conocimientos y un poco de información personal.