Presentacion Iniciación al Responsive Web Design
2 recomendaciones1,840 vistas
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.
Presentacion Iniciación al Responsive Web Design
- 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
- 8. ¿En qué punto estamos?
- 13. Necesitamos una solución (razonablemente) económica
- 15. Diseño “sensible” al contexto en el que se visualiza
- 16. betabeers.com
- 17. betabeers.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
- 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
- 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