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