¿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.
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.
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.
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.
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.
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.
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.
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.
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.
[adsense2]
