Diseño web responsivo

El diseño web responsivo (RWD) es una configuración en la que el servidor siempre envía el mismo código HTML a todos los dispositivos y se usa CSS para modificar el procesamiento de la página en el dispositivo. Los algoritmos de Google deberían detectar automáticamente esta configuración si se permite que todos los usuarios-agentes del robot de Google rastreen la página y sus elementos (CSS, JavaScript e imágenes).

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

TL;DR

  • Usa la etiqueta meta name="viewport" para indicarle al navegador cómo ajustar el contenido.
  • Consulta nuestro sitio Fundamentos de la Web para acceder a documentación adicional.

Cómo usar meta name="viewport"

Para indicar a los navegadores que la página se adaptará a todos los dispositivos, agrega una metaetiqueta al encabezado del documento:

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

A través de la metaetiqueta "viewport", se indica al navegador cómo ajustar las dimensiones y el escalamiento de la página al ancho del dispositivo. Cuando no se incluye este elemento, los navegadores para dispositivos móviles procesan de forma predeterminada la página con un ancho de pantalla de escritorio (por lo general, unos 980 px, aunque puede variar según el dispositivo). Luego, los navegadores para dispositivos móviles intentan mejorar el aspecto del contenido aumentando los tamaños de fuente y adaptando el contenido para que se ajuste a la pantalla o mostrando solo la parte del contenido que cabe en pantalla.

Para los usuarios, esto significa que el aspecto de la fuente puede ser inconsistente y que quizás deban presionar dos veces o pellizcar la pantalla a fin de acercar el zoom para ver el contenido correctamente y para interactuar con él. En lo que respecta a Google, es posible que determinemos que una página no está optimizada para dispositivos móviles debido a que se requiere este tipo de interacción en un dispositivo móvil.

En la página de la izquierda, no se incluye la metaetiqueta "viewport". Por lo tanto, cuando se muestra en un navegador para dispositivos móviles, se interpreta que el ancho corresponde a la versión de escritorio y se adapta la página para que quepa en la pantalla. Como resultado, el contenido es difícil de leer. A la derecha, vemos la misma página con una vista del puerto especificada que coincide con el ancho del dispositivo. El navegador para dispositivos móviles no adapta la página, y el contenido se puede leer.

Para imágenes responsivas, incluye el elemento <picture>.

Como regla general, si tu sitio funciona en navegadores recientes, como Google Chrome o Safari de Apple para dispositivos móviles, debería funcionar con nuestros algoritmos.

Por qué usar el diseño responsivo

Estos son algunos motivos por los cuales recomendamos usar el diseño responsivo:

  • Facilita a los usuarios compartir y vincular tu contenido mediante una sola URL.
  • 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 de escritorio o para dispositivos móviles.
  • Requiere menos tiempo de ingeniería para mantener varias páginas del mismo contenido.
  • Reduce la posibilidad de que se produzcan los errores comunes que afectan a los sitios móviles.
  • No es necesario redireccionar a los usuarios a la vista optimizada para el dispositivo, por lo que se reduce el tiempo de carga. Además, el redireccionamiento basado en el usuario-agente tiende a causar errores, lo que puede empeorar la experiencia del usuario en tu sitio (consulta la sección sobre dificultades al detectar usuarios-agentes para obtener más información).
  • Ahorra recursos cuando el robot de Google rastrea tu sitio. En el caso de las páginas con diseño web responsivo, solo es necesario rastrear tu página una vez con cualquier usuario-agente del robot de Google para recuperar todas las versiones del contenido en lugar de rastrearla varias veces con distintos usuarios-agentes. Esta mejora en la eficiencia del rastreo puede ayudar de forma indirecta a Google a indexar una mayor parte del contenido del sitio y a mantenerlo actualizado como debería.

Si te interesa el diseño web responsivo, consulta nuestra entrada de blog en Webmaster Central y visita el sitio Fundamentos de la Web.

JavaScript

Un punto que se debe tener muy en cuenta a la hora de crear sitios optimizados para dispositivos móviles es el uso de JavaScript para modificar el procesamiento y el comportamiento del sitio en diferentes dispositivos. JavaScript suele usarse, 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 responsivo que Google recomienda.

Configuraciones comunes

A continuación, se indican tres configuraciones populares de JavaScript en sitios optimizados para dispositivos móviles:

  • JavaScript adaptable: En esta configuración, todos los dispositivos reciben el mismo contenido HTML, CSS y JavaScript. Cuando se ejecuta el código JavaScript en el dispositivo, el procesamiento o el comportamiento de este sitio cambia. Esta es la configuración recomendada de Google cuando se requiere JavaScript en el sitio web.
  • Detección combinada: En esta configuración, el sitio web usa JavaScript y la detección de la capacidad del dispositivo desde el servidor para mostrar contenido distinto en los diferentes dispositivos.
  • 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 según el usuario-agente del dispositivo.

Analicemos en detalle cada configuración.

JavaScript adaptable

En esta configuración, una URL muestra el mismo contenido (HTML, CSS, JavaScript o una imagen) para todos los dispositivos. El procesamiento o el comportamiento de este sitio web cambian solo cuando se ejecuta el código JavaScript en el dispositivo. Es similar al funcionamiento de un sitio web con diseño web responsivo que usa consultas de medios CSS.

Por ejemplo, en una página se muestra el mismo código HTML para todos los dispositivos, que incluye 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 de JavaScript obtienen 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 del anuncio optimizados para smartphones en lugar de la alternativa de escritorio.

Esta configuración está muy relacionada con el diseño web responsivo, y nuestros algoritmos pueden detectarla de forma automática. Además, no requiere el encabezado HTTP Vary, ya que 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, te recomendamos esta configuración.

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 capacidades del dispositivo y modificar el contenido que se muestra.

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

Dado que el servidor muestra diferentes códigos HTML a los distintos usuarios-agentes, la detección combinada se considera una configuración de publicación dinámica. Si bien todos los detalles se explican en la sección sobre publicación dinámica, en resumen, el sitio web debería incluir el encabezado de respuesta HTTP "Vary: User-agent" cuando se solicite una URL donde se muestre contenido HTML distinto para diferentes usuarios-agentes.

JavaScript dinámico

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

En este caso, recomendamos que el archivo JavaScript se envíe con el encabezado 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 usuario-agente, además de indicar al robot de Google que rastree el archivo JavaScript utilizando diferentes usuarios-agentes.

Enviar comentarios sobre…