Sandijs Ruluks, diseñador especializado en diseño web y procedente del mundo de la impresión, nos trae los 9 principios básicos para el diseño web responsive que propone en froont.com.
El diseño web responsive es una buena solución para nuestros problemas multi-pantalla, pero llegar a ella desde la perspectiva de impresión es difícil. No hay tamaños de página fijos, no hay milímetros o pulgadas, no hay limitaciones físicas contra las que luchar. Diseñar en pixels para desktop y mobile va formando parte del pasado a medida que más y más dispositivos pueden abrir páginas web. Por lo tanto, vamos a esclarecer algunos principios básicos del diseño web responsive para sumarse a la corriente web en vez de luchar contra ella. Para hacerlo sencillo nos centraremos en el diseño (sí, el responsive va mucho más allá y si quieres aprender más, este es un buen comienzo).
Responsive vs diseño web adaptativo.
Puede parecer lo mismo pero no lo es. Ambos se complementan entre sí, por lo que no hay un modo correcto o incorrecto de hacerlo. Deja que el contenido decida.
El flow.
A medida que los tamaños de la pantalla se van reduciendo, el contenido empieza a ocupar un espacio más vertical y cualquier cosa que le siga se colocará debajo, este efecto se llama flow. Puede parecer difícil de comprender si estás acostumbrado a diseñar con pixels, pero adquiere sentido cuando te acostumbras al flow.
Unidades relativas.
El lienzo puede ser desktop, pantalla de móvil o cualquier cosa entremedias. La densidad de pixels también puede variar, por lo que necesitamos unidades que sean flexibles y funcionen en cualquier lugar. Aquí es donde las unidades relativas como los percentajes pueden sernos útiles. Así que hacer algo con un 50 % de ancho significa que siempre ocupará la mitad de la pantalla (o de la ventana del navegador con que se abra).
Puntos de ruptura.
Los puntos de ruptura permiten que el diseño cambia algunos puntos predefinidos, es decir tener 3 columnas en desktop pero solo una columna en dispositivos móviles. La mayoría de las propiedades CSS pueden ser cambiadas de un punto de ruptura a otro. Normalmente cuando pones uno depende del contenido. Si una frase se corta, puede que necesites añadir un punto de ruptura. Pero cuidado con ellos –puede desordenarse rápidamente cuando le es difícil entender qué está influyendo en qué.
Valores máximos y mínimos.
Algunas veces es genial que el contenido ocupe todo el ancho de la pantalla, al igual que en un dispositivo móvil, pero tener el mismo contenido extendiéndose por todo el ancho de la pantalla del televisor, a menudo tiene menos sentido. Es aquí donde los valores de Min/Max ayudan. Por ejemplo, tener un ancho a un tamaño 100 % y un máximo de 1.000 px significaría que el contenido llenará la pantalla pero no irá más allá de los 1.000 px.
Objetos anidados.
¿Recuerdas la posición relativa? Tener muchos elementos dependiendo de otros puede ser difícil de controlar, por lo que agrupar varios elementos en un mismo contenedor hace que el contenido se vuelva mucho más entendible, limpio y ordenado. Aquí es donde las unidades estáticas como los pixels pueden ayudar. Son útiles para aquel contenido que no quieres que cambie de tamaño, como los logos y los botones.
¿Primero móvil o desktop?.
Técnicamente no hay mucha diferencia si el proyecto empieza desde una pantalla pequeña y acaba en una más grande (móvl primero) o viceversa (desktop primero). Sin embargo, se añaden limitaciones extra y ayuda a tomar decisiones si se empieza primero con el móvil. A menudo, la gente empieza desde ambos extremos, así que prueba y mira qué es lo que mejor funciona para ti.
¿Fuentes web o fuentes del sistema?.
¿Quieres que tu web tenga un aspecto atractivo con Futura o Didot? ¡Usa fuentes web! Aunque tengan un aspecto impresionante, recuerda que tendrán que descargarse y cuanto más tengan que hacerlo, más tardará la página en cargarse. Las fuentes del sistema por otro lado son tan rápidas como el rayo, excepto cuando el usuario no las tiene localmente por lo que se recurrirá a una fuente predeterminada.
Mapa de bits vs vectores.
¿Tiene tu icono muchos detalles y algún elegante efecto? Si es que sí, usa mapa de bits. Si no, considera usar imagen vectorial. Para mapa de bits usa archivos jpg, png o gif, para vectores la mejor opción sería SVG o un icono fuente. Cada uno de ellos tienen sus ventajas y sus desventajas. Sin embargo ten presente el tamaño, ninguna imagen debería ir bien sin optimización. Los vectores por otro lado a menudo pesan poco pero no son compatibles con algunos navegadores antiguos. Además, si tiene muchas curvas, puede que sea más pesado que un mapa de bits, así que escoge sabiamente.
→ Para más info del diseño web responsive: froont.com