Now Reading
9 GIFs animados que te explican lo que es responsive design

¿Qué es el diseño responsivo o responsive design? La mayoría respondería vagamente que se refiere a los sitios webs que funcionan igual de bien en una pc de escritorio como una tablet o un smartphone. Pero es mucho más que esto.

Sin embargo los principios del responsive design no son difíciles de entender, gracias a esta colección de GIFs animados hechos por Froont, una empresa especializada en hacer herramientas para crear sitios responsivos.

Los diseños responsive se expanden con fluidez, mientras que los diseños adaptados se demoran un poco.

responsive vs adaptative
[hr]

Posicionar los elementos de diseño usando píxeles como coordinadas X, Y pueden causar que un sitio diseñado en una pantalla se vea raro en otra. Hay que usar unidades relativas, como porcentaje de pantalla en vez de unidades como píxeles.

3038367-inline-i-2-9-gifs-that-explain-responsive-design-brilliantly-02relative-units-vs-static-units-1-copy
[hr]

A medida que el tamaño de la pantalla se vuelve más pequeño, el contenido empieza a tomar más espacio vertical y todo lo que está debajo baja con él. Esto se llama el flujo (flow).

3038367-inline-i-4-9-gifs-that-explain-responsive-design-brilliantly-04flow-vs-static-2-copy
[hr]

Los puntos de quiebre (breakpoints) permiten que la caja cambie en puntos predefinidos. Por ejemplo: Se tienen 3 columnas en la PC de escritorio, pero solo una columna en un dispositivo móvil.

3038367-inline-i-3-9-gifs-that-explain-responsive-design-brilliantly-03with-breakpoints-vs-without-breakpoints-1-co
[hr]

Usar elementos anidados (nesting) para que los objetos en la pantalla se expandan o encojan como un grupo en vez de individualmente.

3038367-inline-i-5-9-gifs-that-explain-responsive-design-brilliantly-05nested-vs-not-nested-1-copy
[hr]

A veces es bueno que un contenido abarque todo el ancho de la pantalla, pero en pantallas grandes como un TV tiene menos sentido.

3038367-inline-i-7-9-gifs-that-explain-responsive-design-brilliantly-07max-width-vx-no-max-width-1-copy
[hr]

Técnicamente no hay mucha diferencia si un proyecto empieza por una pantalla pequeña hacia una gran pantalla (mobile first) o viceversa (desktop first). Sin embargo se notan mejor las limitaciones y posibilidades del diseño si empiezas primero por lo móvil.

3038367-inline-i-8-9-gifs-that-explain-responsive-design-brilliantly-08desktop-first-vs-mobile-first-3-copy
[hr]

¿Tus íconos tienen muchos detalles y efectos? Entonces usa bitmaps. Si no, trata de usar vectores. Una imagen vectorial se adapta mejor a diferentes resoluciones.

3038367-inline-i-9-9-gifs-that-explain-responsive-design-brilliantly-09vectors-vs-images-1-copy
[hr]

Fuente: Fast Company

View Comments (0)

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Scroll To Top