Mobile Web

23
Inteligencia en Movimiento Promesas y desafíos de las plataformas móviles                   Ricardo Barra, Noviembre 2009 [email protected] | @Chuqui

description

Presentación de Ricardo Barra en Inteligencia en Movimiento Seminario de Redes Sociales Móviles

Transcript of Mobile Web

Page 1: Mobile Web

Inteligencia en MovimientoPromesas y desafíos de las plataformas móviles

                  Ricardo Barra, Noviembre [email protected] | @Chuqui

Page 2: Mobile Web

Acerca de mí

● 15 años sumergido● DOS, Usenet, Mosaic (Netscape), NetMeeting● Blog desde el 2003, Twitter desde el 2007● Diseño● Programación● Comunicaciones● Marketing● Profe

Page 3: Mobile Web

Mobile Web – la promesa

Luego de frustrados intentos por traer la Web a los dispositivos portátiles (WAP 1.0), hay que precisar que la Mobile Web tiene muchas ventajas...

✔ Va contigo

✔ La audiencia es gigantesca

✔ No necesita cables

✔ Se puede operar con una mano

✔ Especial proyección en países como Chile

Page 4: Mobile Web

Mobile Web – cifras y statsEl año 2007 el número de usuarios con teléfonos con navegador, superó a

la cantidad de autos (800 millones), PCs (850 millones), usuarios de Internet convencional (1,1 billones), e incluso la cantidad de TVs (1,5

billones)

Page 5: Mobile Web

Mobile Web – cifras y statsUsuarios activos han crecido 30% cada año entre el 2006 y 2010

Page 6: Mobile Web

Mobile Web – cifras y statsAumento del tráfico mensual desde junio del 2008

Causas:

- Llegada de los smartphones. Hace 1 año, el 20% del tráfico.- Redes sociales y microblogging

Page 7: Mobile Web

Mobile Web – más stats✔ Según Nokia, existen cerca de 2 billones de celulares con Internet circulando en el mundo

✔ Sólo usando Opera Mini, en marzo del 2008 hubo más de 2,4 billones de páginas vistas

✔ Más de un 13% de los estadounidenses accede a sus sitios favoritos solamente desde el móvil

✔ En India hay 4 veces más usuariosde Internet Móvil queusando PC

Page 8: Mobile Web

Mobile Web – desafíos

✔ Tamaño de la pantalla

✔ Input

✔ Ancho de banda, intermitencia y $$$

✔ Objetivos del usuario

✔ Limitaciones de los dispositivos

Page 9: Mobile Web

Mobile Web – desafíos

Resolución... * Resolución típica de un PC: 1024x768

* Celular normal: 200x200: 20x menor

* Smart phone: 320x480: 5x menor

* Próximos dispositivos a 800x600

Page 10: Mobile Web

Mobile Web – desafíos

Resolución... * 30 a 90 veces más pequeño

* generalmente vertical

* teclados virtuales ocupan mucho espacio

Page 11: Mobile Web

Mobile Web – desafíos

Ejemplo...

Page 12: Mobile Web

Mobile Web – desafíos

En un móvil...

* Scroll y zoom

* Navegación oculta contenido

* Pesa mucho

Page 13: Mobile Web

Mobile Web – desafíos

Input...

* Tipear en un móvil es lento y difícil

* No hay mouse

* Campos vs. etiquetas

Page 14: Mobile Web

Mobile Web – desafíos

Red...

* Ancho de banda muy limitado

* Alto nivel de intermitencia

* Costoso

Page 15: Mobile Web

Mobile Web – desafíos

El propio usuario... * Baja curva de atención

* Busca un solo objetivo

* Puede estar moviéndose

Limitaciones del dispositivo...

* Soporte de colores

* CSS

* Cookies

* Javascript y plugins (Flash, Java)

* Vida de la batería

* Procesador y almacenaje

* Actualizaciones

Page 16: Mobile Web

Mobile Web – soluciones

✔ Evitar las tablas (y las anidadas)

✔ Evitar imágenes muy anchas

✔ Layout líquido / elástico

✔ Organización vertical, en una columna

✔ Mucho uso de listas

✔ Usar teclas de acceso o access keys

✔ Priorizar

✔ Optimizarlo todo (especialmente imágenes)

Page 17: Mobile Web

Mobile Web – soluciones

✔ No usar imágenes de fondo

✔ No popups (nunca)

✔ No mapas de imagen

✔ Sí Flash, pero con alternativas

✔ Pensar en la accesibilidad (alt en imágenes)

✔ Sólo usar GIF, JPEG y (PNG)

✔ CSS diferenciadas

✔ No usar Frames (nunca)

Page 18: Mobile Web

Mobile Web – soluciones

✔ Mejoras progresivas (progressive enhancement)

✔ Respetar estándares (siempre). W3C y MWI son mis amigos

✔ Testear

✔ Re-testear

✔ Volver a testear

✔ Requetecontra-testear!!!

Page 19: Mobile Web

c o h e r e n t e

Page 20: Mobile Web

atractivo

Page 21: Mobile Web

si

mple

Page 22: Mobile Web

f u n c i o n a l

Page 23: Mobile Web

Gracias!

                  Ricardo Barra, Noviembre [email protected] | @Chuqui