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