responsive web design, ventaja, inconvenientes y recomendaciones

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

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