Tuesday, July 23, 13
¿Y qué es esto de Responsive
Web Design?
Juan Daniel Flórez
Director de diseño - Rootstack
Desayuno Mensual Julio
Tuesday,...
Rootstack
• Fundada en 2010
• Miembros de:
Tuesday, July 23, 13
Nuestros Servicios
• Estrategia
• Diseño
• Desarrollo
• Desarrollo móvil
• Soporte y Mantenimiento
• Entrenamiento
Tuesday...
Nuestros clientes
Tuesday, July 23, 13
Nuestros clientes
Tuesday, July 23, 13
Temario
‣ ¿Qué es Responsive Web Design
(RWD)?
‣ ¿Cómo funciona?
‣ Casos de estudio y recomendaciones
‣ Ventajas del RWD
T...
2005
Tuesday, July 23, 13
2013
Tuesday, July 23, 13
Estadísticas
‣ Ventas de tablets están previstas a
superar los 100 millones este año.
‣ En el Q4 del 2012 se vendieron más...
Monetate Q1 2013 Ecommerce Quarterly
500 millones de visitas en sitios de retail. Monetate Q1 2013
Crecimiento de tráfico
...
Sushiexpresspanama.com
Tráfico en Panamá
24.1% Visitantes usan dispositivos móviles (iOS, Android, Blackberry)
Tuesday, Ju...
Miles de dispositivos
Tuesday, July 23, 13
Tamaños de resoluciones de
smartphones
OpenSignalMaps - 2012
Tuesday, July 23, 13
OpenSignalMaps - 2012
Android iOS
Diferencia de resoluciones
Tuesday, July 23, 13
Es una prioridad que podamos darle a
nuestros usuarios una experiencia
adecuada.
Hay que ofrecerle una solución a los
usua...
Prioridades
Tuesday, July 23, 13
• No podemos encasillarnos en una
tecnología o dispositivo:
“Un sitio móvil para iPhone”.
¿Por qué no?
Porque hoy tenemos ...
Android
La única constante es el cambio
Tuesday, July 23, 13
Pensemos más allá
Tuesday, July 23, 13
“En vez de crear diseños desconectados entre
si para un número creciente de dispositivos,
podemos tratarlo como facetas de...
“Pensar en la web responsiva es pensar
en proporciones, no en píxeles”
Trent Walton
La idea
Tuesday, July 23, 13
¿Qué es Responsive Web
Design?
Tuesday, July 23, 13
“Un sitio web debe responder al
dispositivo que lo está accesando”.
RWD
Tuesday, July 23, 13
1. Un layout flexible, basado en grids
2. Imágenes y media flexibles
3. Media queries
Definición
Tuesday, July 23, 13
Layout flexible, basado en grids
Tuesday, July 23, 13
http://foundation.zurb.com/grid-example3.php
Layout flexible, basado en grids
Tuesday, July 23, 13
Imágenes y media flexibles
Tuesday, July 23, 13
• No flash!
• Distintas imágenes (tamaños y
medidas).
• Reproductores de audio y video HTML5
• Sliders
Imágenes y media fle...
Mediatypes & mediaqueries
<html>
<head>
<link rel=”stylesheet” href=”global.css” media=”all” />
<link rel=”stylesheet” hre...
Tuesday, July 23, 13
The Boston Globe
http://www.bostonglobe.com/
¿Quiénes lo están haciendo?
Tuesday, July 23, 13
WWF
http://www.wwf.org/
¿Quiénes lo están haciendo?
Tuesday, July 23, 13
Time
http://www.time.com/
¿Quiénes lo están haciendo?
Tuesday, July 23, 13
Vogue (Britain)
http://vogue.co.uk/
¿Quiénes lo están haciendo?
Tuesday, July 23, 13
Starbucks
http://www.starbucks.com/
¿Quiénes lo están haciendo?
Tuesday, July 23, 13
Hillsong London
http://www.hillsong.co.uk/
¿Quiénes lo están haciendo?
Tuesday, July 23, 13
Gateway Bank of Mesa, AZ
http://www.gcbaz.com/
¿Quiénes lo están haciendo?
Tuesday, July 23, 13
Jyske Bank
http://www.jyskebank.dk/wps/portal/jfo/forside
¿Quiénes lo están haciendo?
Tuesday, July 23, 13
Autoridad de Turismo de Panamá
http://www.atp.gob.pa/
Sitios que hemos hecho
Tuesday, July 23, 13
‣ Cuesta mucho
‣ Es difícil de hacer
Conceptos erróneos
Tuesday, July 23, 13
‣ Es más costoso hacer sitios individuales o
separados.
‣ Costos de actualizacion y mantenimiento son
menores al usar un s...
‣ Es duro el cambio de mentalidad
‣ La tecnología está; no hay que inventar nada
‣ Al principio es difícil adaptar el dise...
Las ventajas
Area Beneficio
Experiencia de
usuario
Con una buena planeación, la experiencia para todos
los usuarios es bue...
‣ Reproductores video HTML5
‣ http://www.videojs.com/
‣ http://sublimevideo.net/
‣ Sistemas de grid
‣ http://foundation.zu...
‣ Webfonts
‣ https://typekit.com/
‣ http://www.google.com/fonts/
‣ Iconos con fonts
‣ http://symbolset.com/
‣ http://forta...
Preguntas
Tuesday, July 23, 13
Email: info@rootstack.com Teléfono: +507 209 9002
Via Brasil, Edificio Brazil 405, Oficina 15-H.
Tuesday, July 23, 13
Upcoming SlideShare
Loading in …5
×

