¿Qué es el Responsive Web Design y cómo se aplica?

1. Responsive web Design

2. Sylvain Pellet
‘90s

3. Christopher Fritz
2000

4. rodrigo.haenggi
2007

5. Jeremy Keith
hoy

6. ¿MAÑANA?

7. ¿QUÉ HACEMOS ENTONCES?

8. Responsive web Design

9. ¿QUÉ ES?
El diseño web adaptativo o adaptable (en inglés,
Responsive Web Design) es una técnica de diseño y
desarrollo web que mediante el uso de estructuras e
imágenes fluidas, así como de media-queries en la hoja de
estilo CSS, consigue adaptar el sitio web al entorno del
usuario.
Ethan Marcotte

10. 1 sitio à múltiples pantallas

11. En lugar de adaptar los diseños a un
número cada vez mayor de
dispositivos web, podemos tratarlos
como facetas de una misma
experiencia.
Ethan Marcotte
“

12. Cómo lo aplicamos
Grillas flexibles
1
2
3
Elementos multimedia flexibles, imágenes flexibles y
adaptive images
Media queries
4 Testing

13. En lugar de diseñar nuestra web basándonos en valores
fijos (width: 960px), el diseño fluido está pensado en
términos de proporciones (width: 100%) .
GRILLAS flexibles
Nithin Viswanathan, from The Noun Project
Mayor información en:http://alistapart.com/articlesfluidgrids

14. Elementos multimedia flexibles
Las mismas consideraciones que con la grilla flexible, no
utilizamos valores fijos sino que proporcionales en
nuestra hoja de estilos:
video, object {max-width:100%;}
Mayor información en: http://netmagazine.com/tutorials/create-fluid-width-videos
The Noun Project

15. IMÁGENES FLEXIBLES
Las mismas consideraciones que con la grilla flexible, no
utilizamos valores fijos sino que proporcionales en
nuestra hoja de estilos:
{max-width:100%;}
José Campos, from The Noun Project

16. ADAPTIVE IMAGES
Las imágenes flexibles tienen la desventaja de que a
veces se pueden ver pixeladas, esta opción plantea
utilizar una imagen distinta para cada resolución.
Mayor información en: http://adaptive-images.com
José Campos, from The Noun Project

17. Media queries
Son parte de CSS3 y lo que hacen es inspeccionar las características físicas
del medio que va a mostrar nuestro diseño (por eso media query, query es
consulta en inglés). Si las características del medio utilizado por el usuario
están dentro de una condicional establecida con los Media Queries,
entonces se aplicarán una serie de instrucciones CSS contenidas dentro del
mismo:
Mayor información en: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
@media (max-width: 320px) {
/* Aquí van las reglas CSS para un tamaño */
}
@media (min-width:320px) and (max-width: 600px) {
/* Aquí van las reglas CSS para un rango de pantallas */
}

18. TESTING
@danscotton

19. Al usuario no le importa si el sitio es responsive o una versión
para móviles exclusiva.
Si le importa cuando no puede hacer lo que necesita hacer.
El usuario es LO MÁS importante

20. GRACIAS
Paula Serman
@paulitzim
Paula Serman
#BCU
@bluecompany