Compartir, , Google Plus, Pinterest,

Imprimir

Publicado en:

9 gifs que te explican claramente los principios del diseño responsivo

¿Conoces que es el diseño responsivo? A estas alturas la mayoría de la gente entiende que se refiere a sitios web que se visualizan correctamente tanto en computadoras, tabletas y smartphones, una gran solución para el problema de la multi-pantalla, pero hay mucho más que eso.

Está el asunto de la impresión y la falta de medidas exactas, por poner un par de ejemplos.

Froont presenta la siguiente colección de 9 gifs que explican claramente los principios del diseño responsivo:

1. Diseño responsivo vs. diseño adaptable

Podrían parecer lo mismo pero no lo son. Ambos se complementan mutuamente, no se puede catalogar a ninguno de correcto o incorrecto.

Diseño responsivo vs diseño adaptable

2. El flujo

A medida que los tamaños de pantalla se vuelven más pequeños, el contenido comienza a tomar más espacio vertical y todo lo que esté debajo será desplazado, a eso se le conoce como flujo. Eso puede ser difícil de entender si estás acostumbrado a diseñar con píxeles y puntos, pero tiene todo el sentido cuando te acostumbras a él.

Flujo vs estático

3. Unidades relativas

El lienzo puede ser una computadora, la pantalla de un móvil o cualquier otro dispositivo. La densidad de píxeles puede variar así que necesitas unidades que sean flexibles y funciones en cualquier lugar. Es ahí donde las unidades relativas se vuelven útiles. Diseñar al 50% de ancho significa que se usará la mitad de la pantalla.

Unidades relativas

4. Puntos de ruptura (Breakpoints)

Los puntos de ruptura o breakpoints te permiten cambiar la distribución en puntos predefinidos, por ejemplo, que existan 3 columnas en una computadora pero sólo 1 columna en un dispositivo móvil. La mayoría de propiedades CSS pueden ser cambiadas de un breakpoint a otro. Donde los colocas, depende del contenido.

Breakpoints

5. Valores máximos y mínimos

En ocasiones es grandioso que tu contenido abarque toda la pantalla, como en un smartphone, pero tener el mismo contenido abarcando todo el ancho de tu pantalla de televisión tiene menos sentido. Es aquí donde ayudan los valores máximos y mínimos. Tener un ancho de 100% y un ancho máximo de 1000 píxeles significaría que el contenido llenará la pantalla pero no irá más allá de 1000 píxeles.

Lee también  Pantone, esto es lo que sucede al interior de la fábrica del color

Valores máximos y mínimos

6. Objetos anidados

¿Recuerdas la posición relativa? Tener demasiados elementos dependiendo el uno del otro sería difícil de controlar, por lo tanto envolver elementos en un contenedor se vuelve más entendible, limpio y ordenado. Es aquí donde la unidades estáticas como los píxeles pueden ser útiles. Ayudan al contenido que no deseas escalar como los logotipos o botones.

Objetos anidados

7. Móvil o escritorio primero

Técnicamente no hay mucha diferencia si un proyecto comienza de una pantalla pequeña a una grande (móvil primero) o viceversa (escritorio primero). La decisión depende de lo que funcione mejor para ti.

Móvil o escritorio primero

8. Fuentes web vs. fuentes del sistema

Las fuentes web te permiten dotar al sitio de una personalidad única y suelen lucir muy bien, pero recuerda que cada una debe ser descargada y entre más tengas, más tiempo tardará tu página en cargar. Las fuentes de sistema en cambio suelen cargar rápido, excepto cuando el usuario no la tenga localmente, en ese caso se usará una fuente por defecto.

Fuentes web vs fuentes del sistema

9. Mapa de bits vs. vectores

¿Tienes un icono con muchos detalles o efectos aplicados? Si es así usa mapa de bits. Si no, considera usar una imagen vectorial. Para mapa de bits puedes usar JPG, PNG o GIF, para vectores la mejor elección sería SVG o una fuente de icono. Cada uno tiene sus propias ventajas y desventajas.

Sin importar el tamaño, ninguna imagen debería ver el mundo online sin ser optimizada. Los vectores suelen ser pequeños pero hay navegadores antiguos que no los soportan, además si tiene muchas curvas podrían ser más pesados que un mapa de bits.

Mapa de bits vs vectores

Compartir, , Google Plus, Pinterest,

Written by Cristian Monroy

Consultor en Marketing, Tecnología y Social Media. Más de 8 años desarrollando negocios y capacitando profesionales. ¿Tienes una idea? Te ayudo a hacerla realidad. Te proporciono información accionable y basada en la experiencia. La información es poder y yo te enseño a sacarle el máximo provecho.

Mi curso más reciente: Psicología social aplicada al marketing

Contrata artículos patrocinados en: Contacto

2359 posts

2 Pings & Trackbacks

  1. Pingback:

  2. Pingback:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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