Presentacion Iniciación al Responsive Web Design

2,067
-1

Published on

Slides de la charla sobre RWD que impartimos en Betabeers Almería junto a @valgreens

Published in: Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,067
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
61
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Presentacion Iniciación al Responsive Web Design

  1. 1. Iniciación alResponsive Web Design Betabeers Almería 26 de octubre de 2012
  2. 2. @manoloruiz @valgreens
  3. 3. Antes de nada… vamos aremontarnos al principio de la navegación móvil
  4. 4. Apps nativas
  5. 5. Mobile version
  6. 6. ¿En qué punto estamos?
  7. 7. Y aquíestamosjodidos
  8. 8. Necesitamos una solución(razonablemente) económica
  9. 9. Responsive Web Design
  10. 10. Diseño “sensible” al contexto en el que se visualiza
  11. 11. betabeers.com
  12. 12. betabeers.com
  13. 13. smashingmagazine.com
  14. 14. smashingmagazine.com
  15. 15. smashingmagazine.com
  16. 16. smashingmagazine.com
  17. 17. usatoday.com(Versión móvil no responsive)
  18. 18. usatoday.com(Versión móvil no responsive)
  19. 19. Con RWD podemosreposicionar bloquessegún la resolución…
  20. 20. … y podemos modificarla interactividad de lapágina para adaptarla ainterfaces táctiles.
  21. 21. ¡Respeta las bases del diseño, madafaca!
  22. 22. ¿Mobile first?
  23. 23. Be responsive my friend1. Hay algo más allá de los 960px2. Layouts fluidos3. Imágenes/vídeos flexibles4. Media Queries
  24. 24. 1Layout fluido
  25. 25. Objetivo ÷Contexto
  26. 26. 1000px #sidebar{ width: 25%; /* 250px/1000px */250 margin-right: 2%;px /* 20px/1000px */ }
  27. 27. 16px ≃ 1em
  28. 28. 2Padding y border
  29. 29. *{ -moz-box-sizing: border-box; box-sizing: border-box;}
  30. 30. .box{ width: 100px; Content-box border: 5px solid; padding: 20px;} 150px border-box 100px
  31. 31. 3Imágenes flexibles
  32. 32. <div class=”img-container”> <img src=”img/foto.jpg”alt=”gatitos” /></div>.img-container {width: 30%;}.img-container img {max-width: 100%;}
  33. 33. Imágenes de fondo.cabecera{ max-width: 55%; background: url(img.png) no-repeat right 40%; background-size: 45% auto;}
  34. 34. Background-size• auto• length• cover• contain
  35. 35. 4Media Queries
  36. 36. Media Queries@media screen and (max-width:320px){ #sidebar{ float: none; width: 100%; }}
  37. 37. Media Queries@media screen and (min-width:700px){ #sidebar{ float: right; width: 30%; }}
  38. 38. Más Media Queries<link rel="stylesheet" href="phone.css"media="only screen and (min-width: 320px)and (max-width : 480px)">
  39. 39. Meta Viewport<meta name="viewport"content="width=device-width, initial-scale=1.0">
  40. 40. Breakpoints populares320px 768px +1200px +1800px480px 1024px
  41. 41. Pero...las medidas de los dispositivos más populares no son para siempre
  42. 42. “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
  43. 43. Extendiendo queries• max-height / min-height• device-with / device-height• orientation(landscape / portrait)• min-device-pixel-ratio
  44. 44. twitter.github.com/bootstrap foundation.zurb.com
  45. 45. Gracias :)@manoloruiz@valgreens
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×