El documento proporciona una introducción al diseño responsive y las diferentes opciones para crear experiencias digitales multiplataforma. Explica que debido al aumento del tráfico móvil, es importante que los sitios web sean accesibles y se adapten a diferentes dispositivos. Resume las tres partes clave del diseño responsive: rejilla flexible, imágenes flexibles y consultas de medios. También discute factores como el contenido, el rendimiento y las estrategias para priorizar la experiencia del usuario independientemente del dispositivo.

1. Responive Design & more
DÍA 7
ESDIEscola Superior de Disseny

2. ¿De donde venimos?

3. ¿De donde venimos?

4. RWD
Native App
WebApp
Hidrid
… presentaciones de clase

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. 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. 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. 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. Resoluciones de
pantallas en 2010
97 732
Resoluciones de pantallas en
2016
… somos muchos…

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. De media, llegamos a consultar hasta 180 veces
nuestro móvil durante el día.
… ¿Desde donde?

12. 39% de las personas lo utilizan en el baño
… ¿Desde donde?

13. ¿Cuando utilizan nuestra app?
• Al despertar
• De camino o llegando al trabajo
• Camino a casa
• Antes de cenar
… ¿Desde donde?

14. “La mejor dispositivo es aquel que tienes sea donde sea cuando
quieres hacer algo”.
DONDE QUERAMOS
CUANDO QUERAMOS
… por lo tanto

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. Los actores
APP Nativa
Web App
RWD

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. 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. 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. Los usuarios y la aplicación se
adaptan al dispositivo
App nativa

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. 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. 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. Los usuarios se adaptan al
dispositivo y a la web
Web App

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. UNA WEB PARA DOMINARLOS A TODOS
Responsive Design

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. 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. GEOLOCALIZACIÓN ACELERÓMETRO
Responsive Design

30. La web se adapta a los diferentes dispositivos del
usuario.
Responsive Design

31. RESPONSIVE WebApp APP NATIVA
Responsive Design

32. RESPONSIVE
WEB DESIGN
APP NATIVA

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. El camino hacia
Responsive Design

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. El camino hacia Responsive Design
¿Y WebMobile?

46. Responsive Design
Ethan Marcotte

47. Responsive Design
=
MobileFirst
+
Content First
+
Context

48. El camino hacia Responsive Design
http://www.bostonglobe.com/
¿Que vemos?

49. El camino hacia Responsive Design
http://morehazards.com/

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. 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. Flexible
http://www.bostonglobe.com/

53. Flexible
http://www.jsonline.com/
¡Por cada web que hace esto, un gatito muere!

54. Flexible
Flexible Grid
http://alistapart.com/article/fluidgrids
Ethan Marcotte

55. Flexible

56. Flexible

57. Flexible
Piensa en %
http://alistapart.com/article/fluidgrids
Ethan Marcotte

58. Flexible
Flexible media & Adaptives images

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. Media Queries
800px 1024px 1220px
800px - 1023px 1024px - 1219px 1220px
Mobile Tablet Desktop
Chrome Inspect Device

61. Media Queries
Portrait Landscape
568px
320px

63. Responsive Design
Hicimos un gran trabajo, un diseño
elegante, con buenas experiencias
visuales para todos los dispositivos

64. Responsive Design
¿Seguro?

65. Content Strategy
(copywritter o becario)

66. 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

67. No olvides, el contexto
Content Strategy - Contexto de uso

68. No olvides, los usuarios
Content Strategy - Los usuarios

69. Tu principal contenido debe estar disponible en todos los dispositivos
Content Strategy - Parity

70. Content Strategy - Priority

71. Content Strategy - Priority

72. Content Strategy - Priority

73. Content Strategy - Priority
¿Qué quiere hacer realmente tu usuario?
¿Cómo evitamos las suposiciones?
RESEARCH

74. Content Strategy - Priority

75. Content Strategy - Performance
Rendimiento es importante

76. Content Strategy - Performance
Tamaño carga web
2010 2015
700Kb
2.000Kb
2020,
¿5.000Mb?

77. 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

78. Content Strategy - Performance
Rediseño web de Obama, ahora 60% más rápida
Aumentaron un 14% las donaciones

79. Responsive Design
10 Consejos

80. Responsive Design
1. Comunicación
Comunícate con el equipo en todo momento
antes, durante, después

81. Responsive Design
2. Localiza tu contenido
Busca todo el contenido que será necesario.

82. Responsive Design
3. Prioriza tu contenido
Detecta cuales son los “goals” principales

83. Responsive Design
4. Contexto de uso para cada dispositivo
Prioriza los contenidos dependiendo de “cuando” vaya a
utilizarse

84. Responsive Design
5. Internacionalización de contenidos
Piensa tus contenidos internazionalizando tu producto

85. Responsive Design
6. Puntos críticos
Navegación, imágenes, arquitectura…

86. Responsive Design
7. Mobile First
Empieza por la “pantalla más pequeña”

87. Responsive Design
8. Bocetos de referencia
Crea bocetos básicos para jerarquizar tus contenidos

88. Responsive Design
9. Toma decisiones con los tuyos
Revisa con el diseñador y los developers

89. Responsive Design
10. Pruébalo con tus usuarios

90. 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