responsive web design
DESCRIPTION
La ponencia que hemos dado en el ClinicSEO sobre Responsive Web Design, puedes verla comentada en http://moon.es/uhf/TRANSCRIPT
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