Skip to main content

responsive_design_kinetic_knowledge

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

 

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

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

Fuente de Los 8 principios del responsive design

Leave a Reply