Este documento resume una presentación sobre el diseño web responsivo (responsive web design). Explica que el diseño web responsivo permite que los sitios web se adapten a diferentes dispositivos mediante el uso de layouts fluidos, imágenes flexibles, y queries de medios. También recomienda comenzar con un enfoque mobile-first y utilizar breakpoints basados en el contenido en lugar de los tamaños de pantalla de los dispositivos.

1. Iniciación al
Responsive Web Design
Betabeers Almería
26 de octubre de 2012

2. @manoloruiz @valgreens

3. Antes de nada… vamos a
remontarnos al principio de
la navegación móvil

6. Apps nativas

7. Mobile version

8. ¿En qué punto estamos?

12. Y aquí
estamos
jodidos

13. Necesitamos una solución
(razonablemente) económica

14. Responsive Web Design

15. Diseño “sensible” al contexto
en el que se visualiza

16. betabeers.com

17. betabeers.com

18. smashingmagazine.com

19. smashingmagazine.com

20. smashingmagazine.com

21. smashingmagazine.com

22. usatoday.com
(Versión móvil no responsive)

23. usatoday.com
(Versión móvil no responsive)

24. Con RWD podemos
reposicionar bloques
según la resolución…

25. … y podemos modificar
la interactividad de la
página para adaptarla a
interfaces táctiles.

26. ¡Respeta las bases del
diseño, madafaca!

28. ¿Mobile first?

30. Be responsive my friend
1. Hay algo más allá de los 960px
2. Layouts fluidos
3. Imágenes/vídeos flexibles
4. Media Queries

31. 1
Layout fluido

32. Objetivo
÷
Contexto

33. 1000px
#sidebar{
width: 25%;
/* 250px/1000px */
250 margin-right: 2%;
px /* 20px/1000px */
}

34. 16px ≃ 1em

35. 2
Padding y border

36. *{
-moz-box-sizing: border-box;
box-sizing: border-box;
}

37. .box{
width: 100px; Content-box
border: 5px solid;
padding: 20px;
}
150px
border-box
100px

38. 3
Imágenes flexibles

39. <div class=”img-container”>
<img src=”img/foto.jpg”
alt=”gatitos” />
</div>
.img-container {width: 30%;}
.img-container img {max-width: 100%;}

40. Imágenes de fondo
.cabecera{
max-width: 55%;
background: url(img.png) no-repeat
right 40%;
background-size: 45% auto;
}

41. Background-size
• auto
• length
• cover
• contain

42. 4
Media Queries

43. Media Queries
@media screen and (max-width:320px){
#sidebar{
float: none;
width: 100%;
}
}

44. Media Queries
@media screen and (min-width:700px){
#sidebar{
float: right;
width: 30%;
}
}

45. Más Media Queries
<link rel="stylesheet" href="phone.css"
media="only screen and (min-width: 320px)
and (max-width : 480px)">

46. Meta Viewport
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">

47. Breakpoints populares
320px 768px +1200px +1800px
480px 1024px

48. Pero...
las medidas de los dispositivos más
populares no son para siempre

49. “El uso de media queries debería estar
dictado por el contenido, no por los
dispositivos. O, dicho de otra forma,
pongamos la media query en el punto
donde el diseño se rompa.”
– Javier Usobiaga y Marta Armada –
swwweet.com/training

50. Extendiendo queries
• max-height / min-height
• device-with / device-height
• orientation(landscape / portrait)
• min-device-pixel-ratio

51. twitter.github.com/bootstrap foundation.zurb.com

52. Gracias :)
@manoloruiz
@valgreens