Responsive design for dummies


Que es el responsive design? el diseño adaptativo? Responsive Design es una gran solución al problema multi-pantalla, imaginen la cantidad de dispositivos, marcas, resoluciones que existen en el mercado y en todas debería verse igual el contenido de la web y el diseño adaptativo nos ayuda a resolverlo.

Diseñar en píxeles para Desktop y Mobile sólo es también el pasado, a medida que más y más dispositivos pueden abrir un sitio web. Por lo tanto, vamos a aclarar algunos principios básicos de diseño web sensible aquí para asociarnos a la web líquida, en lugar de luchar contra él. Para hacerlo simple nos centraremos en los diseños (sí, responsive va mucho más profundo que eso y si quieres aprender más este es un buen comienzo).

Estos GIFs de ejemplo te ayudarán a entender mejor los conceptos, ya que muestran muchos de los principios básicos de diseños sensibles a los dispositivos.

Responsive vs diseño web adaptativo
Puede parecer lo mismo, pero no lo es. Ambos enfoques se complementan entre sí, lo que no hay una forma correcta o incorrecta de hacerlo. El contenido manda.

Fluido
Como los tamaños de pantalla se hacen más pequeños, el contenido comienza a ocupar un espacio más vertical y lo que no entre será empujado hacia abajo, se llama flujo/fluido. Eso puede ser difícil de entender si estás acostumbrado a diseñar con píxeles, pero tiene todo el sentido cuando te acostumbras a él.

Unidades relativas
La pantalla puede ser desktop, pantalla móvil o cualquier otra cosa. La densidad de píxeles también puede variar, así que tenemos unidades que sean flexibles y trabajan en todas partes. Ahí es donde las unidades relativas, como porcentajes son útiles. Así que hacer algo 50% de ancho significa que siempre tendrá la mitad de la pantalla.

Breakpoints (Puntos de interrupción)
Los breakpoints permiten la disposición para cambiar en puntos predefinidos en el ancho de la pantalla, es decir, cuando el desktop se tienen 3 columnas, pero sólo 1 columna en un dispositivo móvil. La mayoría de las propiedades CSS se pueden cambiar de un breakpoint a otro. Por lo general, donde se pone uno depende del contenido que tenga la pantalla. Si una frase se rompe, puede se tenga que generar un nuevo breakpoint de ser necesario. Pero hay que usarlos con precaución, pueden causar problemas rápidamente cuando es difícil entender lo que está influyendo y que no.

Valores Max y Min
A veces es más grande el contenido y 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 monitor a menudo tiene menos sentido. Esta es la razón por Min / Max entra en juego. Por ejemplo si tiene un ancho de 100% y el ancho máximo de 1000px significaría que el contenido va a llenar la pantalla, pero no ir más de 1000px.

Objetos anidados
Recuerdas sobre posición relativa? Tener una gran cantidad de elementos en función de sí mismo sería difícil de controlar, por lo tanto, se puede tener en cuenta elementos que envuelvan en un contenedor para mantenerlo de forma más controlable, limpio y ordenado. Aquí es donde las unidades estáticas como píxeles pueden ayudar. Son útiles para el contenido que no quieres tener en escala, como los logotipos y botones, por ejemplo.

Móvil o desktop 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 desktop primero). Sin embargo, algunas limitaciones adicionales sobre el contenido ayuda a tomar decisiones si se comienza con móvil primero. A menudo, la gente comienza a partir de ambos extremos a la vez, así que realmente, sería ideal tomar los parámetros que funcionen mejor para el proyecto

Fuentes Web vs Las fuentes del sistema
¿Quieres tener un aspecto atractivo Raleway o Arial en su página web? Puedes utilizar Google Fonts y serán cargadas dinámicamente. Las fuentes de sistema, por otro lado cargan en tiempo real pero no hay tantas opciones y para el responsive es ideal tener esto en cuenta.

Imágenes vs Vectores
¿Su imagen tiene muchos detalles y algunos efectos de fantasía aplicados? En caso afirmativo, utilizar imágenes de bits. Si no es e lcaso, considere el uso de un vector de imagen. Para imágenes de bits o “pixelares” se utilizan un jpg, png o gif, para los vectores la mejor opción sería un SVG o una fuente icono. Cada uno tiene algunas ventajas y algunos inconvenientes. Sin embargo, hay que tener en cuenta el tamaño, las fotografías deben publicarse optimizadas. Los vectores a menudo son más livianos, pero algunos navegadores antiguos no lo soportarán. Además, si tiene un montón de curvas, podría ser más pesado que una imagen de bits, así que hay que elegir sabiamente.

Entendemos que este resumen es bastante claro y nosotros lo re-escribimos con nuestro expertise en especialización de desarrollos digitales y con cada uno de nuestros integrantes del equipo de desarrolladores opinando del tema.

Necesitas un desarrollo responsivo? Nosotros te podemos ayudar


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.