Responsive Web Design

  • 8,708 views
Uploaded on

La ponencia que hemos dado en el ClinicSEO sobre Responsive Web Design, puedes verla comentada en http://moon.es/uhf/

La ponencia que hemos dado en el ClinicSEO sobre Responsive Web Design, puedes verla comentada en http://moon.es/uhf/

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Ponencia de responsive presentada en el clinic de SEO para Moviles
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,708
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
68
Comments
1
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Arturo Marimón | @arturomarimon RESPONSIVE WEB DESIGNBe water my friend
  • 2. Arturo Marimón | @arturomarimonOptimizadopara …
  • 3. Arturo Marimón | @arturomarimon 3.997 dispositivos AndroidA dia de hoy http://opensignalmaps.com/reports/fragmentation.php
  • 4. Arturo Marimón | @arturomarimonRWD: Logical
  • 5. Arturo Marimón | @arturomarimonhttp://moon.es
  • 6. Arturo Marimón | @arturomarimonhttp://moon.es
  • 7. Arturo Marimón | @arturomarimonhttp://moon.es
  • 8. Arturo Marimón | @arturomarimonhttp://moon.es
  • 9. Arturo Marimón | @arturomarimon Queventajastiene RWD • Una única URL. • Un único contenido. • 1 millón de dispositivos. Un solo código.Welcome back totheweb
  • 10. Arturo Marimón | @arturomarimonGoogle y el RWD
  • 11. Arturo Marimón | @arturomarimon• Diciembre 2011Google publica el lanzamiento de sus botsmobile http://googlewebmastercentral.blogspot.com.es/2011/12/intro ducing-smartphone-googlebot-mobile.html• Mayo 2012Google recomienda el RWD http://googlewebmastercentral.blogspot.com.es/2012/04/responsive- design-harnessing-power-of.html• Antes de Diciembre 2012¿Qué creéis que pasará?
  • 12. Arturo Marimón | @arturomarimon 2009 - $141 millones 2010 - $750 millones 2011 - $4.000 milloneshttp://venturebeat.com/2012/01/10/paypals-mobile-payments-4b-2011/
  • 13. Arturo Marimón | @arturomarimonMade in Spain http://www.starbucks.com/static/reference/styleguide/
  • 14. Arturo Marimón | @arturomarimonMade in Spain
  • 15. Arturo Marimón | @arturomarimon Responsive Web Designno es mobilefriendlyes default
  • 16. Arturo Marimón | @arturomarimon Mobile firsthttp://www.html5rocks.com/en/mobile/responsivedesign/
  • 17. Arturo Marimón | @arturomarimon Content first +Design Mobile first + CSS Mobile first
  • 18. Arturo Marimón | @arturomarimon¿Que ha cambiadorealmente?
  • 19. Arturo Marimón | @arturomarimonMismojuego / más variables
  • 20. Arturo Marimón | @arturomarimonEstoya no son 20 píxeles
  • 21. Arturo Marimón | @arturomarimon•Ancho de divs•Tipografía•Ancho de lasimágenes• Media QueriesTodoesproporcional
  • 22. Arturo Marimón | @arturomarimon<div>proporcionalesLa estructurafluidade todala vida. 22.9% 70.83% 680px / 960px = 70.83%
  • 23. Arturo Marimón | @arturomarimon Tipografía: Hazlofácilhttp://informationarchitects.net/blog/responsive-typography-the-basics/
  • 24. Arturo Marimón | @arturomarimonpx, em o rem
  • 25. Arturo Marimón | @arturomarimonemel ancho de la Mh1 { font-size: 1.75em; /* 28px/16px */}p { font-size: .875em; /* 14px/16px */}pspan { font-size: 1.2857em; /* 18px/14px */ }Contexto del elemento es complicado
  • 26. Arturo Marimón | @arturomarimonPERO ¿ HAYALGUIENMAS?
  • 27. Arturo Marimón | @arturomarimon62.5% +
  • 28. Arturo Marimón | @arturomarimonrem Firefox 3.6 +, Chrome, Safari 5, y IE9html { 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 */}pspan { font-size:18px; font-size: 1.8rem;/* 18px/10px */ }
  • 29. Arturo Marimón | @arturomarimonFluid images /* adaptables al dispositivo */ img{max-width:100%;} Las imágenes tienen 2 problemas http://bit.ly/responsive-img
  • 30. Arturo Marimón | @arturomarimonMediaQueries
  • 31. Arturo Marimón | @arturomarimonCSS3 Media queries <link rel="stylesheet" ...media="screen and (max-width:480px)" href="..."> @media screen and (max-width:480px) { // insert CSS rules here } http://www.w3.org/TR/css3-mediaqueries/
  • 32. Arturo Marimón | @arturomarimon Media queries + Mobile firstCSS 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) { ….}
  • 33. Arturo Marimón | @arturomarimonBreakpoints mágicos
  • 34. Arturo Marimón | @arturomarimonhttp://www.slideshare.net/yiibu/pragmatic-responsive-design
  • 35. Arturo Marimón | @arturomarimon
  • 36. Arturo Marimón | @arturomarimon Breakpoints• El contenido marca el breakpoint no el dispositivo• El breakpointno debería ser en pxsino en em
  • 37. Arturo Marimón | @arturomarimonFrameworksFoundation 3 Goldengridsystem http://foundation.zurb.com/ http://goldengridsystem.com/CSSgrid Less Framework http://cssgrid.net/ http://lessframework.com/ GRIDPAK http://gridpak.com/
  • 38. Arturo Marimón | @arturomarimonEL WPO es clave
  • 39. Arturo Marimón | @arturomarimonPerformanceAplica las mismas normas que la web yalgunas nuevas como:• Tamaño imágenes según dispositivo• Reduce el número de elementos DOM• Dividir cssmobile/desktop no ayuda
  • 40. Arturo Marimón | @arturomarimonPerformance tools Ahora para móvil Blaze.io/mobile/
  • 41. Arturo Marimón | @arturomarimonThe man from the moon ARTURO MARIMÓN http://moon.es http://bit.ly/clinic-rwd