9 GiFs que explican el “Responsive Design” Brillantemente

¿Qué es el RESPONSIVE DESIGN? … La mayoría de la gente no entiende ni vagamente que se refiere a los sitios web que se ven igual de bien tanto en los escritorios como en los dispositivos moviles ( smartphones,tablets,), pero hay mucho más que eso, lo que lleva a la confusión generalizada.

Pero los principios del RESPONSIVE DESIGN no son tan difíciles de entender, gracias a esta impresionante colección de GIFs animados elaborado por los chicos Froont , una compañía con sede en San Francisco que se especializa en la fabricación de herramientas para que los diseñadores creen sitios web responsive design.

Tomate sólo unos minutos con estos GIFs, y ya nunca mas serás apantallado o corregido por algun diseñador esnobista y pedante cuando te hable sobre “sitios web RESPONSIVE DESIGN ” o “sitios web ADAPTATIVOS” nunca más, de hecho, ahora tu podras sentirte ese pedante esnobista!

Los GIFs a continuación muestran muchos de los principios básicos de Responsive Design, con la explicación en las citas de Froont.

Los diseños Responsive se expanden, mientras que los diseños Adaptativos se adhieren a medida se expande el navegador o la pantalla gráfica.

Responsive / adaptative demo

Posicionar los elementos del diseño que utilizan píxeles como coordenadas X, Y ,pueden causar que un sitio diseñado para una pantalla se vea raro en otra. Se utilizan unidades relativas, como % de la pantalla, en lugar de unidades estáticas como píxeles. (px)

Responsive / Adaptative Demo

“A medida que los tamaños de pantalla se hacen más pequeños, el contenido comienza a ocupar más espacio vertical y nada por debajo será empujado hacia abajo. Se llama flujo”.

“Los puntos de interrupción permiten la disposición para cambiar en puntos predefinidos, es decir, que tiene tres columnas en un escritorio, pero sólo una columna en un dispositivo móvil . ”

Mediante el uso de elementos de agrupamiento, puede hacerlo de modo colecciones de elementos en pantalla se adaptan a una pantalla de contracción o expansión como uno, en vez de individualmente.

“A veces es muy bueno que el contenido ocupe 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 de la PC a menudo tiene menos sentido.”

“Técnicamente no hay mucha diferencia si un proyecto se inicia desde una pantalla más pequeña para una pantalla más grande (móvil primero) o viceversa (escritorio primero). Sin embargo, añade limitaciones adicionales y ayuda a tomar decisiones si usted comienza con el móvil primero “.

“¿Tiene su icono muchos detalles y algunos efectos de fantasía aplicadas? En caso afirmativo, utilice un mapa de bits. Si no, considere el uso de un vector de imagen.” Una imagen vectorial puede adaptarse más adecuadamente a diferentes resoluciones.

 

[Imágenes: Sandijs Ruluks / Froont ]

 

 

 

 

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s