¿Y qué es esto de Responsive Web Design?

699 views
616 views

Published on

Es una realidad que las personas no acceden al Internet exclusivamente desde sus computadoras: ahora usan también los smart phones, tablets, televisiones smart y consolas de videojuegos. Cada vez hay más dispositivos con resoluciones distintas y nuevas tecnologías que hay que soportar; crear y mantener un sitio para cada uno de estos dispositivos se vuelve imposible.

De ahí nace el concepto de "diseño responsivo": en lugar de hacer diseños a la medida y desconectados para cada uno de los dispositivos, podemos diseñar para una experiencia óptima que se ajuste al dispositivo que lo accede.

Esta presentación fue creada por Rootstack, en donde se explica que es el diseño responsivo (Responsive Web Design), sus ventajas, cómo funciona, cómo vender este concepto a clientes, casos de estudio y recomendaciones.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
699
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

¿Y qué es esto de Responsive Web Design?

  1. 1. Tuesday, July 23, 13
  2. 2. ¿Y qué es esto de Responsive Web Design? Juan Daniel Flórez Director de diseño - Rootstack Desayuno Mensual Julio Tuesday, July 23, 13
  3. 3. Rootstack • Fundada en 2010 • Miembros de: Tuesday, July 23, 13
  4. 4. Nuestros Servicios • Estrategia • Diseño • Desarrollo • Desarrollo móvil • Soporte y Mantenimiento • Entrenamiento Tuesday, July 23, 13
  5. 5. Nuestros clientes Tuesday, July 23, 13
  6. 6. Nuestros clientes Tuesday, July 23, 13
  7. 7. Temario ‣ ¿Qué es Responsive Web Design (RWD)? ‣ ¿Cómo funciona? ‣ Casos de estudio y recomendaciones ‣ Ventajas del RWD Tuesday, July 23, 13
  8. 8. 2005 Tuesday, July 23, 13
  9. 9. 2013 Tuesday, July 23, 13
  10. 10. Estadísticas ‣ Ventas de tablets están previstas a superar los 100 millones este año. ‣ En el Q4 del 2012 se vendieron más de 200 millones de smartphones (Android, iOS, Blackberry y Microsoft) Tuesday, July 23, 13
  11. 11. Monetate Q1 2013 Ecommerce Quarterly 500 millones de visitas en sitios de retail. Monetate Q1 2013 Crecimiento de tráfico Tuesday, July 23, 13
  12. 12. Sushiexpresspanama.com Tráfico en Panamá 24.1% Visitantes usan dispositivos móviles (iOS, Android, Blackberry) Tuesday, July 23, 13
  13. 13. Miles de dispositivos Tuesday, July 23, 13
  14. 14. Tamaños de resoluciones de smartphones OpenSignalMaps - 2012 Tuesday, July 23, 13
  15. 15. OpenSignalMaps - 2012 Android iOS Diferencia de resoluciones Tuesday, July 23, 13
  16. 16. Es una prioridad que podamos darle a nuestros usuarios una experiencia adecuada. Hay que ofrecerle una solución a los usuarios que acceden a nuestros sitios a través de sus celulares y tabletas. Prioridades Tuesday, July 23, 13
  17. 17. Prioridades Tuesday, July 23, 13
  18. 18. • No podemos encasillarnos en una tecnología o dispositivo: “Un sitio móvil para iPhone”. ¿Por qué no? Porque hoy tenemos x resolución para x dispositivo y mañana no sabemos. ¿Qué cosas no queremos? Tuesday, July 23, 13
  19. 19. Android La única constante es el cambio Tuesday, July 23, 13
  20. 20. Pensemos más allá Tuesday, July 23, 13
  21. 21. “En vez de crear diseños desconectados entre si para un número creciente de dispositivos, podemos tratarlo como facetas de la misma experiencia. Podemos diseñar para una experiencia óptima, que implemente tecnologías basadas en estándares en nuestros diseños para hacerlos no solamente flexibles, pero más adaptivos al medio que lo accesa.” Ethan Marcotte La idea Tuesday, July 23, 13
  22. 22. “Pensar en la web responsiva es pensar en proporciones, no en píxeles” Trent Walton La idea Tuesday, July 23, 13
  23. 23. ¿Qué es Responsive Web Design? Tuesday, July 23, 13
  24. 24. “Un sitio web debe responder al dispositivo que lo está accesando”. RWD Tuesday, July 23, 13
  25. 25. 1. Un layout flexible, basado en grids 2. Imágenes y media flexibles 3. Media queries Definición Tuesday, July 23, 13
  26. 26. Layout flexible, basado en grids Tuesday, July 23, 13
  27. 27. http://foundation.zurb.com/grid-example3.php Layout flexible, basado en grids Tuesday, July 23, 13
  28. 28. Imágenes y media flexibles Tuesday, July 23, 13
  29. 29. • No flash! • Distintas imágenes (tamaños y medidas). • Reproductores de audio y video HTML5 • Sliders Imágenes y media flexibles Tuesday, July 23, 13
  30. 30. Mediatypes & mediaqueries <html> <head> <link rel=”stylesheet” href=”global.css” media=”all” /> <link rel=”stylesheet” href=”main.css” media=”screen” /> <link rel=”stylesheet” href=”print.css” media=”print” /> <link rel=”stylesheet” href=”responsive.css” media=”screen and (min-width: 1024px)” /> </head> ... style.css @media screen and (min-width: 720px) { .selector {...} } Tuesday, July 23, 13
  31. 31. Tuesday, July 23, 13
  32. 32. The Boston Globe http://www.bostonglobe.com/ ¿Quiénes lo están haciendo? Tuesday, July 23, 13
  33. 33. WWF http://www.wwf.org/ ¿Quiénes lo están haciendo? Tuesday, July 23, 13
  34. 34. Time http://www.time.com/ ¿Quiénes lo están haciendo? Tuesday, July 23, 13
  35. 35. Vogue (Britain) http://vogue.co.uk/ ¿Quiénes lo están haciendo? Tuesday, July 23, 13
  36. 36. Starbucks http://www.starbucks.com/ ¿Quiénes lo están haciendo? Tuesday, July 23, 13
  37. 37. Hillsong London http://www.hillsong.co.uk/ ¿Quiénes lo están haciendo? Tuesday, July 23, 13
  38. 38. Gateway Bank of Mesa, AZ http://www.gcbaz.com/ ¿Quiénes lo están haciendo? Tuesday, July 23, 13
  39. 39. Jyske Bank http://www.jyskebank.dk/wps/portal/jfo/forside ¿Quiénes lo están haciendo? Tuesday, July 23, 13
  40. 40. Autoridad de Turismo de Panamá http://www.atp.gob.pa/ Sitios que hemos hecho Tuesday, July 23, 13
  41. 41. ‣ Cuesta mucho ‣ Es difícil de hacer Conceptos erróneos Tuesday, July 23, 13
  42. 42. ‣ Es más costoso hacer sitios individuales o separados. ‣ Costos de actualizacion y mantenimiento son menores al usar un sitio responsivo. ‣ No hay diferencia de información entre un sitio y otro porque la información es la misma. ‣ Tiene en mente el futuro, no el presente. Cuesta mucho Tuesday, July 23, 13
  43. 43. ‣ Es duro el cambio de mentalidad ‣ La tecnología está; no hay que inventar nada ‣ Al principio es difícil adaptar el diseño y contenido de un sitio web de escritorio a un sitio responsivo ‣ Es cuestión de darle prioridad al contenido que se quiere mostrar Es difícil de hacer Tuesday, July 23, 13
  44. 44. Las ventajas Area Beneficio Experiencia de usuario Con una buena planeación, la experiencia para todos los usuarios es buena Acceso Un solo sitio asegura acceso a la misma información para todos los dispositivos Costos Un sólo sitio es menos costoso que sitios segmentados Tuesday, July 23, 13
  45. 45. ‣ Reproductores video HTML5 ‣ http://www.videojs.com/ ‣ http://sublimevideo.net/ ‣ Sistemas de grid ‣ http://foundation.zurb.com ‣ http://www.getskeleton.com/ ‣ http://twitter.github.io/bootstrap/ ‣ http://www.initializr.com/ Herramientas Tuesday, July 23, 13
  46. 46. ‣ Webfonts ‣ https://typekit.com/ ‣ http://www.google.com/fonts/ ‣ Iconos con fonts ‣ http://symbolset.com/ ‣ http://fortawesome.github.io/Font-Awesome/ ‣ http://codevisually.com/elusive-icons/ Herramientas Tuesday, July 23, 13
  47. 47. Preguntas Tuesday, July 23, 13
  48. 48. Email: info@rootstack.com Teléfono: +507 209 9002 Via Brasil, Edificio Brazil 405, Oficina 15-H. Tuesday, July 23, 13

×