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ó el 52%
… algo ha cambiado durante estos años
Usu
ario
s en
inte
rnet
(M
illon
es)
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
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
mill
ones
de €
inve
rtid
os
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
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
mill
ones
de €
inve
rtid
os
INTERNET MÓVIL APLICACIONES NATIVAS y WEB APP
MENSA JERÍA PROXIMIDAD
… teníamos crisis… no todos
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 donde?
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 donde?
“La mejor dispositivo es aquel que tienes sea donde sea cuando quieres hacer algo”.
DONDE QUERAMOS CUANDO QUERAMOS
… por lo tanto
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
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 dispositivo
“”
App nativa
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
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
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.
“”
Web App
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
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
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 grid flexible images media queries
ETHAN MARCOTTE
Responsive Design
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 (cámara, gps, acelerómetro…)
Actualmente las RWD pueden ir más lentas dependiendo del dispositivo y los recursos que queramos utilizar.
Responsive Design
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
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 dispositivo… utilízalas!
RESPONSIVE WEB DESIGN
APP NATIVA
¿LAS FUNCIONALIDADES DEL MÓBIL SON IMPORTANTES?
0 0
1
10 preguntas a realizar
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
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
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
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
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
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
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
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
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
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 y creíamos que el zoom era la solución
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 Responsive DesignExisten 3 partes en el Responsive Design
El camino hacia Responsive Design
1. Flexible Grid 2. Flexible images/media
3. Media Queries
Flexible Grid & Images son realmente fáciles de entender
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 como se deben mostrar las cosas
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 en el gran enemigo del contenido
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-improve-your-conversion-rates-with-a-faster-website
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ónComunícate con el equipo en todo momento
antes, durante, después
Responsive Design
2. Localiza tu contenidoBusca todo el contenido que será necesario.
Responsive Design
3. Prioriza tu contenidoDetecta cuales son los “goals” principales
Responsive Design
4. Contexto de uso para cada dispositivoPrioriza los contenidos dependiendo de “cuando” vaya a
utilizarse
Responsive Design
5. Internacionalización de contenidosPiensa tus contenidos internazionalizando tu producto
Responsive Design
6. Puntos críticosNavegación, imágenes, arquitectura…
Responsive Design
7. Mobile FirstEmpieza por la “pantalla más pequeña”
Responsive Design
8. Bocetos de referenciaCrea bocetos básicos para jerarquizar tus contenidos
Responsive Design
9. Toma decisiones con los tuyosRevisa 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 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
Top Related