¿Está tu Etiqueta viewport configurada para dispositivos móviles?

Imagínate que estás cenando con unos amigos y alguien menciona que hay un concierto al día siguiente al que todos que todos queréis ir.

¿Cuántos segundos te tardas en sacar el móvil para empezar a buscar entradas? Muy pocos…¿verdad?

Y ¿cuántas veces te encuentras haciendo zoom tras zoom para poder leer webs que no han sido optimizadas para móviles y que sus imágenes son demasiado pequeñas y sus palabras ilegibles a simple vista?

En resumidas cuentas esto es una mala experiencia para el usuario, y también explica el problema con la etiqueta meta viewport.

¿Qué es una etiqueta meta viewport?

Cuando no creas una meta etiqueta viewport para los dispositivos móviles, esos dispositivos presentarán un sitio web con el ancho de una pantalla de computadora de escritorio y lo escalará para que se ajuste a la pantalla por lo que el texto y los gráficos serán muy pequeños. A esto se le llama "ancho de reserva" y varía de los 800 a los 1024 pixeles.

Cuando creas una meta etiqueta viewport para los dispositivos móviles, el ancho del sitio web se ajustará de manera automática al dispositivo móvil del usuario, dándoles una mejor experiencia.

¿Y, cómo se ve? La pantalla de la izquierda no tiene , así que el buscador móvil asume que tiene el ancho de la pantalla de una computadora de escritorio. La pantalla de la derecha tiene establecida la ventana de visualización, así que el buscador del móvil sabe de qué forma hacer coincidir el ancho del dispositivo y ajustar la página para que el contenido se pueda leer con facilidad.

Crédito: Google

Primero revisa si ya tienes la meta etiqueta viewport configurada

Para hacer esto, ve al sitio web de Google Mobile Ready Check. Pega tu URL en el y haz clic en "Submit" (Enviar) . La herramienta analizará tu sitio web a través de la prueba de compatibilidad con el móvil y si la meta etiqueta viewport no está configurada, te lo indicará.

Si si la meta etiqueta viewport no está configurada, sigue leyendo.

Cómo configurar la meta etiqueta viewport de tu sitio web

Para hacer esto, simplemente copia el fragmento HTML de abajo y pégalo en el encabezado (header) de tu sitio web.

En muchos casos, colocar la meta etiqueta viewport en el header hará que esta función se aplique en todo el sitio, lo cual hará que tu sitio web sea compatible con dispositivos móviles. Ten cuidado porque es posible que tengas que añadir la etiqueta a todas y cada una de tus páginas de manera individual, en especial si usas un software diferente para tu sitio web y tus páginas de destino. Si no utilizas una solución integrada como el CMS de HubSpot, tendrás que hacer una revisión manual para asegurarte de que tus páginas de destino, páginas del sitio y el blog tengan la meta etiqueta viewport para que sean compatibles con dispositivos móviles.

Nota: Añadir esta etiqueta no hará que tu sitio web responda a los dispositivos móviles (esto es un proceso totalmente diferente) pero hará que los usuarios de dispositivos móviles no tengan que realizar demasiados zooms para poder leer e interactuar con el contenido de tu web.

¿Qué es el texto rojo?

Si dejas el texto rojo ("device-width") como está, solo significa que no quieres definir un ancho específico para presentar tu contenido. Tu sitio web se ajustará de manera automática al tamaño del dispositivo que el usuario utilice. La mayoría de las personas eligen hacer esto.

Si por algún motivo quieres presentar un contenido específico en un dispositivo en particular, entonces deberás reemplazar ese texto rojo con el ancho de los pixeles del dispositivo deseado. Al fijar un ancho en la etiqueta (que no es necesario), cualquier dispositivo presentará el sitio web con un ancho específico. (Por lo general esto no se recomienda a menos que hayas diseñado una página/sitio para el tamaño específico de una pantalla. Además, no puedes establecer más de una etiqueta viewport así que tendrás que elegir el tamaño de un dispositivo y permanecer con él).

Digamos que quieres establecer un ancho en particular. Por ejemplo, el ancho de los iPhones varía, pero pongamos como ejemplo que quieres que tu sitio se vea de una forma específica en el iPhone 6 cuando una persona tiene su dispositivo en la posición horizontal (los iPhones tienen un ancho horizontal de 667px), así que colocarías esta etiqueta en tu sitio:

Todos los iPads tienen un ancho horizontal de 1024px, así que tendrías que colocar esta etiqueta en tu sitio:

Ten en cuenta que al definir que el ancho de tu diseño equivale al ancho del dispositivo tendrás problemas cuando los usuarios roten sus dispositivos móviles. Otra solución es que podrías utilizar JavaScript para elegir de manera condicional qué atributos de etiqueta meta deberías seleccionar, como Ian Yates menciona en su post (en inglés), pero todo indica que la solución más sencilla sigue siendo el "device-width".

La "escala inicial" de la etiqueta de HTML puede siempre permanecer en uno. Esto indica que cuando alguien abra tu contenido, el diseño se presente de manera apropiada en una escala de 1:1. Esto ayuda a que tu sitio web aproveche el ancho total de la vista horizontal sin importar la orientación del dispositivo móvil (vertical vs. horizontal).

¡Eso es todo! Si tienes alguna pregunta añádela a la sección de comentarios.

Para leer más consejos sobre cómo mejorar el rendimiento de tu sitio web, revisa nuestro recién renovado Website Grader. Esta herramienta gratuita genera informes personalizados basados en el rendimiento de tu sitio web, la compatibilidad con los móviles, SEO, seguridad y más.