Introducción a responsive design. Cómo adaptar tu web a móviles y tablets

Responsive design
Congreso web Zaragoza 2013
Miguel Monreal
Web Development & Mobile Manager
Twitter: @monrealista
MindYourGroup.com
viernes, 12 de julio de 13

El contenido manda!
http://mediaqueri.es/pal/

A ﬂexible grid (with ﬂexible images) that incorporate
media queries to create a responsive,adaptive layout.
Ethan Marcotte
Responsive web design is

Flexible layout
http://www.slideshare.net/livefront/responsive-design-7877412

¿Como se construye un layout ﬂexible?
Utilizar uno hecho -> http://cssgrid.net/
Construirlo nosotros mismos.

.container (940 px)
.sidebar
(305 px)
.main
( 590 px)
Sitio de ejemplo

.container
Se le suele poner un max-width alto o un
width porcentual.
.container {
max-width: 1300px;
}
.container {
width: 90%;
}

target / context = result
Fórmula
target width size parent width size

.sidebar {
width: 305px;
}
.sidebar

.sidebar {
width: 305px;
}
305 / 940 = 0.32446809
.sidebar
tamaño sidebar tamaño del padre

.sidebar {
width: 305px;
}
305 / 940 = 0.32446809
.sidebar
tamaño sidebar tamaño del padre
.sidebar {
width: 32.446809%; /* 305px/940px */
}

.main {
width: 590px;
}
.main

.main {
width: 590px;
}
590 / 940 = 0.62765957
.main
tamaño main tamaño del padre

.main {
width: 590px;
}
590 / 940 = 0.62765957
.main
tamaño main tamaño del padre
.main {
width: 62.765957%; /* 590px/940px */
}

.container (940 px)
.sidebar
(305 px)
.main
margin-left: 325 px
Sitio de ejemplo

When setting ﬂexible margins on an element,
your context is the width of the element’s container.
Ethan Marcotte (Responsive Web Design, 35)
Conversión Márgenes

.main {
margin-left:325px;
width: 62.765957%;
/* 590px/940px */
}
Margin

.main {
margin-left:325px;
width: 62.765957%;
/* 590px/940px */
}
325 / 940 = 0,34574468085106
Margin
margen main tamaño del padre

.main {
margin-left:325px;
width: 62.765957%;
/* 590px/940px */
}
325 / 940 = 0,34574468085106
Margin
margen main tamaño del padre
.main {
width: 62.765957%; /* 590px/940px */
margin-left: 34.574468%; /* 325px/940px */
}

.container (940 px)
.sidebar
(305 px)
.main
padding: 20px
width: 590 px
Sitio de ejemplo

When setting ﬂexible padding on an element,
your context is the width of the element itself.
Ethan Marcotte (Responsive Web Design, 35)
Conversión Padding

.main {
padding:20px;
width: 62.765957%;
/* 590px/940px */
}
Padding

.main {
padding:20px;
width: 62.765957%;
/* 590px/940px */
}
20 / 590 = .03389830
Padding
padding main tamaño propio

.main {
padding:20px;
width: 62.765957%;
/* 590px/940px */
}
20 / 590 = .03389830
Padding
padding main tamaño propio
.main {
width: 62.765957%; /* 590px/940px */
padding: 3.389830%; /* 20px/590px */
}

Flex your fonts!
No olvidemos convertir la fuentes de PX a EM

html {
font-size: 16px; /* base */
}
body {
font-family: Georgia, serif;
font-size: 62.5%; /* 1em = 10px */
}
Un pequeño truco

La fórmula!
10px / 16px = 0.625 -> 62,5%
target font size font size of containing element

.container
.sidebar .main
Sitio de ejemplo
h1 { font-size:30px}

.main h1 {
font-size:30px;
}
30 / 10 = 3
Fuente
fuente h1 tamaño defecto
.main h1{
font-size: 3em; /* 30px/10px */
}

.container
.sidebar .main
Sitio de ejemplo
h1 { font-size:30px}
a {font-size: 24px}

.main h1 a {
font-size:24px;
}
24 / 30 = 0.8em
Fuente
fuente a tamaño h1
.main h1 a{
font-size: 0.8em; /* 24px/30px */
}

Son lugares donde en función del ancho/alto
del viewport, el diseño se “rompe”.
Break points

Típicos breakpoints

Media Queries
@media screen and (max-width: 320px) {
body {
font-size: 100%;
}
}
<= 320 px

@media screen and (min-width: 1024px) {
body {
font-size: 100%
}
}
>= 1024 px
Media Queries

Advanced Media Queries
Tipo
Orientación
Color
@media screen, print { ... }
@media (orientation:portrait) { ... }
@media (color) { /* Screen in color */ }
http://css-tricks.com/css-media-queries/

Compatibilidad

Compatibilidad
Wouter van Der Graaf nos solucionó la papeleta:
http://code.google.com/p/css3-mediaqueries-js/

Adaptive / Responsive design
¿Es lo mismo adaptive que responsive?
Adaptive: Nosotros deﬁnimos los break points
Responsive: El contenido deﬁne los break points

Adaptive design
Diseñar para un contexto especíﬁco:
• Dispositivo (iphone, ipad ...)
• Tamaño de pantalla (1024x768, 320x480...)
• Resolución (retina display ...)

Flex your media
img, video, object {
max-width: 100%;
}
img, video, object {
width: 100%;
}
Modern browsers FU.. IE 6

Miguel Monreal
@monrealista
¿Preguntas?
MindYourGroup.com

Introducción a responsive design. Cómo adaptar tu web a móviles y tablets

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Introducción a responsive design. Cómo adaptar tu web a móviles y tablets

Similar a Introducción a responsive design. Cómo adaptar tu web a móviles y tablets (20)

Último

Último (20)

Introducción a responsive design. Cómo adaptar tu web a móviles y tablets