Si te apasiona el mundo del diseño web, seguramente te sonará nuestro querido concepto “responsive”, pero ¿realmente sabes qué es y cómo funciona?
Un diseño web responsive es hacer que el diseño de nuestra página web se adapte a cualquier dispositivo, detectando el ancho de la pantalla en la que se está visualizando en ese momento.
El lenguaje web encargado de adaptar el contenido según el ancho de nuestro dispositivo es el CSS (Cascading Style Sheets).
¿En qué consiste un diseño web responsive y cuál es su importancia?
El diseño web responsive es uno de los aspectos más importantes de nuestra web. Si el diseño no está bien adaptado a los diferentes dispositivos y el contenido no es correctamente visible, perderemos visitantes y posibles clientes. Es uno de los puntos más importantes de cara a la experiencia de usuario.
Características del diseño para una web responsive
Hay que tener varios puntos en cuenta a la hora de realizar un diseño responsive.
First mobile: El tráfico web cada día es más alto en dispositivos móviles que desde ordenadores. Por ello, es ideal empezar un desarrollo desde las pantallas más pequeñas hacia las más grandes, de esta forma el contenido se adaptará mejor.
Cambio de apariencia en los elementos: Hay elementos que se visualizarán de una forma en móvil y de otra forma en ordenador. Por ejemplo, si tenemos un listado de 6 logotipos a lo ancho de nuestra pantalla para ordenador, lo ideal es mostrar esta sección como un slider de 1 logotipo por vez. Así evitamos un scroll bastante largo desde la visualización móvil.
Mejora el posicionamiento en los buscadores: Los buscadores como Google o Bing penalizan las páginas web que no están adaptadas con un diseño responsive.
Ventajas de un diseño responsive
Mejora la experiencia del usuario
Una buena experiencia de usuario mejora la imagen de marca y potencia la interacción y suscripción de los usuarios.
Alta velocidad de carga de nuestra web
Google penaliza bastante la velocidad de carga baja en nuestra web, tener nuestro diseño web adaptado correctamente a todos los dispositivos mejora en una correcta velocidad de carga.
¡No al contenido duplicado!
Al inicio del diseño web se realizaban dos tipos de web, versión móvil y versión escritorio, esto penaliza bastante al posicionamiento de nuestra web al tener contenido duplicado.
Bendito diseño responsive… Con el diseño responsive se trabaja sobre el mismo contenido de forma adaptativa a todas las pantallas.
¡Bye, bye, contenido duplicado!
¿Cómo hacer una web responsive?
Para realizar un correcto diseño web responsive es muy recomendable tener conocimientos de CSS.
Compositores visuales
Si trabajamos con CMS (Content Management System) como WordPress, podemos trabajar con compositores visuales ya que sus opciones para un buen diseño responsive en escritorio, tablet y móvil están bastante bien. Pero no son 100% correctas. En algunos puntos toca meter un poco de mano al CSS y trabajar con nuestras queridas Media Queries. Lo ideal es trabajar, como he comentado anteriormente, de menos a más; es decir, de móvil a escritorio.
Querida Media Query
¿Qué es una Media Query? No es más que, desde el código, marcar el punto exacto del ancho de pantalla en el que un elemento va a tener unas características X; es decir, las características que mostrará para la versión de escritorio, la versión de tablet o la versión de móvil. Por ejemplo: En móvil, el título de nuestra página web puede mostrarse en color rojo pero al visualizarlo en una tablet será de color verde:
/*Versión Móvil*/
h1 { color: red; }
/*Versión Tablet*/
@media (min-width:768px) {
h1 { color: green; }
}
Los mejores ejemplos de webs responsive
Te dejo algunos ejemplos de un correcto web responsive, como ya sabes siempre hay que fijarse en los grandes y en nosotros 😉
Google Maps
Podemos ver que Google Maps se adapta correctamente el contenido mostrando una información inferior, pero más exacta en dispositivos móviles, de esta forma mejorando la usabilidad resaltando el buscador y la imagen del mapa.
Amazon
En el caso de Amazon vemos cómo recoge toda la información en el menú tipo hamburguesa, dejando en primer plano el buscador para una mejor experiencia de usuario en dispositivos móviles.
Youtube
En el caso de Youtube es notable la correcta adaptación del contenido, mostrando de forma principal el listado de videos, añadiendo un menú en la parte inferior con las opciones principales.
Si estás buscando mejorar tu negocio con un diseño web de calidad adaptado a todos los dispositivos, contacta con nosotros.
Y recuerda: ¡Siempre se puede ser mejor!