El diseño web responsivo es una gran solución para nuestro problema de pantallas múltiples, pero es difícil acceder a él desde la perspectiva de la impresión. Sin tamaño de página fijo, sin milímetros ni pulgadas, sin restricciones físicas contra las que luchar. Diseñar en píxeles solo para computadoras de escritorio y dispositivos móviles también es el pasado, ya que cada vez más dispositivos pueden abrir un sitio web. Por lo tanto, aclaremos algunos principios básicos del diseño web responsivo.
Diseño web responsivo vs. adaptativo
Puede parecer lo mismo pero no lo es. Ambos enfoques se complementan entre sí, por lo que no hay una forma correcta o incorrecta de hacerlo. Deja que el contenido decida.
El flujo
A medida que los tamaños de pantalla se hacen más pequeños, el contenido comienza a ocupar más espacio vertical y todo lo que está debajo se empujará hacia abajo, se llama flujo. Puede ser difícil de entender si está acostumbrado a diseñar con píxeles y puntos, pero tiene mucho sentido cuando se acostumbra.
Unidades relativas
El lienzo puede ser un escritorio, una pantalla móvil o cualquier cosa intermedia. La densidad de píxeles también puede variar, por lo que necesitamos unidades que sean flexibles y funcionen en todas partes. Ahí es donde las unidades relativas como porcentajes son útiles. Entonces, hacer algo con un ancho del 50% significa que siempre ocupará la mitad de la pantalla (o ventana gráfica, que es el tamaño de la ventana abierta del navegador).
Puntos de corte
Los puntos de interrupción permiten que el diseño cambie en puntos predefinidos, es decir, tener 3 columnas en un escritorio, pero solo 1 columna en un dispositivo móvil. La mayoría de las propiedades CSS se pueden cambiar de un punto de interrupción a otro. Por lo general, donde pones uno depende del contenido. Si se rompe una oración, es posible que deba agregar un punto de interrupción. Pero atención: puede volverse desordenado rápidamente cuando es difícil entender qué está influyendo en qué.
Valores máximos y mínimos
A veces es genial que el contenido ocupe todo el ancho de una pantalla, como en un dispositivo móvil, pero que el mismo contenido se extienda a todo el ancho de la pantalla de su televisor a menudo tiene menos sentido. Es por eso que los valores Min / Max ayudan. Por ejemplo, tener un ancho del 100% y un ancho máximo de 1000 px significaría que el contenido llenará la pantalla, pero no supere los 1000 px.
Objetos anidados
¿Se acuerda de la posición relativa? Tener muchos elementos dependiendo el uno del otro sería difícil de controlar, por lo tanto, envolver los elementos en un contenedor lo hace mucho más comprensible, limpio y ordenado. Aquí es donde las unidades estáticas como los píxeles pueden ayudar. Son útiles para contenido que no desea escalar, como logotipos y botones.
Móvil o escritorio primero
Técnicamente, no hay mucha diferencia si un proyecto se inicia desde una pantalla más pequeña a una más grande (móvil primero) o viceversa (escritorio primero). Sin embargo, el futuro son los dispositivos móviles. A menudo, las personas comienzan por ambos extremos a la vez, así que realmente hay que ver que funciona mejor en tu caso.
Webfonts vs fuentes del sistema
¿Quieres tener un Futura o Didot de aspecto genial en tu sitio web? ¡Usa webfonts! Aunque se verán impresionantes, recordemos que cada uno se descargará y cuantas más tengas en tu web, más tardará en cargar la página. Las fuentes del sistema, por otro lado, son muy rápidas, excepto cuando el usuario no lo tiene localmente, recurrirá a una fuente predeterminada.
Imágenes de mapa de bits vs vectores
¿Su icono tiene muchos detalles y algunos efectos elegantes aplicados? En caso afirmativo, use un mapa de bits. Si no, considere usar una imagen vectorial. Para mapas de bits, use un jpg, png o un gif, para vectores, la mejor opción sería un SVG o una fuente de icono. Cada uno tiene algunos beneficios y algunos inconvenientes. Sin embargo, tengamos en cuenta el tamaño: ninguna imagen debe estar en línea sin optimización. Una página con fotos muy pesadas además de empeorar la experiencia del usuario, también podría ver su posicionamiento orgánico afectado. Los vectores, por otro lado, a menudo son pequeños, pero algunos navegadores más antiguos no lo admiten. Además, si tiene muchas curvas, puede ser más pesado que un mapa de bits, así que elija con prudencia.
