Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Responsive Web Design, ventaja, inconvenientes y recomendaciones

523 visualizaciones

Publicado el

La evolución del responsive web design. Diferenciación RWD con Web-app y aplicaciones nativas. Consejos para aplicar rwd, teniendo en cuenta el contexto de uso y los contenidos.

Publicado en: Diseño
  • Sé el primero en comentar

Responsive Web Design, ventaja, inconvenientes y recomendaciones

  1. 1. Responive Design & more DÍA 7 ESDIEscola Superior de Disseny
  2. 2. ¿De donde venimos?
  3. 3. ¿De donde venimos?
  4. 4. RWD Native App WebApp Hidrid … presentaciones de clase
  5. 5. En el 2009 solo un 1% del tráfico global en internet venía de los móviles. A finales del 2012 pasó del 13%, en 2015 superó el 52% … algo ha cambiado durante estos años
  6. 6. Usuarioseninternet (Millones) Proyección de Usuarios de Internet Global: Móvil vs Escritorio, 2007 - 2015 2000 1600 1200 800 400 0 2007 2008 2009 2010 2011 2012 2013 2014 2015 Usuarios de internet desde móviles Usuarios de internet desde escritorio … algo ha cambiado durante estos años
  7. 7. Inversión en marketing móvil por tipologías 105.000 90.000 75.000 60.000 45.000 30.000 15.000 0 Inversión marketing móvil en España millonesde€invertidos 2008 2009 2010 2011 2012 28,6 32,3 +13,3% 38,0 +17,8% 63,6 +67,4% 92,2 +44,9% … teníamos crisis… no todos
  8. 8. Inversión en marketing móvil por tipologías 50.000 40.000 30.000 20.000 10.000 0 2008 2009 2010 2011 2012 millonesde€invertidos INTERNET MÓVIL APLICACIONES NATIVAS y WEB APP MENSAJERÍA PROXIMIDAD … teníamos crisis… no todos
  9. 9. Resoluciones de pantallas en 2010 97 732 Resoluciones de pantallas en 2016 … somos muchos…
  10. 10. 42% 34% 24% Móvil PC / Mac Webmail 2012 Enero El 52% de e-mail se llegan a abrir desde dispositivos móviles. … ¿Desde donde?
  11. 11. De media, llegamos a consultar hasta 180 veces nuestro móvil durante el día. … ¿Desde donde?
  12. 12. 39% de las personas lo utilizan en el baño … ¿Desde donde?
  13. 13. ¿Cuando utilizan nuestra app? • Al despertar • De camino o llegando al trabajo • Camino a casa • Antes de cenar … ¿Desde donde?
  14. 14. “La mejor dispositivo es aquel que tienes sea donde sea cuando quieres hacer algo”. DONDE QUERAMOS CUANDO QUERAMOS … por lo tanto
  15. 15. El 94% de usuarios que quieren algo de ti, primero buscan en internet. Si realmente te necesitan y no te encuentran se cabrean •56% piensan que es problema de su móvil •23% maldicen tu empresa •11% gritan a su dispositivo •4% tiran su dispositivo … por lo tanto
  16. 16. Los actores APP Nativa Web App RWD
  17. 17. És una aplicación desarrollada para una única plataforma. Toda aplicación nativa se descarga de un market y se instala en el dispositivo “ ” App nativa
  18. 18. El 85% de los usuarios prefieren las aplicaciones nativas antes que las webs, pero de la media de 41 apps que podemos tener solo utilizamos un 20% Si no funciona o no nos gusta, el 79% eliminamos la aplicación en el segundo intento. App nativa
  19. 19. Es una puerta en el mercado, transmite sensación de innovación, es un canal de venta adicional, están en contacto directo con nosotros, son más seguras… La complejidad de una aplicación tiene un coste y un tiempo a tener en cuenta 2 a 6 meses - 23.000€ - 118.000€ App nativa
  20. 20. Los usuarios y la aplicación se adaptan al dispositivo App nativa
  21. 21. És una web creada para dispositivos móviles y ofrecer una experiencia de usuario óptima sin tener en cuenta el S.O. “ ” Web App
  22. 22. La analítica móvil está totalmente separada, pudiendo tener datos exactos, a su vez podemos filtrar el tipo de contenido agilizando la navegación en el dispositivo. ¿Qué estándares de diseño seguimos? ¿Nos olvidamos de las tabletas? y si queremos diseñar para la pantalla de la nevera? Web App
  23. 23. Tenemos frameworks que agilizan la programación y reducen el coste de la misma. La programación puede ser limpia pero necesitaremos un código para cada dispositivo, diferentes URL’s. Web App
  24. 24. Los usuarios se adaptan al dispositivo y a la web Web App
  25. 25. És aquella web accesible y navegable desde cualquier dispositivo adaptándose a la resolución del dispositivo. “ ” flexible grid flexible images media queries ETHAN MARCOTTE Responsive Design
  26. 26. UNA WEB PARA DOMINARLOS A TODOS Responsive Design
  27. 27. Con la aparición de HTML5 y CSS3 y la evolución de los navegadores es posible utilizar las funcionalidades del dispositivo (cámara, gps, acelerómetro…) Actualmente las RWD pueden ir más lentas dependiendo del dispositivo y los recursos que queramos utilizar. Responsive Design
  28. 28. Al tener una única URL tenemos un mayor control de nuestros usuarios (SEO), podemos focalizar nuestras campañas o productos a los usuarios. El tiempo de carga y peso de las páginas responsivas suele ser más alto, Google penaliza las páginas con un tiempo alto de carga. Responsive Design
  29. 29. GEOLOCALIZACIÓN ACELERÓMETRO Responsive Design
  30. 30. La web se adapta a los diferentes dispositivos del usuario. Responsive Design
  31. 31. RESPONSIVE WebApp APP NATIVA Responsive Design
  32. 32. RESPONSIVE WEB DESIGN APP NATIVA
  33. 33. En el caso que necesites utilizar cualquier funcionalidad del dispositivo o tus necesidades están orientadas a un tipo de dispositivo… utilízalas! RESPONSIVE WEB DESIGN APP NATIVA ¿LAS FUNCIONALIDADES DEL MÓBIL SON IMPORTANTES? 0 0 1 10 preguntas a realizar
  34. 34. La característica más importante de una aplicación es la capacidad de diseñar experiencias para un usuario con el mínimo número de limitaciones. RESPONSIVE WEB DESIGN APP NATIVA ¿TUS DISEÑOS SON PERSONALIZADOS? 2 0 1 10 preguntas a realizar
  35. 35. HTML5 puede crear buenas interacciones pero hasta cierto punto… la aplicación nativa siempre te aportará la máxima experiencia de usuario. [standards] RESPONSIVE WEB DESIGN APP NATIVA ¿TUS INTERACCIONES SON COMPLEJAS? 3 0 2 10 preguntas a realizar
  36. 36. El tiempo de programación de una RWD es muy inferior así como su coste. Necesitamos menos recursos y solo debemos revisar un código para su funcionamiento. RESPONSIVE WEB DESIGN APP NATIVA ¿TU PRESUPUESTO ESTÁ MUY AJUSTADO? 4 0 3 10 preguntas a realizar
  37. 37. La venta desde una aplicación es mucho más simple que desde una web, el proceso de compra está muy ligado al dispositivo y la seguridad suele ser mucho mayor. RESPONSIVE WEB DESIGN APP NATIVA ¿ESTÁS INTENTANDO VENDER O MONETIZAR UN CONTENIDO?5 1 3 10 preguntas a realizar
  38. 38. Si parte de tu estrategia consiste es aumentar tu visibilidad utiliza RWD. RESPONSIVE WEB DESIGN APP NATIVA ¿EL SEO ES IMPORTANTE PARA TI? 6 1 4 10 preguntas a realizar
  39. 39. App Store y otros Markets tienen fuertes restricciones y el tiempo de aprobación alto. RESPONSIVE WEB DESIGN APP NATIVA ¿CREES QUE SERÁ DIFICIL LA APROVACIÓN DE TU APP? 7 2 4 10 preguntas a realizar
  40. 40. Una aplicación normalmente siempre funcionará más rápido que una web, esta no dependerá de internet o la velocidad de la misma. RESPONSIVE WEB DESIGN APP NATIVA ¿MUEVES MUCHA INFORMACIÓN? 8 3 4 10 preguntas a realizar
  41. 41. Si tienes actualizaciones frecuentes y quieres asegurarte que los usuarios están al día utiliza RWD. RESPONSIVE WEB DESIGN APP NATIVA ¿REALIZARAS ACTUALIZACIONES DE FORMA FRECUENTE? 9 3 5 10 preguntas a realizar
  42. 42. Si realmente quieres llegar a todos los dispositivos no lo dudes. És la forma más rápida para que tu producto esté en los dedos de los usuarios. RESPONSIVE WEB DESIGN APP NATIVA ¿QUIERES QUE SEA TOTALMENTE ACCESIBLE? 10 4 5 10 preguntas a realizar
  43. 43. El camino hacia Responsive Design
  44. 44. El camino hacia Responsive Design Con la aparición del iPhone las cosas empezaron a cambiar. Inicialmente todo era pequeño y creíamos que el zoom era la solución
  45. 45. El camino hacia Responsive Design ¿Y WebMobile?
  46. 46. Responsive Design Ethan Marcotte
  47. 47. Responsive Design = MobileFirst + Content First + Context
  48. 48. El camino hacia Responsive Design http://www.bostonglobe.com/ ¿Que vemos?
  49. 49. El camino hacia Responsive Design http://morehazards.com/
  50. 50. El camino hacia Responsive Design 1. Flexible Grid 2. Flexible images/media 3. Media Queries Existen 3 partes en el Responsive DesignExisten 3 partes en el Responsive Design
  51. 51. El camino hacia Responsive Design 1. Flexible Grid 2. Flexible images/media 3. Media Queries Flexible Grid & Images son realmente fáciles de entender
  52. 52. Flexible http://www.bostonglobe.com/
  53. 53. Flexible http://www.jsonline.com/ ¡Por cada web que hace esto, un gatito muere!
  54. 54. Flexible Flexible Grid http://alistapart.com/article/fluidgrids Ethan Marcotte
  55. 55. Flexible
  56. 56. Flexible
  57. 57. Flexible Piensa en % http://alistapart.com/article/fluidgrids Ethan Marcotte
  58. 58. Flexible Flexible media & Adaptives images
  59. 59. El camino hacia Responsive Design 1. Flexible Grid 2. Flexible images/media 3. Media Queries Habla con tu “browser”, dile como se deben mostrar las cosas
  60. 60. Media Queries 800px 1024px 1220px 800px - 1023px 1024px - 1219px 1220px Mobile Tablet Desktop Chrome Inspect Device
  61. 61. Media Queries Portrait Landscape 568px 320px
  62. 62. Responsive Design Hicimos un gran trabajo, un diseño elegante, con buenas experiencias visuales para todos los dispositivos
  63. 63. Responsive Design ¿Seguro?
  64. 64. Content Strategy (copywritter o becario)
  65. 65. Content Strategy La estrategia de contenido define que contenido debemos mostrar y donde lo devemos mostrar La suposición en el gran enemigo del contenido
  66. 66. No olvides, el contexto Content Strategy - Contexto de uso
  67. 67. No olvides, los usuarios Content Strategy - Los usuarios
  68. 68. Tu principal contenido debe estar disponible en todos los dispositivos Content Strategy - Parity
  69. 69. Content Strategy - Priority
  70. 70. Content Strategy - Priority
  71. 71. Content Strategy - Priority
  72. 72. Content Strategy - Priority ¿Qué quiere hacer realmente tu usuario? ¿Cómo evitamos las suposiciones? RESEARCH
  73. 73. Content Strategy - Priority
  74. 74. Content Strategy - Performance Rendimiento es importante
  75. 75. Content Strategy - Performance Tamaño carga web 2010 2015 700Kb 2.000Kb 2020, ¿5.000Mb?
  76. 76. Content Strategy - Performance Por cada 100milisegundos de retraso, pierde 1% de la venta https://moz.com/blog/how-to-improve-your-conversion-rates-with-a-faster-website
  77. 77. Content Strategy - Performance Rediseño web de Obama, ahora 60% más rápida Aumentaron un 14% las donaciones
  78. 78. Responsive Design 10 Consejos
  79. 79. Responsive Design 1. Comunicación Comunícate con el equipo en todo momento antes, durante, después
  80. 80. Responsive Design 2. Localiza tu contenido Busca todo el contenido que será necesario.
  81. 81. Responsive Design 3. Prioriza tu contenido Detecta cuales son los “goals” principales
  82. 82. Responsive Design 4. Contexto de uso para cada dispositivo Prioriza los contenidos dependiendo de “cuando” vaya a utilizarse
  83. 83. Responsive Design 5. Internacionalización de contenidos Piensa tus contenidos internazionalizando tu producto
  84. 84. Responsive Design 6. Puntos críticos Navegación, imágenes, arquitectura…
  85. 85. Responsive Design 7. Mobile First Empieza por la “pantalla más pequeña”
  86. 86. Responsive Design 8. Bocetos de referencia Crea bocetos básicos para jerarquizar tus contenidos
  87. 87. Responsive Design 9. Toma decisiones con los tuyos Revisa con el diseñador y los developers
  88. 88. Responsive Design 10. Pruébalo con tus usuarios
  89. 89. Pasar vuestro producto a otro dispositivo Entregar informe con la siguiente información: • ¿Por que habéis escogido este dispositivo? • ¿Que funcionalidades tiene de más o de menos? • Explicar en contexto de uso y costumer journey. • Sketches/Wireframes de las principales pantallas explicando el por que de cada cosa. • Explicar si es o no es viable esta opción 1. A partir de vuestros sketches validados con usuarios, adaptarlos a otro dispositivo. El dispositivo no puede ser Desktop ni tableta. Entrega el día 12 de Febrero NombreDelGrupo_2_ResponsiveDesign.pptx

×