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óviles 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?
La etiqueta meta viewport de un sitio web controla el ancho del sitio dependiendo del dispositivo en el que se encuentre el usuario.
Si no lo configuras correctamente estás condenando a tus visitantes a una pésima experiencia en móvil ya que la web no se está adaptando al dispositivo, obligando al usuario a pulsar y hacer un montón de zoom para poder entender y ver tu contenido. (Si es que deciden quedarse en tu sitio).
Si tu sitio web fue construido con el CMS de HubSpot, no necesitas preocuparte, tu sitio web se ajustará de manera automática a cualquier dispositivo. Pero si no lo está, incluso si utilizas un diseño web responsive o adaptable, necesitarás configurar la etiqueta meta viewport para poder ofrecer una buena experiencia a tus visitantes en dispositivos móviles.
En este post te enseñaré cómo hacerlo, pero primero entendamos un poco más sobre cómo funciona la etiqueta meta viewport y cómo se ve.
Cómo se ve tu sitio web con y sin 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.
<meta name=viewport content="width=device-width, initial-scale=1">
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:
<meta name=viewport content="width=667, initial-scale=1">
Todos los iPads tienen un ancho horizontal de 1024px, así que tendrías que colocar esta etiqueta en tu sitio:
<meta name=viewport content="width=1024, initial-scale=1">
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).