About Taringa!

Popular channels

¿Que es el Responsive Design? (CSS)

Introduccion a Responsive Design

@ByPitBuLL


Que es Responsive Design?

Responsive Web Design es un enfoque para el diseño de sitios web que proporcionan una experiencia de visualización óptima en tantos dispositivos como sea posible. Esto se logra mediante el uso de CSS Consultas de medios, redes de fluidos, y las imágenes flexibles. Mediante la utilización de estas tres cosas, los diseñadores pueden crear sitios que escalan hacia arriba o abajo para cualquier resolución de tamaño, sin que los usuarios necesitan para zoom, pan, o cambiar el tamaño de su navegador.


¿Por que Responsive Design?

Durante el último par de años, la cantidad de usuarios navegando por la web en tabletas y dispositivos móviles ha ido en constante aumento. Para el próximo año, estos dispositivos deberían representar el 20% de todo el tráfico web, y con un mercado de sobremesa de consumo cada vez menor, estos números son sólo va a crecer. Para llegar a estas personas, los sitios web deben ser capaces de reproducirse correctamente en su dispositivo. Para la mayoría de los sitios web, los usuarios móviles suelen tener un porcentaje de abandonos del 10% o superior a los usuarios de escritorio y que se atribuye directamente a sitios web no siendo móvil fácil.


¿Como funciona Responsive Design?


Rejillas de Fluidos
Rejillas de fluidos son la piedra angular para la creación de un diseño de respuesta. Con las redes de fluidos, los diseñadores suelen establecer un tamaño máximo para el diseño y luego dividir esa zona en columnas. Estas columnas y los elementos dentro de cada conjunto están a un ancho porcentaje basado en lugar de un tamaño de píxel fijo. Esto permite que el diseño a escala como el tamaño de los cambios del navegador.
Muchos diseñadores utilizan los frameworks de esta rejilla de líquido para hacer más fácil el proceso de diseño. Hay varias para elegir, pero Twitter Bootstrap y Zurb Foundation, son dos de los más populares. Vamos a ver más en profundidad estos y algunos otros frameworks en un post posterior.

Media Queries
Media Queries allow you to conditionally apply different CSS styling based on a number of different options. For the purposes of responsive design, we typically utilize the min- & max-width queries.

/* Large desktop */
@media (min-width: 1200px) { }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { }
/* Landscape phones and down */
@media (max-width: 480px) { }


Este es un ejemplo de cómo las Media Queries suelen buscar. Cualquier CSS que está dentro de los paréntesis sólo se aplicará en los dispositivos que coinciden con los anchos especificados. Media Queries suelen ser apoyadas por la mayoría de los navegadores, a pesar de que no va a funcionar para cualquier usuario en Internet Explorer 8 y por debajo, así que tenlo en cuenta a la hora de crear sus diseños.

Ejemplos de Responsive Design
Muchas grandes empresas han sido la transición a un diseño basado receptivo para sus sitios web. A continuación se presentan sólo algunos ejemplos de lo que puede lograrse con esta técnica. Basta con cambiar el tamaño de su navegador y ver cómo cambia el diseño.


A la vista del gran escritorio, tableta y vistas móviles desde el sitio web de The Boston Globe.

Los mejores ejemplos de Responsive Desing Web:
Boston Globe
Time Magazine
The Next Webt
0No comments yet
      GIF