+58 (212) 286.07.60 info [at] ikels.com
::after
::after

9 principios básicos de diseño web responsive

Inicio/ Novedades/ 9 principios básicos de diseño web responsive
E

l diseño web responsive es una excelente solución para el problema que existe hoy en día de múltiples resoluciones de pantalla. Sin un tamaño fijo de página, sin milímetros o píxeles, puede ser complicado trabajarlo, pero puede ser la solución de muchos diseños.

 

Diseño web sensible vs adaptativo
Pueden parecer lo mismo, pero no lo son. Ambas opciones se complementan, por lo que no hay ninguna correcta o incorrecta. Utiliza lo que sea mejor en tu caso.

Responsive Vs Adaptive 

 

El flujo
A medida que las pantallas se vuelven cada vez mas pequeñas, el contenido ocupa más espacio vertical y empuja hacia abajo todo lo que tiene debajo de él, a esto se le llama El Flujo.

Flow Vs Static 

 

Relative units
La pantalla puede ser un computador, un dispostivo móvil o cualquiera en medio y esto hace que la densidad de pixeles cambie, por lo tanto es necesario utilizar medidas que sean flexibles y funcionen en cualquier dispositivo. Aqui es donde las medidas relativas son útiles, si una tabla tiene 50% del espacio, significa que siempre tendrá la mitad de la pantalla donde se este desplegando.

Relative Units Vs Static Units 

 

Interrupciones (Breakpoints)
Las interrupciones permiten que el diseño cambie en sitios predeterminados, por ejemplo: si tenemos 3 columnas en un desktop pero solo una columna en el diseño móvil. La mayoría de las reglas de CSS pueden ser intercambiadas de un breakpoint a otro; pero normalmente dependerá del contenido donde se coloquen. Si una oración se corta, quizá es necesario añadir un breakpoint. Sin embargo, úsalos con mucho cuidado, puede ocurrir un desastre si no se usan adecuadamente.

With Breakpoints Vs Without Breakpoints 

 

Valores máximos y mínimos
Cuando tienes un dispositivo móvil es bueno que el contenido ocupe todo el espacio visible, pero que esto mismo ocurra en la pantalla de una computadora, no parece tener mucho sentido. Es por esto que existen los valores mínimo y máximo, para ayudarnos en estos casos. Por ejemplo si tenemos ancho 100% (width 100%) y ancho máximo 1000px (max-width 1000px) el contenido ocupara el ancho máximo de la pantalla hasta mil pixeles.

Max Width Vx No Max Width 

 

Objetos anidados
Se acuerdan de la posición relativa (position: relative)? Tener mucho elementos que dependan de otros puede ser difícil de manejar, pero si agrupas los elementos en un contenedor, se vuelve mas sencillo y limpio. Aqui es donde las medidas estáticas como los pixeles pueden ayudar; son útiles en el contenido que no te interesa que cambie de tamaño, como logos o botones.

Nested Vs Not Nested 

 

Primero, ¿dispositivos móviles o pantallas normales?
Tecnicamente en este punto no hay mayor diferencia. Puedes empezar con el diseño móvil o el de pantallas normales primero, sin embargo empezar con los dispositivos móviles te añade limitaciones y te ayuda a tomar decisiones. Normalmente se trabaja en ambos al mismo tiempo.

Desktop First Vs Mobile First 

 

Webfonts o fonts del sistema
Si quieres usar tipos de letra geniales como Futura o Didot usa webfonts, pero recuerda que mientras mas tengas instalados en el portal, mas tardará en cargar. Los fonts del sistema son rápidos, pero si no están instalados en el dispositivo del usuario, se usará uno por defecto.

System Fonts Vs Webfonts 

 

Imágenes de bitmap vs imágenes en vectores
¿Tus iconos tienen mucho detalle y efectos especiales? Si la respuesta es afirmativa, usa imágenes bitmap, sino quizá debas considerar utilizar imagenes de vectores. En el caso de un bitmap utiliza .jpg, .png o .gif, para los vectores la mejor opción es .svg o un icon font. Siempre ten en cuenta el tamaño de las imágenes que subes a la web. Los vectores son más pequeños y no ocupan tanto espacio, sin embargo no todos los navegadores los soportan, además si tiene muchas curvas quizá resulta en una imagen mas pesada que el bitmap, así que ten cuidado.

Vectors Vs Images

 

Artículo obtenido de: http://blog.froont.com