Introducción a responsive design. Cómo adaptar tu web a móviles y tablets
43
Responsive design Congreso web Zaragoza 2013 Miguel Monreal Web Development & Mobile Manager Twitter: @monrealista MindYourGroup.com viernes, 12 de julio de 13
-
Upload
miguel-monreal -
Category
Technology
-
view
2.156 -
download
0
description
Slides del taller de responsive design en Congreso Web Zaragoza 2013.
Transcript of Introducción a responsive design. Cómo adaptar tu web a móviles y tablets
Responsive designCongreso web Zaragoza 2013
Miguel MonrealWeb Development & Mobile ManagerTwitter: @monrealista
MindYourGroup.comviernes, 12 de julio de 13
El contenido manda!
http://mediaqueri.es/pal/viernes, 12 de julio de 13
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
Flexible layout
http://www.slideshare.net/livefront/responsive-design-7877412viernes, 12 de julio de 13
¿Como se construye un layout flexible?
Utilizar uno hecho -> http://cssgrid.net/
Construirlo nosotros mismos.
viernes, 12 de julio de 13
.container (940 px)
.sidebar(305 px)
.main( 590 px)
Sitio de ejemplo
viernes, 12 de julio de 13
.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
target / context = result
Fórmula
target width size parent width size
viernes, 12 de julio de 13
.sidebar { width: 305px;}
.sidebar
viernes, 12 de julio de 13
.sidebar { width: 305px;}
target / context = result
305 / 940 = 0.32446809
.sidebar
tamaño sidebar tamaño del padre
viernes, 12 de julio de 13
.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
.container (940 px)
.sidebar(305 px)
.main( 590 px)
Sitio de ejemplo
viernes, 12 de julio de 13
.main { width: 590px;}
.main
viernes, 12 de julio de 13
.main { width: 590px;}
target / context = result
590 / 940 = 0.62765957
.main
tamaño main tamaño del padre
viernes, 12 de julio de 13
.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
.container (940 px)
.sidebar(305 px)
.mainmargin-left: 325 px
Sitio de ejemplo
viernes, 12 de julio de 13
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
.main { margin-left:325px; width: 62.765957%; /* 590px/940px */}
Margin
viernes, 12 de julio de 13
.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
.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
.container (940 px)
.sidebar(305 px)
.mainpadding: 20px
width: 590 px
Sitio de ejemplo
viernes, 12 de julio de 13
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
.main { padding:20px; width: 62.765957%; /* 590px/940px */}
Padding
viernes, 12 de julio de 13
.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
.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
Flex your fonts!
No olvidemos convertir la fuentes de PX a EM
viernes, 12 de julio de 13
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
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
.container
.sidebar .main
Sitio de ejemplo
h1 { font-size:30px}
viernes, 12 de julio de 13
.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
.container
.sidebar .main
Sitio de ejemplo
h1 { font-size:30px}
a {font-size: 24px}
viernes, 12 de julio de 13
.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
Son lugares donde en función del ancho/alto
del viewport, el diseño se “rompe”.
Break points
viernes, 12 de julio de 13
Típicos breakpoints
http://www.slideshare.net/livefront/responsive-design-7877412viernes, 12 de julio de 13
Media Queries
@media screen and (max-width: 320px) { body { font-size: 100%; }}
<= 320 px
viernes, 12 de julio de 13
@media screen and (min-width: 1024px) { body { font-size: 100% }}
>= 1024 px
Media Queries
viernes, 12 de julio de 13
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
Compatibilidad
http://www.slideshare.net/livefront/responsive-design-7877412viernes, 12 de julio de 13
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
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
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
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
Miguel Monreal@monrealista
¿Preguntas?
MindYourGroup.comviernes, 12 de julio de 13
