Diseño web adaptable

Con la configuración de diseño web adaptable puedes enviar desde el servidor el mismo código HTML a todos los dispositivos, y se utiliza el código CSS para modificar el procesamiento de la página en el dispositivo. No debería haber problema para detectar automáticamente esta configuración con los algoritmos de Google si se permite el rastreo de la página y de sus elementos (CSS, JavaScript e imágenes) con todos los agentes de usuario del robot de Google.

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

TL;DR

  • Utiliza la etiqueta meta name="viewport" para indicarle al navegador cómo ajustar el contenido.
  • Consulta nuestro sitio Web Fundamentals para obtener más documentación.

Usar meta name="viewport"

Para indicar a los navegadores que la página se adaptará a todos los dispositivos, añade una metaetiqueta en la cabecera del documento:

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

Con la metaetiqueta de ventana gráfica se indica al navegador cómo ajustar las dimensiones y el escalado 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.

Para los usuarios, esto se traduce en que el tamaño de la fuente puede cambiar en función del dispositivo y en que estos quizás deban tocar la pantalla dos veces o pellizcarla para ampliar el contenido a fin de verlo correctamente e interaccionar con él. Puede que Google determine que una página no está optimizada para móviles cuando se realice este tipo de interacción en un dispositivo móvil.

Como en la página de la izquierda no se incluye la metaetiqueta de ventana gráfica, cuando esta se muestra en un navegador para móviles, se interpreta que la anchura es la de un ordenador y se adapta la página para que quepa en la pantalla, por lo que el contenido es 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 las propiedades de indexación a la página sin necesidad de señalar la existencia de páginas correspondientes para ordenadores o móviles.
  • Requiere menos tiempo de ingeniería para mantener varias páginas para el mismo contenido.
  • Reduce la posibilidad de que se produzcan los errores habituales que afectan a los sitios web para móviles.
  • No es necesario realizar ningún redireccionamiento para que los usuarios lleguen a la vista optimizada para su dispositivo, de modo que se reduce el tiempo de carga. Además, el redireccionamiento basado en el agente de usuario tiende a causar errores, lo que puede empeorar la experiencia de usuario en tu sitio web (consulta la sección Dificultades al detectar agentes de usuario para obtener más información).
  • Ahorra recursos cuando el robot de Google rastree tu sitio web. En el caso de las páginas con diseño web adaptable, solo se tiene que rastrear tu página una vez con cualquier agente de usuario del robot de Google para recuperar todas las versiones del contenido (en vez de rastrearlas varias veces con diferentes agentes de usuario). Esta mejora en la eficiencia de rastreo puede ayudar de forma indirecta a Google a indexar una parte mayor del contenido del sitio web y a mantenerlo debidamente actualizado.

Si te interesa el diseño web adaptable, consulta nuestra entrada de blog en el centro para webmasters y accede al sitio Web Fundamentals.

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. JavaScript suele utilizarse, por ejemplo, para 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 web optimizados para móviles:

  • JavaScript adaptable: en esta configuración, todos los dispositivos reciben el mismo contenido HTML, CSS y JavaScript. Cuando el código JavaScript se ejecuta en el dispositivo, el procesamiento o el comportamiento de este sitio web cambia. Google recomienda esta configuración cuando se requiere JavaScript en el sitio web.
  • Detección combinada: en esta configuración, se utiliza JavaScript y la detección de la capacidad del dispositivo desde el servidor para mostrar contenido distinto en función del dispositivo.
  • JavaScript dinámico: en esta configuración, todos los dispositivos reciben el mismo código HTML, pero el código JavaScript se envía desde una URL en la que se incluye de forma dinámica un código JavaScript adaptado al agente de usuario del dispositivo.

A continuación, veremos cada una de estas configuraciones con más detalle.

JavaScript adaptable

En esta configuración, una URL muestra el mismo contenido (HTML, CSS, JavaScript o una imagen) para todos los dispositivos. Solo cuando se ejecuta el código JavaScript en el dispositivo se altera el procesamiento o el comportamiento del sitio web. Esto es similar al funcionamiento de un sitio web con diseño adaptable en el que se realizan consultas de medios CSS.

Por ejemplo, en una página se muestra el mismo código HTML para todos los dispositivos, el cual incluye un elemento <script> por el que se 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. Cuando se ejecuta, JavaScript detecta el dispositivo y determina si se debe cambiar algo en la página; por ejemplo, incluir una imagen o un código de anuncio optimizados para smartphones en lugar de la versión optimizada 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 en la que el servidor funciona junto con JavaScript en el cliente para detectar las funciones del dispositivo y modificar en consecuencia el contenido que se muestra.

Por ejemplo, se puede modificar el procesamiento del contenido en 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.

Dado que se envía un código HTML distinto desde el servidor a los diferentes agentes de usuario, la detección combinada se considera una configuración de publicación dinámica. Esto se describe con detalle 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 el sitio web cuando se solicite una URL donde se muestre contenido HTML distinto para diferentes agentes de usuario.

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 envíe 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 agente de usuario, además de indicar al robot de Google que rastree el archivo JavaScript utilizando diferentes agentes de usuario.