Diseño web adaptable

Al usar el diseño web adaptable, tu servidor enviará el mismo código HTML a todos los dispositivos, pero el contenido se renderizará para adaptarse a los distintos dispositivos mediante el código CSS. Si se permite el rastreo de la página y de sus recursos (CSS, JavaScript e imágenes) con todos los user-agent del robot de Google, no debería haber problemas para detectar automáticamente esta configuración con los algoritmos de Google.

Con el diseño adaptable, se envía a todos los dispositivos un mismo código que se ajusta al tamaño de la pantalla.

TL;DR

  • Indica al navegador cómo debe ajustar el contenido en la etiqueta meta name="viewport".
  • Consulta más documentación en el sitio web Aspectos básicos de la Web.

Usar meta name="viewport"

Para indicar a los navegadores que tus páginas se adaptan a todos los dispositivos, añade una metaetiqueta en la cabecera de los documentos:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Con la metaetiqueta de viewport, se indica al navegador cómo debe ajustar las dimensiones y la escala de la página a la anchura del dispositivo. Si no se incluye esta metaetiqueta, se procesa automáticamente la página con una anchura de pantalla propia de ordenadores en los navegadores para móviles (por lo general, unos 980 px, aunque puede variar según el dispositivo). A continuación, se intenta mejorar el aspecto del contenido en los navegadores para móviles aumentando los tamaños de fuente y adaptando el tamaño del contenido para que se ajuste a la pantalla, o bien mostrando solo la parte del contenido que cabe en pantalla.

En estos casos, el tamaño de la fuente puede cambiar en función del dispositivo, por lo que es posible que, en algunos dispositivos, los usuarios tengan que tocar la pantalla dos veces o pellizcarla para ampliar el contenido y así poder verlo correctamente e interaccionar con él. Si los usuarios deben interactuar con una página de este modo en un dispositivo móvil, Google puede determinar que no está optimizada para móviles.

Como en la página de la izquierda no se incluye la metaetiqueta de viewport, cuando esta se muestra en un navegador para móviles, se asume que la anchura es la de un ordenador. En consecuencia, la página se adapta para que quepa en la pantalla, lo que hace que el contenido sea difícil de leer. A la derecha vemos la misma página con una ventana gráfica, por lo que la anchura de la página coincide con la del dispositivo. En este caso, no se adapta la página en los navegadores para móviles, y el contenido se puede leer.

Si quieres que las imágenes sean adaptables, incluye el elemento <picture>.

Por regla general, si el sitio web funciona en un navegador reciente, como Google Chrome o Apple Mobile Safari, debería funcionar con nuestros algoritmos.

Por qué usar el diseño adaptable

Recomendamos el uso del diseño web adaptable porque ofrece los siguientes aspectos positivos:

  • Si se usa una sola URL, a los usuarios les resulta más fácil compartir el contenido y enlazarlo.
  • Permite que los algoritmos de Google asignen correctamente propiedades de indexación a la página sin tener que señalar que existen páginas equivalentes para ordenadores o móviles.
  • Los ingenieros no deben dedicar tiempo a mantener varias páginas que muestren el mismo contenido.
  • Reduce la posibilidad de cometer errores habituales que afectan a los sitios web móviles.
  • No hace falta redirigir a los usuarios para que obtengan la vista optimizada para su dispositivo, de modo que se reduce el tiempo de carga. Además, si se redirige a los usuarios en función de su user-agent, se suelen producir errores, lo que puede empeorar la experiencia de usuario en tu sitio web. Consulta las dificultades que surgen al detectar user-agent para obtener más detalles.
  • Ahorra recursos cuando el robot de Google rastrea tu sitio web. Basta con rastrear las páginas que usan el diseño web adaptable una vez con cualquier user-agent del robot de Google para obtener todas las versiones del contenido; no hace falta rastrearlas varias veces con diferentes user-agent. Esta mejora en la eficiencia de rastreo puede ayudar de forma indirecta a Google a indexar una mayor parte del contenido de tu sitio web y mantenerlo debidamente actualizado.

Si te interesa el diseño web adaptable, consulta nuestra entrada de blog en el Centro para Webmasters de Google y visita el sitio web Aspectos básicos de la Web.

JavaScript

