Diseño Responsive

En un diseño responsible, una web se mostrará de forma diferente según el tamaño de la pantalla y/o el tipo de dispositivo, con el fin de garantizar la facilidad de uso. Se aplica particularmente a las pequeñas pantallas de visualización de los dispositivos móviles, donde se requiere una representación diferente de la página.

Antecedentes

El diseño habitual de una página web se basa en las pantallas de ordenador, tal y como existen en un lugar de trabajo. En los últimos años, sin embargo, se han desarrollado dispositivos móviles que tienen pantallas significativamente más pequeñas, por ejemplo, netbooks, tablets y smartphones. En una pantalla pequeña, las páginas web tienen un aspecto diferente al de las pantallas grandes y la facilidad de uso (Usabilidad) se reduce considerablemente. Un diseño responsible reacciona flexiblemente al dispositivo respectivo. Se puede garantizar una buena experiencia de usuario en dispositivos móviles con un diseño separado para pantallas pequeñas. Esto se denomina Experiencia de usuario móvil. En el concepto “Mobile First”, primero se crea la web móvil y luego se hacen extensiones para pantallas más grandes.

Motivación

El número de dispositivos móviles está creciendo y el número de usuarios de Internet que acceden a Internet en dichos dispositivos también está aumentando. Se necesitarían diseños responsive para proporcionar a estos visitantes una buena experiencia en la web. La falta de una buena experiencia de usuario con sitios web comunes en dispositivos con pantallas pequeñas resultará en pérdidas de conversión. El uso de un diseño responsible mira hacia el futuro, ya que la oferta está disponible para todos los usuarios en un diseño fácil de usar. La comunicación entre el operador web y sus visitantes no se ve afectada por el tipo de dispositivo utilizado.

Implementación

Los diseños responsible se pueden realizar con HTML5 y CSS3. Se proporcionan consultas a los medios de comunicación, con las que se puede solicitar información desde el dispositivo en cuestión. Esto incluye características como el tamaño de la pantalla, la resolución y el formato, así como capacidades como el teclado, la huella, el idioma, etc.). El contenido y el diseño de una página deben estar estrictamente separados para que el diseño responsive funcione correctamente.

Media Query

Otras propiedades están disponibles además de la distinción entre “pantalla” e “impresión”[1].

Este ejemplo muestra el enlace del documento HTML a la hoja de estilo. Además de la especificación de “pantalla”, la consulta de medios, o Media Query, también contiene otra restricción, específicamente que debe ser un formato vertical. El párrafo correspondiente en el archivo CSS “example.css” tiene el siguiente aspecto:

@media all and (orientation:portrait) { … }

Aspecto

Mediante el uso de diseños responsive, el mismo contenido se proporciona en un formato ligeramente modificado para diferentes dispositivos. La reducción de los elementos puede ser apropiada para tamaños de pantalla pequeños. En esencia, los elementos existentes se muestran estructuralmente diferentes. Un ejemplo es el cambio entre formato vertical y horizontal. Las proporciones de páginas modificadas requieren una reestructuración de los elementos, pero su función sigue siendo la misma. El código HTML permanece inalterado, sólo se utiliza una hoja de estilo diferente.

La priorización de los elementos existentes juega un papel importante en la reestructuración de la página web. Una consideración completa de qué elementos se deslizarán hacia abajo en la página y cuáles pueden ser eliminados debido a su menor importancia es esencial. Este desarrollo consume mucho tiempo y proporciona espacio para las medidas de SEO.

Relevancia para el SEO

El desarrollo de un diseño responsible es muy complejo dependiendo del tamaño de la web. Pero una vez desarrollado, es muy fácil de mantener, porque el contenido sólo tiene que crearse una vez y está disponible en cada diseño. El esfuerzo de desarrollo puede valer la pena desde una perspectiva de SEO, ya que mejora la experiencia del usuario para las personas se conectan a internet con su dispositivo móvil. Esto aumenta su tiempo de permanencia en la web, lo que tendrá un efecto positivo en el posicionamiento de la página. Por otra parte, la tasa de rebote disminuirá, porque un sitio web fácil de usar es recibido positivamente. Un diseño responsible tampoco limitará el uso de la web a dispositivos convencionales. El relanzamiento de una web es una buena oportunidad para ofrecerlo con un diseño responsive en el futuro.

Otra respuesta al creciente número de dispositivos móviles es crear un sitio web separado para los usuarios móviles, lo que no es recomendable desde una perspectiva de SEO. Este dominio autónomo deberá optimizarse y mantenerse por separado. Apenas estará enlazado, apenas obtendrá link juice y por lo general contendrá contenido duplicado. Por lo tanto, el sitio móvil no será encontrado por los visitantes a través de los motores de búsqueda y por lo tanto raramente utilizado.

El concepto de diseño responsible conduce a ideas más avanzadas para la optimización de palabras clave. Los términos de búsqueda introducidos en un dispositivo móvil tienden a ser más cortos y a formularse de forma diferente que en el caso de un teclado físico. Por lo tanto, la diferencia en los dispositivos de usuario también podría dar lugar a un cambio de palabras clave.

Google apoya y recomienda un diseño responsive. Una ventaja es que el Googlebot ahorra recursos y puede indexar más contenido de una web. Como requisito previo, el crawler necesitará tener acceso ilimitado a archivos externos como CSS y JavaScript.

Referencias

[1]