En un diseño responsible, una web se mostrará de forma distinto según el tamaño de la pantalla y/o el tipo de dispositivo, con la finalidad de garantizar la facilidad de uso. Se aplica concretamente a las pequeñas pantallas de visualización de los dispositivos móviles, donde se requiere una representación distinto de la página.
Antecedentes
El diseño usual de una página web se basa en las pantallas de PC, tal y como hay en un lugar de trabajo. En los últimos años, no obstante, se han desarrollado dispositivos móviles que disponen pantallas significativamente más pequeñas, por ejemplo, netbooks, tablets y smartphones. En una pantalla pequeña, las páginas web disponen un aspecto distinto al de las pantallas grandes y la facilidad de uso (Usabilidad) se reduce considerablemente. Un diseño responsible reacciona flexiblemente al dispositivo correspondiente. 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 teléfono celular. En el concepto «Mobile First», primero se crea la web teléfono celular y después 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 además 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, puesto que la oferta está habilitada para todos los usuarios en un diseño fácil de utilizar. 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 al mismo tiempo de la distinción entre «pantalla» e «impresión»[1].
Este ejemplo muestra el link del documento HTML a la hoja de estilo. Al mismo tiempo de la especificación de «pantalla», la consulta de medios, o Media Query, además contiene otra restricción, específicamente que debe ser un formato vertical. El párrafo respectivo en el archivo CSS «example.css» tiene el siguiente aspecto:
@media all and (orientation:portrait) { … }
Aspecto
Por medio de el uso de diseños responsive, el mismo contenido se proporciona en un formato ligeramente modificado para distintos dispositivos. La disminución de los items puede ser apropiada para tamaños de pantalla pequeños. En esencia, los items existentes se muestran estructuralmente distintos. Un ejemplo es el cambio entre formato vertical y horizontal. Las proporciones de páginas modificadas requieren una reestructuración de los items, pero su función sigue siendo la misma. El código HTML permanece inalterado, sólo se usa una hoja de estilo distinto.
La priorización de los items existentes juega un papel importante en la reestructuración de la página web. Una consideración completa de qué items se deslizarán hacia abajo en la página y cuáles pueden ser eliminados debido a su menor importancia es importante. 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 sencillo de mantener, porque el contenido sólo tiene que crearse una vez y está habilitada en cada diseño. El esfuerzo de desarrollo puede valer la pena desde una perspectiva de SEO, puesto que mejora la experiencia del usuario para las personas se conectan a internet con su dispositivo teléfono celular. Esto aumenta su tiempo de permanencia en la web, lo que tendrá un efecto positivo en el posicionamiento de la página. A parte de esto, la tasa de rebote disminuirá, porque un portal web fácil de utilizar es recibido de forma positiva. Un diseño responsible tampoco limitará el uso de la web a dispositivos convencionales. El relanzamiento de una web es una buena posibilidad para ofrecerlo con un diseño responsive en el futuro.
Otra respuesta al creciente número de dispositivos móviles es crear un portal 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 de forma separada. Apenas estará enlazado, apenas obtendrá enlace juice y por lo general contendrá contenido duplicado. De este modo, el sitio teléfono celular no será encontrado por los visitantes mediante de los motores de búsqueda y de esta manera 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 teléfono celular tienden a ser más cortos y a formularse de forma distinto que en el caso de un teclado físico. De este modo, la diferencia en los dispositivos de usuario además 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 requerimiento previo, el crawler necesitará entrar ilimitado a archivos externos como CSS y JavaScript.
[Category:Marketing Móvil]]
