Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Responive Design & more
DÍA 7
ESDIEscola Superior de Disseny
¿De donde venimos?
¿De donde venimos?
RWD
Native App
WebApp
Hidrid
… presentaciones de clase
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ó...
Usuarioseninternet
(Millones)
Proyección de Usuarios de Internet Global: Móvil vs Escritorio, 2007 - 2015
2000
1600
1200
8...
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 ...
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€inver...
Resoluciones de
pantallas en 2010
97 732
Resoluciones de pantallas en
2016
… somos muchos…
42%
34%
24%
Móvil PC / Mac Webmail
2012 Enero
El 52% de e-mail se llegan a abrir desde dispositivos móviles.
… ¿Desde dond...
De media, llegamos a consultar hasta 180 veces
nuestro móvil durante el día.
… ¿Desde donde?
39% de las personas lo utilizan en el baño
… ¿Desde donde?
¿Cuando utilizan nuestra app?
• Al despertar
• De camino o llegando al trabajo
• Camino a casa
• Antes de cenar
… ¿Desde d...
“La mejor dispositivo es aquel que tienes sea donde sea cuando
quieres hacer algo”.
DONDE QUERAMOS
CUANDO QUERAMOS
… por l...
El 94% de usuarios que quieren algo de ti, primero buscan en internet.
Si realmente te necesitan y no te encuentran se cab...
Los actores
APP Nativa
Web App
RWD
És una aplicación desarrollada para una única plataforma. Toda
aplicación nativa se descarga de un market y se instala en ...
El 85% de los usuarios prefieren las aplicaciones nativas antes que las
webs, pero de la media de 41 apps que podemos tene...
Es una puerta en el mercado, transmite sensación de innovación, es un
canal de venta adicional, están en contacto directo ...
Los usuarios y la aplicación se
adaptan al dispositivo
App nativa
És una web creada para dispositivos móviles y ofrecer una
experiencia de usuario óptima sin tener en cuenta el S.O.
“
”
We...
La analítica móvil está totalmente separada, pudiendo tener datos exactos,
a su vez podemos filtrar el tipo de contenido a...
Tenemos frameworks que agilizan la programación y reducen el coste de
la misma.
La programación puede ser limpia pero nece...
Los usuarios se adaptan al
dispositivo y a la web
Web App
És aquella web accesible y navegable desde cualquier dispositivo
adaptándose a la resolución del dispositivo.
“
”
flexible...
UNA WEB PARA DOMINARLOS A TODOS
Responsive Design
Con la aparición de HTML5 y CSS3 y la evolución de los navegadores es
posible utilizar las funcionalidades del dispositivo...
Al tener una única URL tenemos un mayor control de nuestros usuarios
(SEO), podemos focalizar nuestras campañas o producto...
GEOLOCALIZACIÓN ACELERÓMETRO
Responsive Design
La web se adapta a los diferentes dispositivos del
usuario.
Responsive Design
RESPONSIVE WebApp APP NATIVA
Responsive Design
RESPONSIVE
WEB DESIGN
APP NATIVA
En el caso que necesites utilizar cualquier funcionalidad del dispositivo o
tus necesidades están orientadas a un tipo de ...
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...
HTML5 puede crear buenas interacciones pero hasta cierto punto… la
aplicación nativa siempre te aportará la máxima experie...
El tiempo de programación de una RWD es muy inferior así como su
coste. Necesitamos menos recursos y solo debemos revisar ...
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...
Si parte de tu estrategia consiste es aumentar tu visibilidad utiliza
RWD.
RESPONSIVE
WEB DESIGN
APP
NATIVA
¿EL SEO ES IMP...
App Store y otros Markets tienen fuertes restricciones y el tiempo
de aprobación alto.
RESPONSIVE
WEB DESIGN
APP
NATIVA
¿C...
Una aplicación normalmente siempre funcionará más rápido que una
web, esta no dependerá de internet o la velocidad de la m...
Si tienes actualizaciones frecuentes y quieres asegurarte que los
usuarios están al día utiliza RWD.
RESPONSIVE
WEB DESIGN...
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 ...
El camino hacia
Responsive Design
El camino hacia Responsive Design
Con la aparición del iPhone las
cosas empezaron a cambiar.
Inicialmente todo era pequeño...
El camino hacia Responsive Design
¿Y WebMobile?
Responsive Design
Ethan Marcotte
Responsive Design
=
MobileFirst
+
Content First
+
Context
El camino hacia Responsive Design
http://www.bostonglobe.com/
¿Que vemos?
El camino hacia Responsive Design
http://morehazards.com/
El camino hacia Responsive Design
1. Flexible Grid
2. Flexible images/media
3. Media Queries
Existen 3 partes en el Respon...
El camino hacia Responsive Design
1. Flexible Grid
2. Flexible images/media
3. Media Queries
Flexible Grid & Images son re...
Flexible
http://www.bostonglobe.com/
Flexible
http://www.jsonline.com/
¡Por cada web que hace esto, un gatito muere!
Flexible
Flexible Grid
http://alistapart.com/article/fluidgrids
Ethan Marcotte
Flexible
Flexible
Flexible
Piensa en %
http://alistapart.com/article/fluidgrids
Ethan Marcotte
Flexible
Flexible media & Adaptives images
El camino hacia Responsive Design
1. Flexible Grid
2. Flexible images/media
3. Media Queries
Habla con tu “browser”, dile ...
Media Queries
800px 1024px 1220px
800px - 1023px 1024px - 1219px 1220px
Mobile Tablet Desktop
Chrome Inspect Device
Media Queries
Portrait Landscape
568px
320px
Responsive Design
Hicimos un gran trabajo, un diseño
elegante, con buenas experiencias
visuales para todos los dispositivos
Responsive Design
¿Seguro?
Content Strategy
(copywritter o becario)
Content Strategy
La estrategia de contenido define que contenido
debemos mostrar y donde lo devemos mostrar
La suposición ...
No olvides, el contexto
Content Strategy - Contexto de uso
No olvides, los usuarios
Content Strategy - Los usuarios
Tu principal contenido debe estar disponible en todos los dispositivos
Content Strategy - Parity
Content Strategy - Priority
Content Strategy - Priority
Content Strategy - Priority
Content Strategy - Priority
¿Qué quiere hacer realmente tu usuario?
¿Cómo evitamos las suposiciones?
RESEARCH
Content Strategy - Priority
Content Strategy - Performance
Rendimiento es importante
Content Strategy - Performance
Tamaño carga web
2010 2015
700Kb
2.000Kb
2020,
¿5.000Mb?
Content Strategy - Performance
Por cada 100milisegundos de retraso,
pierde 1% de la venta
https://moz.com/blog/how-to-impr...
Content Strategy - Performance
Rediseño web de Obama, ahora 60% más rápida
Aumentaron un 14% las donaciones
Responsive Design
10 Consejos
Responsive Design
1. Comunicación
Comunícate con el equipo en todo momento
antes, durante, después
Responsive Design
2. Localiza tu contenido
Busca todo el contenido que será necesario.
Responsive Design
3. Prioriza tu contenido
Detecta cuales son los “goals” principales
Responsive Design
4. Contexto de uso para cada dispositivo
Prioriza los contenidos dependiendo de “cuando” vaya a
utilizar...
Responsive Design
5. Internacionalización de contenidos
Piensa tus contenidos internazionalizando tu producto
Responsive Design
6. Puntos críticos
Navegación, imágenes, arquitectura…
Responsive Design
7. Mobile First
Empieza por la “pantalla más pequeña”
Responsive Design
8. Bocetos de referencia
Crea bocetos básicos para jerarquizar tus contenidos
Responsive Design
9. Toma decisiones con los tuyos
Revisa con el diseñador y los developers
Responsive Design
10. Pruébalo con tus usuarios
Pasar vuestro producto a otro dispositivo
Entregar informe con la siguiente información:
• ¿Por que habéis escogido este d...
Responsive Web Design, ventaja, inconvenientes y recomendaciones
Prochain SlideShare
Chargement dans…5
×

Responsive Web Design, ventaja, inconvenientes y recomendaciones

463 vues

Publié le

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.

Publié dans : Design
  • Soyez le premier à commenter

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

×