El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos. Desde ordenadores de escritorio a tablets y móviles.
Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet, smartphone… por lo que, cada vez más, nos surge la necesidad de que nuestra web se adapte a los diferentes tamaños de los mismos.Pero, ¿qué es esto exactamente?
¿En qué consiste el diseño responsive?
Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se usa código media-queries de CSS.
El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural.
EL DISEÑO RESPONSIVE SE CARACTERIZA POR
Los layouts e imagenes son fluidos y se adaptan a cada pantalla
Permite reducir el tiempo de desarrollo
Evita los contenidos duplicados
Aumenta la viralidad de los contenidos
Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de
usuario
lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de
apps,
el
cambio de dominio o webs servidas dinámicamente en función del dispositivo.
En definitiva, el diseño web responsive se consolida como una de las mejores prácticas hoy en día en diseño web. Aunque como todas, tiene sus pros y contras, la web responsive es considerada hoy en día la mejor práctica posible en el diseño web, y nosotros te enseñasmos los puntos que debes tener en cuenta a la hora de hacer tu web responsive.
Tres ejemplos de diseño responsive
Veamos ahora cómo algunas empresas reales han hecho de este diseño web su principal arma para encantar a sus visitantes.
- Petco
- Pólvora
Google es uno de los mejores ejemplos de diseño responsive, ya que fue una de las primeras plataformas que implementó estos formatos para su navegación móvil.
Originalmente, el buscador únicamente mostraba la barra de búsqueda y algunas opciones para cambiar el idioma o aplicar filtros avanzados. En la actualidad, la empresa ha sacado gran provecho de los dispositivos móviles porque incluyen opciones y funcionalidades exclusivas para ellos.
Por ejemplo, a través de su buscador por imágenes puedes hacer uso de la cámara del dispositivo para tomar fotografías y usarlas para encontrar resultados similares. Conjuntamente, su diseño minimalista y los botones de acción permiten ampliar el menú, acceder al perfil del usuario y ver las aplicaciones disponibles.
La tienda en línea de productos para mascotas Petco es un buen ejemplo de diseño web responsive ya que equilibra el uso del espacio de visualización con la importancia de los contenidos más relevantes a mostrar.
En este caso, se conservó el logo de la marca y se acompañó con los iconos simplificados de menú, ubicación, buscador y carrito de compras. Así mismo, el sitio prioriza algunos recursos visuales como anuncios de promociones de temporada y secciones claras de productos para perros y gatos.
Por último, debido a que el sitio no puede incluir una ventana de chat en su versión móvil, incluyen un espacio para ampliar el chat dentro de la página y otro más para redirigirlo a la cuenta de WhatsApp de la marca.
La página de la fábrica de café de especialidad Pólvora es un ejemplo que integra eficientemente los diseños web de escritorio y para móviles para evitar sacrificar contenidos o perder de vista la identidad digital de la marca.
Pólvora ha optado por un diseño minimalista que emplea los mismos elementos en sus diferentes versiones de navegación. Lo único que cambia son las proporciones, anchos y espacios entre sus contenidos. También decidieron crear una landing page que está saturada con la imagen de su producto principal: café de especialidad directo a la casa del cliente.
Los iconos de menú, nube de chat y carrito son suficientes para que los usuarios se orienten en la página. Adicionalmente, estos encontrarán los mismos contenidos que en el sitio web, pero organizados de una forma que aprovecha la pantalla táctil para desplazarse a los lados y no solo de arriba a abajo.
