9 Principios Básicos Del Diseño Web Responsive

El diseño web responsive, es una gran solución al problema de multi pantalla. El avance de realizar diseños sin la necesidad de volver a diseñar algo que ya esta realizado, es una gran ventaja que puedes encontrar en el diseño responsive, sin duda, algunos pueden encontrar algo confuso este paradigma. Por lo tanto, vamos a aclarar algunos principios básicos de diseño web responsive en este articulo, y así puedas comprender un poco mas la web fluida. Para hacerlo simple nos centraremos en lo mas fundamental para los diseños ;)

1. Diseño Web Responsive vs Diseño Web Adaptativo

Puede parecer lo mismo, pero no lo es. Ambos enfoques se complementan entre sí, lo que no hay manera correcta o incorrecta de hacerlo.

2. El Flujo De Los Elementos

Como los tamaños de pantalla se hacen más pequeños, el contenido comienza a ocupar un espacio más vertical y nada por debajo será empujado hacia abajo, a este se le conoce como flujo. Eso puede ser difícil de entender si estás acostumbrado a diseñar en pixeles y puntos, pero todo termina teniendo mas sentido, una vez lo entiendas.

3. Unidades Relativas

El lienzo puede ser un escritorio, pantalla móvil o cualquier otra pantalla de dispositivo. La densidad de píxeles también puede variar, así que tenemos unidades que sean flexibles y trabajan en todas partes. Ahí es donde unidades relativas, como porcentajes son útiles. Hacer algo 50% de ancho significa que siempre tendrá la mitad de la pantalla (o ventana, que es el tamaño de la ventana del navegador abierta).

4. Los Puntos De Interrupción

Los puntos de interrupción permiten la disposición de cambiar en puntos predefinidos, es decir, que tiene 3 columnas en un escritorio, pero sólo 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 se pone uno depende del contenido. Si una frase rompe, puede que tenga que añadir un punto de ruptura. Pero estos deben ser usarlos con precaución, puede causar problemas rápidamente cuando es difícil entender lo que está influyendo.

5. Valores Máximos Y Mínimos

A veces es más grande el contenido que ocupa todo el ancho de la pantalla, como en un dispositivo móvil, pero con el mismo contenido que se extiende a todo el ancho de la pantalla del televisor a menudo tiene menos sentido. Esta es la razón de los valores Mínimos/Máximos en CSS. Por ejemplo, puedes tener una anchura de 100% en el diseño, pero el ancho máximo de la pantalla es de 1000px. Esto significaría que el contenido va a llenar la pantalla, pero no sobrepasará más de 1000px.

6. Objetos Anidados

Recuerda la posición relativa? Tener una gran cantidad de elementos en función de cada uno, sería algo difícil de controlar. Por lo tanto, los elementos que se envuelven en un contenedor lo mantiene de forma más comprensible, limpio y ordenado. Aquí es donde las unidades estáticas como píxeles pueden ayudar. Son útiles para el contenido que no deseas a escala, como los logotipos y botones.

7. 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, añade limitaciones adicionales y ayuda a tomar decisiones si comienzas con el móvil de primero. A menudo, la gente comienza a partir de ambos extremos a la vez, así que realmente, solo tu puedes decidir que es lo mejor.

8. Webfonts vs Las Fuentes Del Sistema

¿Quieres tener un aspecto atractivo en su página web? Debes usar las Webfonts! A pesar de que se verá impresionante, recuerde que cada tipografía será descargada, por lo tanto se tardará en cargar la página. Por otro lado, al usar las fuentes del sistema te aseguran que la carga de tu sitio web será mucho mas rápida. Claro, si no existe la tipografía que has puesto en tu CSS, se usara una tipografía predeterminada.

9. Imágenes De Mapa De Bits vs Vectores

Cada uno tiene algunas ventajas y algunos inconvenientes. Sin embargo, tenga en cuenta el tamaño, no hay fotografías deben ser subidas sin optimización. Los vectores a menudo son pequeños, pero algunos navegadores antiguos no lo soportarán. Además, si tiene un montón de curvas, podría ser más pesado que un mapa de bits, así que, debes elegir sabiamente