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




                                    Ricardo Barra, Noviembre 2009
                                  info@placerdigital.net | @Chuqui
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
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
Mobile Web – cifras y stats
El 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)
Mobile Web – cifras y stats
Usuarios activos han crecido 30% cada año entre el 2006 y 2010
Mobile Web – cifras y stats
    Aumento 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
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 usuarios
de Internet Móvil que
usando PC
Mobile Web – desafíos
✔   Tamaño de la pantalla

✔   Input

✔   Ancho de banda, intermitencia y $$$

✔   Objetivos del usuario

✔   Limitaciones de los dispositivos
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
Mobile Web – desafíos
Resolución...
* 30 a 90 veces más pequeño


* generalmente vertical


* teclados virtuales ocupan mucho espacio
Mobile Web – desafíos
Ejemplo...
Mobile Web – desafíos
En un móvil...
* Scroll y zoom

* Navegación oculta contenido

* Pesa mucho
Mobile Web – desafíos
Input...
* Tipear en un móvil es lento y difícil


* No hay mouse


* Campos vs. etiquetas
Mobile Web – desafíos
Red...
* Ancho de banda muy limitado


* Alto nivel de intermitencia


* Costoso
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                   * Vida de la batería

* CSS                                  * Procesador y almacenaje

* Cookies                              * Actualizaciones

* Javascript y plugins (Flash, Java)
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)
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)
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!!!
coherente
a
t
r
a
c
t
i
v
o
s
i
m
p
l
e
funcional
Gracias!

                    Ricardo Barra, Noviembre 2009
                  info@placerdigital.net | @Chuqui

Mobile Web

  • 1.
    Inteligencia en Movimiento Promesas y desafíos de las plataformas móviles                   Ricardo Barra, Noviembre 2009 info@placerdigital.net | @Chuqui
  • 2.
    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
  • 3.
    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
  • 4.
    Mobile Web –cifras y stats El 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)
  • 5.
    Mobile Web –cifras y stats Usuarios activos han crecido 30% cada año entre el 2006 y 2010
  • 6.
    Mobile Web –cifras y stats Aumento 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
  • 7.
    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 usuarios de Internet Móvil que usando PC
  • 8.
    Mobile Web –desafíos ✔ Tamaño de la pantalla ✔ Input ✔ Ancho de banda, intermitencia y $$$ ✔ Objetivos del usuario ✔ Limitaciones de los dispositivos
  • 9.
    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
  • 10.
    Mobile Web –desafíos Resolución... * 30 a 90 veces más pequeño * generalmente vertical * teclados virtuales ocupan mucho espacio
  • 11.
    Mobile Web –desafíos Ejemplo...
  • 12.
    Mobile Web –desafíos En un móvil... * Scroll y zoom * Navegación oculta contenido * Pesa mucho
  • 13.
    Mobile Web –desafíos Input... * Tipear en un móvil es lento y difícil * No hay mouse * Campos vs. etiquetas
  • 14.
    Mobile Web –desafíos Red... * Ancho de banda muy limitado * Alto nivel de intermitencia * Costoso
  • 15.
    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 * Vida de la batería * CSS * Procesador y almacenaje * Cookies * Actualizaciones * Javascript y plugins (Flash, Java)
  • 16.
    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)
  • 17.
    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)
  • 18.
    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!!!
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.