Responsive Web Design
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.
Usa la etiqueta meta name="viewport" para indicar al navegador cómo debe adaptarse el contenido.
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 viewport 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.
CSS media queries
Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).
Las media queries consisten de un tipo de medio opcional y una o más expresiones de características de medios. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.
El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.
Las consultas sobre tipos de medios desconocidos son siempre falsas.
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>