Un tema que se debería tener en cuenta a la hora de crear sitios optimizados para móviles es el uso de JavaScript para modificar el modo en el que se procesa y se comporta el sitio en distintos dispositivos. Por ejemplo, con JavaScript se puede determinar qué anuncio o qué resolución alternativa de imagen se mostrará en la página.

En esta sección se describen las diferentes formas de usar JavaScript y cómo se ajustan al diseño web adaptable que Google recomienda.

Configuraciones habituales

A continuación te indicamos tres configuraciones populares de JavaScript en sitios optimizados para móviles:

  • JavaScript adaptable: con esta configuración, todos los dispositivos reciben el mismo contenido HTML, CSS y JavaScript. No obstante, cuando se ejecuta el código JavaScript en un dispositivo, el renderizado o el comportamiento del sitio web cambian. Si un sitio web necesita JavaScript para funcionar, Google recomienda usar esta configuración.
  • Detección combinada: con esta configuración, se utiliza JavaScript y el servidor para detectar la capacidad del dispositivo con el fin de mostrar contenido distinto en función del dispositivo.
  • JavaScript dinámico: con esta configuración, todos los dispositivos reciben el mismo código HTML, pero el código JavaScript proviene de una URL que proporciona código JavaScript adaptado al user-agent de los dispositivos.

A continuación, se muestran todas estas configuraciones con más detalle.

JavaScript adaptable

Con esta configuración, las URL proporcionan el mismo contenido (HTML, CSS, JavaScript o una imagen) a todos los dispositivos. Sin embargo, cuando se ejecuta el código JavaScript en los dispositivos, cambia el renderizado o el comportamiento de las páginas. Este método funciona de un modo similar al diseño web adaptable, en el que los sitios web utilizan media queries de CSS.

Por ejemplo, en una página se proporciona el mismo código HTML a todos los dispositivos, y en ese código hay un elemento <script> que solicita una URL externa con la que se envía el código JavaScript. Todos los dispositivos que solicitan la URL del código JavaScript reciben el mismo código. No obstante, cuando este código se ejecuta, se detecta el dispositivo y se determina si se debe cambiar algo en la página; por ejemplo, si se debe incluir una imagen o un código de anuncio optimizados para smartphones y no para ordenadores.

Esta configuración está muy relacionada con el diseño web adaptable, y nuestros algoritmos pueden detectarla de forma automática. Es más, esta configuración no requiere la cabecera HTTP Vary porque no se muestra contenido dinámico en las URL de la página ni en sus elementos. Debido a estas ventajas, si tu sitio web requiere JavaScript, esta sería nuestra configuración recomendada.

Detección combinada

La detección combinada es una configuración con la que el servidor y el código JavaScript del cliente detectan juntos la capacidad del dispositivo y modifican en consecuencia el contenido que se muestra.

Por ejemplo, se puede modificar el renderizado del contenido de un sitio web en función de si el dispositivo es un ordenador o un smartphone. En este caso, se puede incluir JavaScript en el sitio web para detectar las dimensiones de la pantalla, que se envían a continuación al servidor desde el que, a su vez, se actualiza o se modifica el código enviado al dispositivo. Normalmente, con el código JavaScript, se incluye la capacidad de los dispositivos detectados en una cookie que se interpreta en el servidor en las siguientes visitas desde el mismo dispositivo.

Como se envía un código HTML distinto desde el servidor a los diferentes user-agent, la detección combinada se considera una configuración de publicación dinámica. Los detalles se describen en la sección de publicación dinámica, aunque, en resumen, se debería incluir la cabecera de respuesta HTTP "Vary: User-agent" en los sitios web cuando se soliciten URLs donde se muestre contenido HTML distinto en función del user-agent.

JavaScript dinámico

En esta configuración, todos los dispositivos reciben el mismo código HTML, que incluye un elemento <script> para incluir un archivo JavaScript externo que puede tener contenido diferente según el agente de usuario solicitante. Es decir, el código JavaScript se envía de forma dinámica.

En este caso, se recomienda que el archivo JavaScript se proporcione con la cabecera HTTP "Vary: User-agent". De este modo, se indica a los sistemas de caché de Internet y al robot de Google que JavaScript puede ser diferente según el user-agent, además de indicar al robot de Google que rastree el archivo JavaScript utilizando user-agent distintos.