¿Qué es y cómo funciona el Diseño Responsive? DicZionario

responsive

¿Qué te parece ver una web en un PC y ver exactamente esa misma web en tu móvil? Hay diferencia, ¿verdad? Pues la clave de todo está en que cada pantalla tiene un “lenguaje” particular, lo cual lleva a que se disponga de una visualización determinada, que conlleva a un diseño determinado según el dispositivo, desde ordenadores de escritorio a tablets o móviles, entre otros.

Y es que en la actualidad accedemos a sitios web desde todo tipo de dispositivos, sobre todo móviles, por lo que, cada vez más, nos surge la necesidad de que la web se adapte a los diferentes tamaños de los mismos. Pero, ¿qué es esto exactamente? Del Diseño Responsive hablamos en una nueva entrega del DicZionario.

Definición del concepto de Diseño Responsive

Puede parecer imposible de imaginar pero, aún hoy, hay empresas que no consideran los dispositivos móviles de importancia. Creen que con tener una web de escritorio, que pueda visualizarse en el móvil, es más que suficiente. Esto, sin duda, es un error, básicamente porque el tiempo de carga en el móvil de una web de escritorio es demasiado largo, y obliga el uso del zoom para apreciar los detalles, entre otros inconvenientes.

Si la forma de navegar por parte del usuario ya es distinta, es obvio que las empresas deben tener esto presente dentro de su propia estrategia online. Sobre todo en relación a la tasa de rebote, que probablemente sea alta debido a la pésima experiencia del usuario. Y, lo que es peor: puede que nos vuelva a nosotros.

Por ello, la solución se impone: 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 CSS3. De esta forma 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.

Lejos de pensar que es un “capricho” más, estamos ante toda una filosofía de diseño y desarrollo, cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Fue el diseñador y autor norteamericano Ethan Marcotte quien creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación online especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design. A día de hoy el diseño responsive se consolida como una de las mejores prácticas. ¿Lo vemos en algunos ejemplos?

Algunos ejemplos

Como hemos visto, el diseño responsive reestructura en la pantalla del dispositivo los elementos de la web para optimizar todo el espacio disponible. Ahora bien, hay marcas que ya lo tienen en cuenta y otras que aún se resisten a ello. Un ejemplo lo encontramos con Feuvert. Como podemos ver, tanto el contenido para mobile como para la pantalla del ordenador es el mismo, no cambia.

Fauvert

Sin embargo, hay otras muchas marcas que sí lo tienen presente. Entre todas hemos seleccionado el caso de Ikea. Como podemos ver, por ejemplo el menú horizontal se convierte en vertical si se visualiza en smartphones, evitando los scrolls infinitos y reorganizando los contenidos. Tanto la web como el mobile contienen contenidos similares pero, a la vez, se adapta para cada pantalla.

ikea

Pero no todo queda ahí. El siguiente paso vendrá dado por el First mobile, una filosofía que invita a priorizar el diseño en los dispositivos móviles obligando a jerarquizar los contenidos y centrarse en los elementos y acciones más importantes de un site o tienda online. El objetivo es crear una buena experiencia y usabilidad de usuario acorde al dispositivo. Algo de lo que hablaremos en una nueva edición del DicZionario.

Imagen | Chasing Daisy
En BlogginZenith | ¿Cuáles son las principales técnicas de marketing mobile para conseguir conversiones?

En campaña con Zenith

3 comentarios

  1. He conocido muchas empresas que no utilizan el diseño responsive. Todo un error, desde luego.

  2. Muy buena entrada. La solución real es el First Mobile, que el responsive design es un parche que sirve para adaptarte a la pantalla pero no da el contenido que requiere el medio. ¿Hay empresas que van a muerte al First? Yahoo y windows están en ello (windows 8 como sistema operativo demuestra que en un pc no es fluido pero en una surface pro si), wallapop de hecho no tiene web optimizada para móvil sino una app, whatsapp después de mucho tiempo empieza a hacer el cambio hacia web pero estas si que tienen claro que el Móvil es el presente y que el retroceso que noten por el cambio ahora será su mayor ventaja competitiva de uno a dos años.
    Un saludo 🙂

   

Deja un comentario

Tu correo electrónico no se verá en el comentario publicado.

Política de comentarios

Escribe tu comentario para que la comunidad pueda aprovecharlo. Los comentarios que no sean adecuados o se salgan de la temática del blog serán descartados, así como los promocionales, susceptibles de afectar a derechos de terceros, con insultos o de vulnerar las leyes.

Cuando se detecta una infracción de estas normas se podrá editar el comentario o simplemente eliminarlo, pero si la infracción es continuada, se podrá llegar a un bloqueo de la cuenta.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>