presentacion iniciación al responsive web design
DESCRIPTION
Slides de la charla sobre RWD que impartimos en Betabeers Almería junto a @valgreensTRANSCRIPT
![Page 1: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/1.jpg)
Iniciación alResponsive Web Design
Betabeers Almería26 de octubre de 2012
![Page 2: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/2.jpg)
@manoloruiz @valgreens
![Page 3: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/3.jpg)
Antes de nada… vamos a remontarnos al principio de
la navegación móvil
![Page 4: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/4.jpg)
![Page 5: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/5.jpg)
![Page 6: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/6.jpg)
Apps nativas
![Page 7: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/7.jpg)
Mobile version
![Page 8: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/8.jpg)
¿En qué punto estamos?
![Page 9: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/9.jpg)
![Page 10: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/10.jpg)
![Page 11: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/11.jpg)
![Page 12: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/12.jpg)
Y aquí estamos jodidos
![Page 13: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/13.jpg)
Necesitamos una solución (razonablemente) económica
![Page 14: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/14.jpg)
Responsive Web DesignResponsive
![Page 15: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/15.jpg)
Diseño “sensible” al contexto en el que se visualiza
“sensible”
![Page 16: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/16.jpg)
betabeers.com
![Page 17: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/17.jpg)
betabeers.com
![Page 18: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/18.jpg)
smashingmagazine.com
![Page 19: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/19.jpg)
smashingmagazine.com
![Page 20: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/20.jpg)
smashingmagazine.com
![Page 21: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/21.jpg)
smashingmagazine.com
![Page 22: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/22.jpg)
usatoday.com(Versión móvil no responsive)
![Page 23: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/23.jpg)
usatoday.com(Versión móvil no responsive)
![Page 24: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/24.jpg)
Con RWD podemos reposicionar bloques según la resolución…
![Page 25: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/25.jpg)
… y podemos modificar la interactividad de la página para adaptarla a interfaces táctiles.
![Page 26: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/26.jpg)
¡Respeta las bases del diseño, madafaca!
![Page 27: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/27.jpg)
![Page 28: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/28.jpg)
¿Mobile first?
![Page 29: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/29.jpg)
![Page 30: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/30.jpg)
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
![Page 31: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/31.jpg)
1Layout fluido
![Page 32: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/32.jpg)
Objetivo÷
Contexto
![Page 33: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/33.jpg)
#sidebar{ width: 25%; /* 250px/1000px */ margin-right: 2%; /* 20px/1000px */}
250px
1000px
![Page 34: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/34.jpg)
16px ≃ 1em
![Page 35: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/35.jpg)
2Padding y border
![Page 36: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/36.jpg)
*{ -moz-box-sizing: border-box; box-sizing: border-box;}
![Page 37: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/37.jpg)
.box{ width: 100px; border: 5px solid; padding: 20px;}
Content-box
border-box
150px
100px
![Page 38: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/38.jpg)
3Imágenes flexibles
![Page 39: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/39.jpg)
<div class=”img-container”> <img src=”img/foto.jpg” alt=”gatitos” /></div>
.img-container {width: 30%;}
.img-container img {max-width: 100%;}
![Page 40: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/40.jpg)
Imágenes de fondo
.cabecera{ max-width: 55%; background: url(img.png) no-repeat right 40%; background-size: 45% auto;}
![Page 41: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/41.jpg)
• auto
• length
• cover
• contain
Background-size
![Page 42: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/42.jpg)
4Media Queries
![Page 43: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/43.jpg)
@media screen and (max-width:320px){ #sidebar{ float: none; width: 100%; }}
Media Queries
![Page 44: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/44.jpg)
@media screen and (min-width:700px){ #sidebar{ float: right; width: 30%; }}
Media Queries
![Page 45: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/45.jpg)
<link rel="stylesheet" href="phone.css"media="only screen and (min-width: 320px)and (max-width : 480px)">
Más Media Queries
![Page 46: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/46.jpg)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta Viewport
![Page 47: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/47.jpg)
320px480px
768px1024px
+1200px +1800px
Breakpoints populares
![Page 48: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/48.jpg)
Pero...las medidas de los dispositivos más
populares no son para siempre
![Page 49: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/49.jpg)
“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
![Page 50: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/50.jpg)
Extendiendo queries
• max-height / min-height
• device-with / device-height
• orientation(landscape / portrait)
• min-device-pixel-ratio
![Page 51: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/51.jpg)
twitter.github.com/bootstrap foundation.zurb.com
![Page 52: Presentacion Iniciación al Responsive Web Design](https://reader030.vdocumento.com/reader030/viewer/2022020122/55617d7ad8b42a171a8b51ca/html5/thumbnails/52.jpg)
Gracias :)@manoloruiz@valgreens