Responsive Web Design

Arturo Marimón | @arturomarimon

RESPONSIVE

Be water my friend

WEB DESIGN

Arturo Marimón | @arturomarimon

Optimizado para …

Arturo Marimón | @arturomarimon

A dia de hoyhttp://opensignalmaps.com/reports/fragmentation.php

3.997 dispositivos Android

Arturo Marimón | @arturomarimon

RWD: Logical

Arturo Marimón | @arturomarimon

http://moon.es

Arturo Marimón | @arturomarimon

http://moon.es

Arturo Marimón | @arturomarimon

http://moon.es

Arturo Marimón | @arturomarimon

http://moon.es

Arturo Marimón | @arturomarimon

• Una única URL.

• Un único contenido.

• 1 millón de dispositivos. Un solo código.

Welcome back to the web

Que ventajas tiene RWD

Arturo Marimón | @arturomarimon

Google y el RWD

Arturo Marimón | @arturomarimon

• Diciembre 2011 Google publica el lanzamiento de sus bots mobile

• Mayo 2012 Google recomienda el RWD

• Antes de Diciembre 2012 ¿Qué creéis que pasará?

http://googlewebmastercentral.blogspot.com.es/2011/12/introducing-smartphone-googlebot-mobile.html

http://googlewebmastercentral.blogspot.com.es/2012/04/responsive-design-harnessing-power-of.html

Arturo Marimón | @arturomarimon

2009 - $141 millones

2010 - $750 millones

2011 - $4.000 millones

http://venturebeat.com/2012/01/10/paypals-mobile-payments-4b-2011/

Arturo Marimón | @arturomarimon

Made in Spainhttp://www.starbucks.com/static/reference/styleguide/

Arturo Marimón | @arturomarimon

Made in Spain

Arturo Marimón | @arturomarimon

Responsive Web Design no es mobile friendly es default

Arturo Marimón | @arturomarimon

Mobile first

http://www.html5rocks.com/en/mobile/responsivedesign/

Arturo Marimón | @arturomarimon

Content first+

Design Mobile first+

CSS Mobile first

Arturo Marimón | @arturomarimon

¿Que ha cambiado realmente?

Arturo Marimón | @arturomarimon

Mismo juego / más variables

Arturo Marimón | @arturomarimon

Esto ya no son 20 píxeles

Arturo Marimón | @arturomarimon

Todo es proporcional

• Ancho de divs

• Tipografía

• Ancho de las imágenes

• Media Queries

%

Arturo Marimón | @arturomarimon

<div> proporcionales

22.9% 70.83%

680px / 960px = 70.83%

La estructurafluida de todala vida.

Arturo Marimón | @arturomarimon

Tipografía: Hazlo fácil

http://informationarchitects.net/blog/responsive-typography-the-basics/

Arturo Marimón | @arturomarimon

px, em o rem

Arturo Marimón | @arturomarimon

h1 { font-size: 1.75em; /* 28px/16px */ }

p { font-size: .875em; /* 14px/16px */ }

p span { font-size: 1.2857em; /* 18px/14px */ }

Contexto del elemento es complicado

em el ancho de la M

Arturo Marimón | @arturomarimon

PERO¿HAYALGUIENMAS?

rem

Arturo Marimón | @arturomarimon

62.5% +

Arturo Marimón | @arturomarimon

html { font-size: 62.5% /* Base 10 */ }body { font-size:16px; font-size:1.6rem;

/* 16px/10px */ }

p { font-size:14px; font-size: 1.4rem;

/* 14px/10px */ }

p span { font-size:18px; font-size: 1.8rem; /* 18px/10px */ }

rem Firefox 3.6 +, Chrome, Safari 5, y IE9

Arturo Marimón | @arturomarimon

Fluid images

/* adaptables al dispositivo */img { max-width:100%; }

http://bit.ly/responsive-img

Las imágenes tienen 2 problemas

Arturo Marimón | @arturomarimon

MediaQueries

Arturo Marimón | @arturomarimon

CSS3 Media queries

http://www.w3.org/TR/css3-mediaqueries/

<link rel="stylesheet" ...media="screen and (max-width:480px)" href="...">

@media screen and (max-width:480px) { // insert CSS rules here}

Arturo Marimón | @arturomarimon

Media queries + Mobile first

CSS Básico Mobile …

@media screen and (min-width:480px) { …. }

@media screen and (min-width:768px) { …. }

@media screen and (min-width:960px) { …. }

@media screen and (min-width:1140px) { …. }

Arturo Marimón | @arturomarimon

Breakpoints mágicos

Arturo Marimón | @arturomarimon

http://www.slideshare.net/yiibu/pragmatic-responsive-design

Arturo Marimón | @arturomarimon

FAIL

Arturo Marimón | @arturomarimon

Breakpoints• El contenido marca el breakpoint no el dispositivo

• El breakpoint no debería ser en px sino en em

Arturo Marimón | @arturomarimon

FrameworksFoundation 3

http://foundation.zurb.com/

CSSgridhttp://cssgrid.net/

Goldengridsystemhttp://

goldengridsystem.com/

Less Frameworkhttp://lessframework.com/

GRIDPAKhttp://gridpak.com/

Arturo Marimón | @arturomarimon

EL WPO es clave

Arturo Marimón | @arturomarimon

PerformanceAplica las mismas normas que la web y algunas nuevas como:

• Tamaño imágenes según dispositivo

• Reduce el número de elementos DOM

• Dividir css mobile/desktop no ayuda

Arturo Marimón | @arturomarimon

Performance tools

Ahora para móvil

Blaze.io/mobile/

Arturo Marimón | @arturomarimon

The man from the moon

ARTURO MARIMÓNhttp://moon.es

http://bit.ly/clinic-rwd