Seguro que has oído hablar del diseño web responsive, en Estudio 27 te contamos en qué consiste y por qué todos los profesionales lo usan a la hora de diseñar páginas webs.
Antes de nada, tener una web responsive implica que tu página se va a poder adaptar y ver correctamente en cualquier pantalla, ya sea un móvil, el ordenador o una tablet. La web adoptará el formato necesario para que el usuario tenga una buena experiencia de navegación y, además, es algo beneficioso para el SEO.
Algunos datos sobre el diseño responsive
Para que nos podamos hacer una idea de la importancia de este tipo de diseño, Ofcom afirma que en la actualidad el 60 % de los usuarios navegan desde dispositivos móviles, superando considerablemente a las visitas a las webs que se realizan desde ordenadores.
De ahí la necesidad de que nuestra página se adapte perfectamente a todos los dispositivos. Además, desde el año 2015 Google penaliza a aquellas webs que no cumplen este requisito.
Ventajas que presentan las webs responsive
Como decimos, son muchas las ventajas que presentan las webs realizadas con este tipo de diseño frente a aquellas que no son capaces de adaptarse a diferentes tipos de pantalla.
Para empezar, lo más evidente es que las webs se visualizan como si se mostrasen en la pantalla del ordenador, con lo que el usuario no podrá verlas correctamente y posiblemente las abandonará. Esto, por lo tanto, genera un alto porcentaje en la tasa de rebote a la hora de analizar los datos de rendimiento. Piensa que ofrecer una buena experiencia de usuario es que la persona que visita tu web la pueda leer correctamente, sin tener que forzar nada.
Por otro lado, el diseño responsive te garantiza que la experiencia adecuada de usuario va a afectar de manera positiva a la percepción que el usuario tenga de tu marca. Si entra en una página web en la que es difícil navegar o que no puede ver bien, enseguida pensará que se trata de una empresa o marca que no tiene en cuenta a sus usuarios. Sin contar, por supuesto, que se marchará y posiblemente, perderás esa conversión.
Aunque no lo creas, las webs con este diseño suelen tener optimizados los tiempos de carga, sobre todo pensando que el usuario va a abrir tu web con el móvil. Y esto es un factor muy importante para el SEO.
Además, al estar optimizado todo el contenido de tu página para las pantallas móviles, hace mucho más fácil que el usuario pueda compartir tu contenido.
En un mundo dominado por los dispositivos móviles, una web responsive es imprescindible
Si no tuvieses una web con este diseño sería más caro para tu empresa, pues necesitarías hacer una página web para cada uno de los dispositivos. Con una web responsive puedes tener un mismo sitio web adaptado a cada dispositivo desde el que se visualiza.
Pero es posible que no estés seguro de si tu web se adapta o no a dispositivos móviles, y para que lo puedas saber de forma rápida existen herramientas que te permiten comprobarlo. Google, por ejemplo, ofrece una de forma gratuita, Mobile Friendly.
Esta forma de crear webs es mucho más que un tipo de diseño. El diseño responsive, hoy en día, es una obligación para todas aquellas marcas que aspiran a conseguir leads de calidad a través de su página web. También ayuda enormemente a lograr que el usuario vuelva a acceder a ella tras una buena experiencia de usuario.
Una de las principales herramientas que nos permiten realizar diseño responsive son las llamadas media queries. Las media queries se introducen a partir de la versión 3 de CSS. Se utilizan para que el documento html que creemos sepa cómo actuar en las diferentes resoluciones de pantalla. Para ello, se introducen una serie de órdenes en el documento CSS asociado a dicho documento HTML. Las media queries detectan la resolución del dispositivo que se está utilizando, y utilizan la configuración más adecuada para mostrar el contenido.
Así, intentan ofrecer la mejor experiencia posible al usuario (UX) cuando navegue por la web (es un factor SEO).
Las media queries aparecen para cubrir la necesidad de crear breakpoints o puntos de ruptura en las hojas CSS.
Podemos implementarlo de dos maneras:
- Mediante el atributo media de la etiqueta link. Este atributo especifica cuál dispositivo está optimizado para el recurso objetivo, es decir, para que dispositivo está optimizada nuestra página web. Principalmente se utiliza en las hojas de estilo CSS para los distintos tipos de contenido. La etiqueta link la utilizamos para enlazar las hojas de estilo CSS con los documentos HTML. Mediante este enlace, especificaremos aquellos requisitos que deban formalizarse si se quiere que aquellos estilos que sean enlazados puedan realizarse. Esta etiqueta debe incluirse en el bloque head de nuestro documento html. El mayor problema de este método es que para cada dispositivo que queramos contemplar, deberemos incluir una hoja de estilo CSS nueva, lo que repercutirá negativamente en la carga de nuestro sitio web debido a la sobrecarga de peticiones http al servidor.
- La otra opción, mucho más recomendable, es incluir todas las condiciones necesarias en una única hoja de estilos CSS. Esta opción sólo realiza una petición http al servidor, acelerando la carga de nuestro sitio web.
El atributo principal que se gestiona con el uso de las media queries es la resolución de pantalla. Pero no es el único, también podemos controlar la orientación de la pantalla.
Por si esto fuera poco, mediante las media queries no vamos a controlar solo una condición. Mediante el uso de operadores lógicos (tales como and, not, only y or) podemos controlar y precisar aún más el rango de resolución. Por ejemplo, podemos controlar que una cierta configuración se utilice cuando la anchura de la pantalla de navegación sea superior a 790 pixeles y además, la orientación del dispositivo sea horizontal.
Otra etiqueta muy útil para el diseño responsive es la etiqueta viewport.
Viewport hace referencia a el área visual donde se muestra el contenido del documento HTML. Este atributo se utiliza para saber qué parte de la pantalla está disponible y cual es el zoom que el dispositivo debe utilizar al mostrar el contenido.
Además de estas etiquetas, hay algunas reglas que podemos seguir si queremos que nuestra página web tenga diseño responsive:
- Dejar de utilizar pixeles. Si utilizas porcentajes en lugar de píxeles cuando tomes medidas, te asegurarás de que el contenido se vea igual en todos los dispositivos.
- No utilizar posiciones absolutas. Lo más recomendable es utilizar el atributo float.
Asegurarnos de que las imágenes y videos no sean mayores que la estructura. Así evitaremos scrolls que descoloquen el diseño.
Otras personas también han buscado:
