Evolución de la web a una web móvil

1. → bit.ly/uces16

2. 
Multiplicidad de dispositivos
Web móvil

3. Estadísticas de uso

Desktop 60%

Mobile 33%

Tablet 6%
Web móvil

4. 
Aplicaciones nativas, híbridas o web
Web móvil

5. App nativa
Aprovecha toda la capacidad del dispositivo (tel,
cámara, sensores, gps, mapas, notificaciones, ...)
Mayor seguridad
Se puede acceder sin conexión
Costoso
Desarrollo para cada SO
Mantenimiento y actualización
Pago por distribución
Distribución en store de cada entorno (vidriera o
limitación)
Posibilidad de pago por descarga
Requiere instalación
Web responsive
Requiere conexión
Menor seguridad
Sin problemas en la identificación, una sola web.
Mejor SEO
No tiene contenido duplicado
Económico.
Desarrollo único para todos los entornos
(Es más costoso que una web no responsive)
Mantenimiento y actualización simples
Web móvil

6. Web responsive
Sin problemas en la identificación, una sola web.
Mejor SEO
No tiene contenido duplicado
Económico.
Desarrollo único para todos los entornos
(Es más costoso que una web no responsive)
Mantenimiento y actualización simples
Web duplicada o dinámica
Problemas en la identificación del navegador, SO,
entorno.
SEO: contenido duplicado
Menos económico.
Mantenimiento y actualización más costosa
Web móvil

7. Ubicuidad: una sola web
Una sola carga de datos
Una sola URI. Compartir un
link sin que vean el sitio
equivocado
Mejor SEO. No se duplica la
indexación y no se penaliza
Responsive Web Design

8. Flexibilidad: device agnostic
Detección de dispositivo:
suele dar errores
Future friendly
Mayor probabilidad de
compatibilidad con nuevos
dispositivos
Responsive Web Design
Displair: pantalla táctil de vapor

9. 
Contenido adaptativo

Se adapta para ser legible

Botones clickeables

Reorganizar y jerarquizar
la información

Scroll solo vertical

Evitar hacer zoom
Responsive Web Design

10. 
Multiplicidad de formatos: estructura adaptable
Responsive Web Design

11. 
Distancia de lectura variable
Legibilidad: escalar tamaño letra
Responsive Web Design

12. 
Diseño de estados según ancho
Cantidad de breakpoints según diseño
Responsive Web Design

13. 
Diseño de estados según ancho
Determinar breakpoints relevantes
Responsive Web Design

14. 
Diseño de navegación
Select, icono, footer
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Responsive Web Design

15. 
Responsivizar elementos
Texto, imágenes, slideshow, videos, mapas, mayor área de link
Responsive Web Design