Diseño web responsivo

El diseño web responsivo 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 (imágenes, CSS y JavaScript).

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

A modo de resumen

  • Usa la etiqueta meta name="viewport" para indicar al navegador cómo debe adaptarse el contenido.
  • Consulta Fundamentos de la Web para acceder a más documentación.

Cómo usar meta name="viewport"

Para indicar a los navegadores que tu página se adapta a todos los dispositivos, agrega una metaetiqueta en el 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 adaptar 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 computadora 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 e interactuar con él. Para Google, podríamos no juzgar una página como optimizada para dispositivos móviles porque 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 para computadoras 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 para computadoras de escritorio o dispositivos móviles.
  • Se 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 usuarios-agentes es propenso a errores y puede degradar la experiencia del usuario de tu sitio (consulta Desventajas en la detección de 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 adaptan 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 cambia 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.

Como ejemplo, una página muestra para todos los dispositivos el mismo HTML que incluye un elemento <script> que solicita una URL externa que publica JavaScript. Todos los dispositivos que solicitan la URL de JavaScript obtienen el mismo código. Cuando se ejecuta, JavaScript detecta el dispositivo y decide modificar algo de la página, por ejemplo, para incluir una imagen compatible con smartphones o agregar código en lugar de las alternativas 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. Los detalles se describen en su totalidad en la sección de publicación dinámica, pero para resumir brevemente, el sitio web debe incluir el encabezado de respuesta HTTP "Vary: User-agent" cuando se solicita una URL que muestra contenido HTML diferente a 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, se envía el código JavaScript de forma dinámica.

En este caso, recomendamos que el archivo JavaScript se muestre 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…