introducción a responsive design. cómo adaptar tu web a móviles y tablets
DESCRIPTION
Slides del taller de responsive design en Congreso Web Zaragoza 2013.TRANSCRIPT
![Page 1: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/1.jpg)
Responsive designCongreso web Zaragoza 2013
Miguel MonrealWeb Development & Mobile ManagerTwitter: @monrealista
MindYourGroup.comviernes, 12 de julio de 13
![Page 2: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/2.jpg)
El contenido manda!
http://mediaqueri.es/pal/viernes, 12 de julio de 13
![Page 3: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/3.jpg)
A flexible grid (with flexible images) that incorporate media queries to create a responsive,adaptive layout.
Ethan Marcotte
Responsive web design is
viernes, 12 de julio de 13
![Page 4: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/4.jpg)
Flexible layout
http://www.slideshare.net/livefront/responsive-design-7877412viernes, 12 de julio de 13
![Page 5: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/5.jpg)
¿Como se construye un layout flexible?
Utilizar uno hecho -> http://cssgrid.net/
Construirlo nosotros mismos.
viernes, 12 de julio de 13
![Page 6: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/6.jpg)
.container (940 px)
.sidebar(305 px)
.main( 590 px)
Sitio de ejemplo
viernes, 12 de julio de 13
![Page 7: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/7.jpg)
.container
Se le suele poner un max-width alto o un width porcentual.
.container { max-width: 1300px;}
.container { width: 90%;}
viernes, 12 de julio de 13
![Page 8: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/8.jpg)
target / context = result
Fórmula
target width size parent width size
viernes, 12 de julio de 13
![Page 9: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/9.jpg)
.sidebar { width: 305px;}
.sidebar
viernes, 12 de julio de 13
![Page 10: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/10.jpg)
.sidebar { width: 305px;}
target / context = result
305 / 940 = 0.32446809
.sidebar
tamaño sidebar tamaño del padre
viernes, 12 de julio de 13
![Page 11: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/11.jpg)
.sidebar { width: 305px;}
target / context = result
305 / 940 = 0.32446809
.sidebar
tamaño sidebar tamaño del padre
.sidebar { width: 32.446809%; /* 305px/940px */}
viernes, 12 de julio de 13
![Page 12: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/12.jpg)
.container (940 px)
.sidebar(305 px)
.main( 590 px)
Sitio de ejemplo
viernes, 12 de julio de 13
![Page 13: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/13.jpg)
.main { width: 590px;}
.main
viernes, 12 de julio de 13
![Page 14: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/14.jpg)
.main { width: 590px;}
target / context = result
590 / 940 = 0.62765957
.main
tamaño main tamaño del padre
viernes, 12 de julio de 13
![Page 15: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/15.jpg)
.main { width: 590px;}
target / context = result
590 / 940 = 0.62765957
.main
tamaño main tamaño del padre
.main { width: 62.765957%; /* 590px/940px */}
viernes, 12 de julio de 13
![Page 16: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/16.jpg)
.container (940 px)
.sidebar(305 px)
.mainmargin-left: 325 px
Sitio de ejemplo
viernes, 12 de julio de 13
![Page 17: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/17.jpg)
When setting flexible margins on an element, your context is the width of the element’s container.
Ethan Marcotte (Responsive Web Design, 35)
Conversión Márgenes
viernes, 12 de julio de 13
![Page 18: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/18.jpg)
.main { margin-left:325px; width: 62.765957%; /* 590px/940px */}
Margin
viernes, 12 de julio de 13
![Page 19: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/19.jpg)
.main { margin-left:325px; width: 62.765957%; /* 590px/940px */}
target / context = result325 / 940 = 0,34574468085106
Margin
margen main tamaño del padre
viernes, 12 de julio de 13
![Page 20: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/20.jpg)
.main { margin-left:325px; width: 62.765957%; /* 590px/940px */}
target / context = result325 / 940 = 0,34574468085106
Margin
margen main tamaño del padre
.main { width: 62.765957%; /* 590px/940px */ margin-left: 34.574468%; /* 325px/940px */}
viernes, 12 de julio de 13
![Page 21: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/21.jpg)
.container (940 px)
.sidebar(305 px)
.mainpadding: 20px
width: 590 px
Sitio de ejemplo
viernes, 12 de julio de 13
![Page 22: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/22.jpg)
When setting flexible padding on an element, your context is the width of the element itself.Ethan Marcotte (Responsive Web Design, 35)
Conversión Padding
viernes, 12 de julio de 13
![Page 23: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/23.jpg)
.main { padding:20px; width: 62.765957%; /* 590px/940px */}
Padding
viernes, 12 de julio de 13
![Page 24: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/24.jpg)
.main { padding:20px; width: 62.765957%; /* 590px/940px */}
target / context = result
20 / 590 = .03389830
Padding
padding main tamaño propio
viernes, 12 de julio de 13
![Page 25: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/25.jpg)
.main { padding:20px; width: 62.765957%; /* 590px/940px */}
target / context = result
20 / 590 = .03389830
Padding
padding main tamaño propio
.main { width: 62.765957%; /* 590px/940px */ padding: 3.389830%; /* 20px/590px */}
viernes, 12 de julio de 13
![Page 26: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/26.jpg)
Flex your fonts!
No olvidemos convertir la fuentes de PX a EM
viernes, 12 de julio de 13
![Page 27: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/27.jpg)
html { font-size: 16px; /* base */}body { font-family: Georgia, serif; font-size: 62.5%; /* 1em = 10px */}
Un pequeño truco
viernes, 12 de julio de 13
![Page 28: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/28.jpg)
target / context = result
La fórmula!
10px / 16px = 0.625 -> 62,5%
target font size font size of containing element
viernes, 12 de julio de 13
![Page 29: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/29.jpg)
.container
.sidebar .main
Sitio de ejemplo
h1 { font-size:30px}
viernes, 12 de julio de 13
![Page 30: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/30.jpg)
.main h1 { font-size:30px;}
target / context = result
30 / 10 = 3
Fuente
fuente h1 tamaño defecto
.main h1{ font-size: 3em; /* 30px/10px */}
viernes, 12 de julio de 13
![Page 31: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/31.jpg)
.container
.sidebar .main
Sitio de ejemplo
h1 { font-size:30px}
a {font-size: 24px}
viernes, 12 de julio de 13
![Page 32: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/32.jpg)
.main h1 a { font-size:24px;}
target / context = result
24 / 30 = 0.8em
Fuente
fuente a tamaño h1
.main h1 a{ font-size: 0.8em; /* 24px/30px */}
viernes, 12 de julio de 13
![Page 33: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/33.jpg)
Son lugares donde en función del ancho/alto
del viewport, el diseño se “rompe”.
Break points
viernes, 12 de julio de 13
![Page 34: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/34.jpg)
Típicos breakpoints
http://www.slideshare.net/livefront/responsive-design-7877412viernes, 12 de julio de 13
![Page 35: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/35.jpg)
Media Queries
@media screen and (max-width: 320px) { body { font-size: 100%; }}
<= 320 px
viernes, 12 de julio de 13
![Page 36: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/36.jpg)
@media screen and (min-width: 1024px) { body { font-size: 100% }}
>= 1024 px
Media Queries
viernes, 12 de julio de 13
![Page 37: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/37.jpg)
Advanced Media QueriesTipo
Orientación
Color
@media screen, print { ... }
@media (orientation:portrait) { ... }
@media (color) { /* Screen in color */ }
http://css-tricks.com/css-media-queries/viernes, 12 de julio de 13
![Page 38: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/38.jpg)
Compatibilidad
http://www.slideshare.net/livefront/responsive-design-7877412viernes, 12 de julio de 13
![Page 39: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/39.jpg)
Compatibilidad
http://www.slideshare.net/livefront/responsive-design-7877412
Wouter van Der Graaf nos solucionó la papeleta:
http://code.google.com/p/css3-mediaqueries-js/
viernes, 12 de julio de 13
![Page 40: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/40.jpg)
Adaptive / Responsive design
¿Es lo mismo adaptive que responsive?
Adaptive: Nosotros definimos los break points
Responsive: El contenido define los break points
viernes, 12 de julio de 13
![Page 41: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/41.jpg)
Adaptive design
Diseñar para un contexto específico:
• Dispositivo (iphone, ipad ...)
• Tamaño de pantalla (1024x768, 320x480...)
• Resolución (retina display ...)
viernes, 12 de julio de 13
![Page 42: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/42.jpg)
Flex your media
img, video, object { max-width: 100%; }
img, video, object { width: 100%; }
Modern browsers FU.. IE 6
viernes, 12 de julio de 13
![Page 43: Introducción a responsive design. Cómo adaptar tu web a móviles y tablets](https://reader033.vdocuments.co/reader033/viewer/2022052903/5577d639d8b42ae0418b523a/html5/thumbnails/43.jpg)
Miguel Monreal@monrealista
¿Preguntas?
MindYourGroup.comviernes, 12 de julio de 13