fbpx

Herramientas de Accesibilidad

Skip to main content

Diseño responsivo ¿qué es y en qué consiste?

El diseño responsive, adaptativo o responsivo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos. Desde pc a tablets y móviles, y por su puesto, en efectoVisual la utilizamos..
Hoy en día accedemos a sitios web desde todo tipo de dispositivos; pc, 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 responsivo?

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 CSS3.

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.
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 práctica esencial hoy en día en diseño web.

Diseño responsivo en simple

Generalmente se cree que el responsive design no es más que la adaptación de un diseño web a los distintos dispositivos a través de los cuales se visualizará, pero el asunto va más allá. La empresa Froont desarrolló estos ilustrativos GIFs para entender mejor cuáles son sus ejes principales.

1- Los contenidos del responsive design no se adaptan sino que se expanden.

1 Normas del responsive design e1417546830536

2- Es necesario usar unidades relativas (como el porcentaje de la pantalla), en lugar de unidades estáticas (como los píxeles).

2 Unidades relativas e1417547165919

3- A MENOR TAMAÑO DE PANTALLA, EL CONTENIDO DEBERÁ OCUPAR MÁS ESPACIO VERTICAL.

3 Contenido vertical

4- Mientras que en el escritorio se cuenta con tres columnas para distribuir los contenidos, en los dispositivos móviles sólo se cuenta con una columna.

4 Una columna aloja el contenido

5- USÁ LA ANIDACIÓN. ESTA TÉCNICA HARÁ QUE TUS ELEMENTOS SE ADAPTEN A PANTALLAS CONTRAÍDAS.

5 Elementos que se adapten a pantallas

6- DEPENDIENDO DEL DISPOSITIVO, EL CONTENIDO DEBE EXTENDERSE PARA OCUPAR TODO EL ANCHO DE LA PANTALLA.

6 Contenido extensible

7- NO HAY GRANDES DIFERENCIAS ENTRE DESARROLLAR UN NUEVO PROYECTO EN PANTALLA GRANDE O CHICA.

7 El mobile siempre primero

8- SI EL DISEÑO CONTARÁ CON MUCHOS EFECTOS O DETALLES, LO MÁS RECOMENDABLE ES UTILIZAR VECTORES.

8 mapa de bits